@behindthemusictree/app-kit-ui 34.1.0 → 36.0.0

package/dist/genre-tree/index.cjs

@@ -46,13 +46,13 @@ __export(genre_tree_exports, {
 module.exports = __toCommonJS(genre_tree_exports);
 
 // src/genre-tree/GenreTreeView.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_query3 = require("@tanstack/react-query");
-var import_lucide_react11 = require("lucide-react");
 var import_lucide_react12 = require("lucide-react");
-var import_ui16 = require("@behindthemusictree/ui");
-var import_genre_tree_view4 = require("@behindthemusictree/genre-tree-view");
-var import_genre_tree27 = require("@behindthemusictree/app-kit/genre-tree");
+var import_lucide_react13 = require("lucide-react");
+var import_ui17 = require("@behindthemusictree/ui");
+var import_genre_tree_view5 = require("@behindthemusictree/genre-tree-view");
+var import_genre_tree28 = require("@behindthemusictree/app-kit/genre-tree");
 var import_popup5 = require("@behindthemusictree/app-kit/popup");
 
 // src/genre-tree/playlist-tree/size-metric.ts
@@ -915,6 +915,7 @@ function GenreTreeSearch({
   artistSearch,
   songSearch,
   SearchGroups,
+  onSelectGenre,
   extraGroups = [],
   onQueryChange,
   onFocus,
@@ -940,9 +941,16 @@ function GenreTreeSearch({
       extraGroups: [...extraGroups, ...hostGroups, artistGroup, songGroup].filter((group) => group !== void 0)
     }
   );
-  return SearchGroups ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SearchGroups, { query: deferredQuery, focused, children: render }) : render([]);
+  return SearchGroups ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SearchGroups, { query: deferredQuery, focused, onSelectGenre, children: render }) : render([]);
 }
 
+// src/genre-tree/GenreDetailPanel.tsx
+var import_react14 = require("react");
+var import_genre_tree_view4 = require("@behindthemusictree/genre-tree-view");
+var import_ui7 = require("@behindthemusictree/ui");
+var import_lucide_react8 = require("lucide-react");
+var import_genre_tree19 = require("@behindthemusictree/app-kit/genre-tree");
+
 // src/genre-tree/GenreInfoPanelBody.tsx
 var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun3 = require("@behindthemusictree/app-kit/track-noun");
@@ -1391,6 +1399,7 @@ var nextCursor = (next) => {
 function GenrePlaylistTracks({
   genreUuid,
   genrePlaylist,
+  genreName: selectedGenreName,
   selection,
   scope,
   getBackendBaseUrl,
@@ -1406,14 +1415,18 @@ function GenrePlaylistTracks({
   const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player4.usePlayer)();
   const { showPopup } = (0, import_popup4.usePopup)();
   const trackNoun = (0, import_track_noun.useTrackNoun)();
-  const { uuid } = genrePlaylist;
-  const { fetch } = (0, import_transport3.useFetchWrapper)(getBackendBaseUrl);
+  const uuid = genrePlaylist?.uuid;
+  const genreName = selectedGenreName ?? genrePlaylist?.name ?? "Genre";
+  const { fetchBound } = (0, import_transport3.usePlaybackFetch)(getBackendBaseUrl);
   const playback = (0, import_transport3.usePlaybackContext)();
   const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)({
-    queryKey: [...scope === "me" ? import_genre_tree12.genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...import_genre_tree13.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), "artist", artist.uuid] : import_genre_tree13.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), ...playback.key ? [playback.key] : []],
+    queryKey: [...scope === "me" ? uuid ? import_genre_tree12.genrePlaylistQueryKeys.me.tracks(uuid) : ["missing-personal-genre-playlist", genreUuid] : artist ? [...import_genre_tree13.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), "artist", artist.uuid] : import_genre_tree13.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), ...playback.key ? [playback.key] : []],
     queryFn: async ({ pageParam }) => {
-      if (scope === "me") return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
-      const response = await fetch(
+      if (scope === "me") {
+        if (!uuid) throw new Error("Personal genre has no playlist");
+        return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
+      }
+      const response = await fetchBound(
         import_genre_tree13.libraryEndpoints.reference.songs.list(),
         true,
         false,
@@ -1425,7 +1438,9 @@ function GenrePlaylistTracks({
     },
     initialPageParam: scope === "me" ? 1 : "",
     getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
-    enabled: playback.ready && (scope !== "me" || sessionRestored && !!session?.accessToken)
+    enabled: playback.ready && (scope !== "me" || uuid !== void 0 && sessionRestored && !!session?.accessToken),
+    retry: (failureCount, error) => failureCount < 1 && error instanceof DOMException && error.name === "AbortError",
+    retryDelay: 0
   });
   const [sentinel, setSentinel] = (0, import_react12.useState)(null);
   (0, import_react12.useEffect)(() => {
@@ -1447,7 +1462,7 @@ function GenrePlaylistTracks({
       ordering: "title",
       genreUuid,
       ...selection && { selection }
-    }) : scope === "reference" ? playNewTrackListFromGenreCatalogue({ uuid: genreUuid, name: genrePlaylist.name }, scope, { startSongUuid, ...selection && { selection } }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
+    }) : 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_runtime23.jsx)(InternalErrorPopup, { errorCode: import_transport6.ErrorCode.CLIENT_UNKNOWN }));
@@ -1455,13 +1470,13 @@ function GenrePlaylistTracks({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui5.PanelSection, { title: `${(0, import_track_noun.capitalize)(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
     renderTracksToolbar?.(),
-    isPending ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui5.Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { role: "alert", children: [
+    scope === "me" && !genrePlaylist ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { children: "\u2014" }) : isPending ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui5.Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { role: "alert", children: [
       "Couldn't load ",
       trackNoun.plural,
       ".",
       " ",
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
-    ] }) : tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("ul", { className: "mt-1 max-h-64 overflow-y-auto text-[0.8125rem] leading-[1.45] [container-type:inline-size]", "aria-label": `${genrePlaylist.name} ${trackNoun.plural}`, children: [
+    ] }) : tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("ul", { className: "mt-1 max-h-64 overflow-y-auto text-[0.8125rem] leading-[1.45] [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;
@@ -1528,6 +1543,7 @@ var import_jsx_runtime24 = require("react/jsx-runtime");
 function GenreDetailExtras({
   genreUuid,
   genrePlaylist,
+  genreName,
   selection,
   wikidataId,
   scope,
@@ -1595,6 +1611,7 @@ function GenreDetailExtras({
       {
         genreUuid,
         genrePlaylist,
+        genreName,
         selection,
         scope,
         getBackendBaseUrl,
@@ -1636,6 +1653,7 @@ function GenreInfoPanelBody({
   genreUuid,
   genrePlaylist,
   catalogue,
+  countsContext,
   wikidataId,
   scope,
   getBackendBaseUrl,
@@ -1644,7 +1662,7 @@ function GenreInfoPanelBody({
   extras
 }) {
   const noun = (0, import_track_noun3.useTrackNoun)();
-  const summary = scope === "reference" ? import_genre_tree18.GenreCatalogueCountsSchema.parse(genrePlaylist) : void 0;
+  const summary = scope === "reference" ? import_genre_tree18.GenreCatalogueCountsSchema.parse(genrePlaylist ?? catalogue) : void 0;
   const selection = summary ? (0, import_genre_tree18.defaultGenreMusicSelection)(summary) : void 0;
   const describeCounts = (counts) => {
     const scopes = counts.genreAndSubgenresTracksCount;
@@ -1652,17 +1670,19 @@ function GenreInfoPanelBody({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
     toolbar,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GenreNodeActionBand, { ...band, genrePlaylist, playback }),
+    genrePlaylist ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GenreNodeActionBand, { ...band, genrePlaylist, playback }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GenreActionBand, { ...band }),
     summary && catalogue && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "px-3.5 py-3 text-sm text-[var(--color-text)]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { children: [
         "Catalogue ",
         noun.plural,
+        countsContext ? ` (${countsContext})` : "",
         ": ",
         describeCounts(catalogue)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { children: [
+      genrePlaylist && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { children: [
         "Playlist ",
         noun.plural,
+        countsContext ? ` (${countsContext})` : "",
         ": ",
         describeCounts(summary)
       ] })
@@ -1675,6 +1695,7 @@ function GenreInfoPanelBody({
         family,
         genreUuid,
         genrePlaylist,
+        genreName: band.node.name,
         selection,
         wikidataId,
         scope,
@@ -1684,10 +1705,160 @@ function GenreInfoPanelBody({
   ] });
 }
 
-// src/genre-tree/ChangeParentPopup.tsx
-var import_react14 = require("react");
-var import_genre_tree19 = require("@behindthemusictree/app-kit/genre-tree");
+// src/genre-tree/GenreDetailPanel.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
+var RELATIVE_ITEM_COUNT = 1;
+function toNode(genre, parentId) {
+  return {
+    id: genre.uuid,
+    parentId,
+    name: genre.name,
+    itemCount: RELATIVE_ITEM_COUNT,
+    side: genre.side ?? void 0,
+    wikidataId: genre.wikidataId
+  };
+}
+function useGenreDetailContent({
+  genreUuid,
+  scope,
+  getBackendBaseUrl,
+  onSelectGenre,
+  extras,
+  band,
+  playback: hostPlayback,
+  trailing,
+  genrePlaylist: hostPlaylist,
+  expanded
+}) {
+  const { data: detail, isPending, isError } = (0, import_genre_tree19.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
+  const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists: [], artist: extras?.artist });
+  const playback = hostPlayback ?? defaultPlayback;
+  const view = (0, import_react14.useMemo)(() => {
+    if (!detail) return null;
+    const rootColor = (0, import_genre_tree_view4.getGenreTreeColor)(detail.root.wikidataId);
+    const relative = (genre, parentId) => ({
+      node: toNode(genre, parentId),
+      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);
+    return {
+      node: {
+        id: detail.uuid,
+        parentId: detail.parent?.uuid ?? null,
+        name: detail.name,
+        itemCount: scope === "reference" ? (0, import_genre_tree19.genreMusicCount)(detail.criteriaPlaylist ? import_genre_tree19.GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist) : import_genre_tree19.GenreCatalogueCountsSchema.parse(detail.catalogue)) : detail.tracksCount,
+        wikidataId: detail.wikidataId
+      },
+      fill: rootColor,
+      parentNode: detail.parent ? relative(detail.parent, null) : null,
+      childNodes: detail.children.map((child) => relative(child, detail.uuid)),
+      ancestorNodes: ancestors2.map(
+        ({ ascendant }, index) => relative(ascendant, index === 0 ? null : ancestors2[index - 1].ascendant.uuid)
+      )
+    };
+  }, [detail, scope]);
+  if (isError) return {
+    title: "Genre unavailable",
+    content: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." })
+  };
+  if (isPending || !detail || !view) return {
+    title: "Loading genre\u2026",
+    content: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui7.Skeleton, { className: "h-6 w-2/3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui7.Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui7.Skeleton, { className: "h-4 w-3/4" })
+    ] })
+  };
+  const selectGenre = (nodeId) => onSelectGenre(import_genre_tree19.GenreUuidSchema.parse(nodeId));
+  const family = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_genre_tree_view4.GenreNodeFamily,
+    {
+      node: view.node,
+      fill: view.fill,
+      textColor: import_genre_tree_view4.ACCENT_TEXT_COLOR,
+      parentNode: view.parentNode,
+      childNodes: view.childNodes,
+      onSelectNode: selectGenre
+    }
+  );
+  const ancestors = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
+  return {
+    title: detail.name,
+    headerAccent: { background: view.fill, color: import_genre_tree_view4.ACCENT_TEXT_COLOR },
+    aside: expanded ? ancestors : void 0,
+    content: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        GenreInfoPanelBody,
+        {
+          family: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+            family,
+            !expanded && ancestors
+          ] }),
+          genreUuid: detail.uuid,
+          genrePlaylist: hostPlaylist ?? (detail.criteriaPlaylist === null ? null : scope === "reference" ? { ...import_genre_tree19.GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist), criteria: import_genre_tree19.CriteriaMinimumSchema.parse(detail) } : { ...detail.criteriaPlaylist, criteria: import_genre_tree19.CriteriaMinimumSchema.parse(detail), tracksCount: detail.tracksCount }),
+          catalogue: detail.catalogue,
+          countsContext: !hostPlaylist && extras?.artist ? "all artists" : void 0,
+          wikidataId: detail.wikidataId,
+          scope,
+          getBackendBaseUrl,
+          playback,
+          band: { node: view.node, ...band, shareTarget: band?.shareTarget?.kind === "genre" ? { ...band.shareTarget, name: detail.name } : band?.shareTarget },
+          extras
+        }
+      ),
+      trailing
+    ] })
+  };
+}
+function GenreDetailPanel({
+  genreUuid,
+  scope,
+  getBackendBaseUrl,
+  onClose,
+  onSelectGenre,
+  onZoomIn,
+  shareUrl,
+  shareTarget,
+  collapsed,
+  expanded,
+  onExpandedChange,
+  edgeTab,
+  extras,
+  headerClassName
+}) {
+  const panel = useGenreDetailContent({
+    genreUuid,
+    scope,
+    getBackendBaseUrl,
+    onSelectGenre,
+    extras,
+    expanded,
+    band: { onZoomIn, shareUrl, shareTarget: shareUrl ? shareTarget : void 0 }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_ui7.DetailPanel,
+    {
+      side: "left",
+      title: panel.title,
+      headerAccent: panel.headerAccent,
+      onClose,
+      collapsed,
+      expanded,
+      onExpandedChange,
+      edgeTab,
+      aside: panel.aside,
+      headerClassName,
+      headerActions: onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui7.IconButton, { "aria-label": expanded ? "Shrink panel" : "Extend panel", onClick: () => onExpandedChange(!expanded), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react8.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react8.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" }) }) : void 0,
+      children: panel.content
+    }
+  );
+}
+
+// src/genre-tree/ChangeParentPopup.tsx
+var import_react15 = require("react");
+var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function ChangeParentPopup({
   genrePlaylist,
   genrePlaylists,
@@ -1696,9 +1867,9 @@ function ChangeParentPopup({
   onClose,
   onParentChanged
 }) {
-  const { mutate, isPending, formErrors } = (0, import_genre_tree19.useUpdateGenre)(scope, getBackendBaseUrl);
-  const candidates = (0, import_react14.useMemo)(
-    () => (0, import_genre_tree19.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
+  const { mutate, isPending, formErrors } = (0, import_genre_tree20.useUpdateGenre)(scope, getBackendBaseUrl);
+  const candidates = (0, import_react15.useMemo)(
+    () => (0, import_genre_tree20.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
     [genrePlaylists, genrePlaylist.uuid]
   );
   const handleSelect = (newParent) => {
@@ -1715,19 +1886,19 @@ function ChangeParentPopup({
       }
     );
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") onClose();
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "mb-3 text-sm text-[var(--color-text-muted)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("p", { className: "mb-3 text-sm text-[var(--color-text-muted)]", children: [
       "Current parent: ",
       genrePlaylist.parent?.name ?? "none"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       GenreSearch,
       {
         genrePlaylists: candidates,
@@ -1735,24 +1906,24 @@ function ChangeParentPopup({
         placeholder: "Search a new parent\u2026"
       }
     ) }),
-    formErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
+    formErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
   ] });
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-var import_ui12 = require("@behindthemusictree/ui");
-var import_genre_tree24 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui13 = require("@behindthemusictree/ui");
+var import_genre_tree25 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/artist/ArtistHeader.tsx
-var import_ui8 = require("@behindthemusictree/ui");
+var import_ui9 = require("@behindthemusictree/ui");
 
 // src/genre-tree/artist/ArtistLinks.tsx
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react9 = require("lucide-react");
 var import_si3 = require("react-icons/si");
-var import_ui7 = require("@behindthemusictree/ui");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_ui8 = require("@behindthemusictree/ui");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var LINK_KINDS = {
-  official: { label: "Official website", Icon: import_lucide_react8.Globe },
+  official: { label: "Official website", Icon: import_lucide_react9.Globe },
   wikipedia: { label: "Wikipedia", Icon: import_si3.SiWikipedia },
   wikidata: { label: "Wikidata", Icon: import_si3.SiWikidata },
   spotify: { label: "Spotify", Icon: import_si3.SiSpotify },
@@ -1760,7 +1931,7 @@ var LINK_KINDS = {
   bandcamp: { label: "Bandcamp", Icon: import_si3.SiBandcamp },
   soundcloud: { label: "SoundCloud", Icon: import_si3.SiSoundcloud },
   discogs: { label: "Discogs", Icon: import_si3.SiDiscogs },
-  social: { label: "Social", Icon: import_lucide_react8.Share2 }
+  social: { label: "Social", Icon: import_lucide_react9.Share2 }
 };
 function socialLabel(url) {
   try {
@@ -1787,7 +1958,7 @@ function artistLinks(artist) {
   return links;
 }
 function ArtistLinks({ links }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ui7.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui8.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
 }
 
 // src/genre-tree/artist/formatYears.ts
@@ -1798,7 +1969,7 @@ function formatYears(beginYear, endYear, ended) {
 }
 
 // src/genre-tree/artist/ArtistHeader.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var countryNames = new Intl.DisplayNames(["en"], { type: "region" });
 function ArtistHeader({ artist }) {
   const fields = [];
@@ -1808,35 +1979,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_runtime28.jsx)(ArtistLinks, { links }) });
+  if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ArtistLinks, { links }) });
   if (fields.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui8.FieldList, { items: fields });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui9.FieldList, { items: fields });
 }
 
 // src/genre-tree/artist/ArtistPhoto.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ExternalLink({ href, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
 }
 function ArtistPhoto({ image, name }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("figure", { className: "flex flex-col gap-1.5 px-6 py-2.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("figcaption", { className: "text-xs text-[var(--color-text-muted)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("figure", { className: "flex flex-col gap-1.5 px-6 py-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("figcaption", { className: "text-xs text-[var(--color-text-muted)]", children: [
       "Photo: ",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
       ",",
       " ",
-      image.licenseUrl ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
+      image.licenseUrl ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
     ] })
   ] });
 }
 
 // src/genre-tree/artist/ArtistMembers.tsx
-var import_ui9 = require("@behindthemusictree/ui");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_ui10 = require("@behindthemusictree/ui");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function MembershipList({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ui9.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ul", { children: memberships.map((membership, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui10.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { children: memberships.map((membership, index) => {
     const details = [
       formatYears(membership.beginYear, membership.endYear, membership.ended),
       ...membership.roles
@@ -1844,9 +2015,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_runtime30.jsxs)("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
-        detailsText && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
+        detailsText && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
           " \u2014 ",
           detailsText
         ] })
@@ -1857,9 +2028,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_runtime30.jsxs)(import_ui9.PanelSection, { title, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_ui10.PanelSection, { title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       MembershipList,
       {
         title: "Past",
@@ -1871,8 +2042,8 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
 }
 
 // src/genre-tree/artist/ArtistDiscography.tsx
-var import_ui10 = require("@behindthemusictree/ui");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_ui11 = require("@behindthemusictree/ui");
+var import_jsx_runtime32 = 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 }) {
@@ -1892,34 +2063,34 @@ function byYear(a, b) {
 function ArtistDiscography({ albums }) {
   if (albums.length === 0) return null;
   const sorted = [...albums].sort(byYear);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui10.PanelSection, { title: "Discography", children: GROUPS.map((group) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui11.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_runtime31.jsx)(import_ui10.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui11.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
     ] }, album.uuid)) }) }, group);
   }) });
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
-var import_lucide_react9 = require("lucide-react");
-var import_ui11 = require("@behindthemusictree/ui");
+var import_lucide_react10 = require("lucide-react");
+var import_ui12 = require("@behindthemusictree/ui");
 var import_player10 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree24 = require("@behindthemusictree/app-kit/genre-tree");
 var import_transport7 = require("@behindthemusictree/app-kit/transport");
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
 var import_player9 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/TrackPositionPlayPause.tsx
 var import_fa3 = require("react-icons/fa");
 var import_player7 = require("@behindthemusictree/app-kit/player");
 var import_player8 = require("@behindthemusictree/app-kit/player");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function TrackPositionPlayPause({
   position,
   uuid,
@@ -1933,14 +2104,14 @@ function TrackPositionPlayPause({
   const isPlaying = isThisTrack && isConfirmedPlayable && playState === import_player8.PlayStates.PLAYING;
   const isPaused = isThisTrack && isConfirmedPlayable && playState === import_player8.PlayStates.PAUSED;
   const isCurrentTrackActive = isPlaying || isPaused;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime32.jsx)("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "span",
           {
             className: "track-position-play-pause__bars",
@@ -1948,18 +2119,18 @@ function TrackPositionPlayPause({
             role: "img",
             "aria-label": isPlaying ? "Playing" : "Paused",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "track-position-play-pause__bar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "track-position-play-pause__bar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "track-position-play-pause__bar" })
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__bar" })
             ]
           }
         ) : position }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             className: `hidden group-hover:flex items-center justify-center ${isCurrentTrackActive ? "" : "absolute inset-0"}`,
             "aria-hidden": "true",
-            children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa3.FaPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa3.FaPlay, {})
+            children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa3.FaPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa3.FaPlay, {})
           }
         )
       ]
@@ -1968,9 +2139,9 @@ function TrackPositionPlayPause({
 }
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
-var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function TrackItem({
   track,
   position,
@@ -1980,11 +2151,11 @@ function TrackItem({
   renderSongLink
 }) {
   const { handlePlayPauseAction, playerTrackObject, loadTrackForPlayer } = (0, import_player9.usePlayer)();
-  const { trackList, selectedTrack, toTrackAtPosition, runtimeUnplayableTrackIds } = (0, import_genre_tree20.useTrackList)();
+  const { trackList, selectedTrack, toTrackAtPosition, runtimeUnplayableTrackIds } = (0, import_genre_tree21.useTrackList)();
   const scope = trackList?.origin?.scope ?? null;
   const isCurrentTrack = playerTrackObject?.track.id === track.uuid;
   const hasPlaybackError = isCurrentTrack && !!playerTrackObject?.loadError;
-  const isUnplayable = hasPlaybackError || runtimeUnplayableTrackIds?.has(track.uuid) === true || (0, import_genre_tree21.isSong)(track) && (0, import_genre_tree21.songUnplayableReason)(track) !== null;
+  const isUnplayable = hasPlaybackError || runtimeUnplayableTrackIds?.has(track.uuid) === true || (0, import_genre_tree22.isSong)(track) && (0, import_genre_tree22.songUnplayableReason)(track) !== null;
   const handlePlayPauseClick = (event) => {
     event.stopPropagation();
     if (isCurrentTrack) {
@@ -1994,12 +2165,12 @@ function TrackItem({
       loadTrackForPlayer(track.uuid);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime33.jsx)(
+        isUnplayable ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "div",
           {
             className: "flex items-center justify-center text-lg w-16",
@@ -2007,7 +2178,7 @@ function TrackItem({
             "aria-disabled": "true",
             children: position
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           TrackPositionPlayPause,
           {
             position,
@@ -2016,12 +2187,12 @@ function TrackItem({
             isSelected: selectedTrack?.uuid === track.uuid
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree21.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_genre_tree22.ArtistNames, { artists: track.artists, renderArtistLink }) }) : ""
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree22.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_genre_tree23.ArtistNames, { artists: track.artists, renderArtistLink }) }) : ""
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-xs font-bold", children: track.genre.name }) : "" }),
-        renderDuration && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsx)("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-xs font-bold", children: track.genre.name }) : "" }),
+        renderDuration && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "div",
           {
             className: "duration flex text-base w-16 items-center justify-center",
@@ -2029,28 +2200,28 @@ function TrackItem({
             children: renderDuration(track)
           }
         ),
-        renderActions && /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime34.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_runtime34 = require("react/jsx-runtime");
-var SongPageSchema2 = (0, import_transport7.PaginatedResponseSchema)(import_genre_tree23.SongDetailedSchema);
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var SongPageSchema2 = (0, import_transport7.PaginatedResponseSchema)(import_genre_tree24.SongDetailedSchema);
 var SORTS = [
   { ordering: "title", label: "Title" },
   { ordering: "-albumYear", label: "Year" }
 ];
 function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLink }) {
-  const [page, setPage] = (0, import_react15.useState)(1);
-  const [ordering, setOrdering] = (0, import_react15.useState)("title");
-  const { fetch } = (0, import_transport7.useFetchWrapper)(getBackendBaseUrl);
-  const { playNewTrackListFromArtist } = (0, import_genre_tree23.useTrackList)();
+  const [page, setPage] = (0, import_react16.useState)(1);
+  const [ordering, setOrdering] = (0, import_react16.useState)("title");
+  const { playNewTrackListFromArtist } = (0, import_genre_tree24.useTrackList)();
   const { playerTrackObject } = (0, import_player10.usePlayer)();
-  const { data, isPending, isError } = (0, import_transport7.useQueryWithParse)({
+  const { data, isPending, isError } = (0, import_transport7.usePlaybackQuery)({
+    getBackendBaseUrl,
     queryKey: ["referenceSongs", "artist", artist.uuid, ordering, page],
-    queryFn: () => fetch(import_genre_tree23.libraryEndpoints.reference.songs.list(), true, false, void 0, {
+    queryFn: (fetchBound) => fetchBound(import_genre_tree24.libraryEndpoints.reference.songs.list(), true, false, void 0, {
       artist: artist.uuid,
       ordering,
       page
@@ -2065,25 +2236,25 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
   });
   const handleRowClickCapture = (event, song) => {
     if (!(event.target instanceof Element) || !event.target.closest(".track-position-play-pause")) return;
-    if (playerTrackObject?.track.id === song.uuid || (0, import_genre_tree23.songUnplayableReason)(song) !== null) return;
+    if (playerTrackObject?.track.id === song.uuid || (0, import_genre_tree24.songUnplayableReason)(song) !== null) return;
     event.stopPropagation();
     void play(song.uuid);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui11.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui11.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "button",
         {
           type: "button",
           onClick: () => void play(),
           className: "flex w-fit items-center gap-1.5 px-3 py-1 text-xs font-medium bg-gray-900 text-white rounded-full hover:bg-gray-700",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react9.Play, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react10.Play, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
             "Play all"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "button",
         {
           type: "button",
@@ -2098,7 +2269,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         sort.ordering
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       TrackItem,
       {
         track: song,
@@ -2107,12 +2278,12 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         renderSongLink
       }
     ) }, song.uuid)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui11.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
   ] }) });
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function useArtistPanel({
   uuid,
   scope,
@@ -2124,7 +2295,7 @@ function useArtistPanel({
   onExpandedChange,
   onClose
 }) {
-  const result = (0, import_genre_tree24.useArtist)(uuid, getBackendBaseUrl);
+  const result = (0, import_genre_tree25.useArtist)(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
   switch (result.status) {
     case "idle":
@@ -2133,26 +2304,26 @@ function useArtistPanel({
       return {
         ...panel,
         title: "Artist",
-        content: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.Skeleton, { className: "h-4 w-24" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.Skeleton, { className: "h-16 mt-2.5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.Skeleton, { className: "h-16" })
+        content: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Skeleton, { className: "h-4 w-24" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Skeleton, { className: "h-16 mt-2.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Skeleton, { className: "h-16" })
         ] })
       };
     case "not-found":
       return {
         ...panel,
         title: "Artist not found",
-        content: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This artist does not exist." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This artist does not exist." })
       };
     case "error":
       return {
         ...panel,
         title: "Artist",
-        content: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
       };
     case "success": {
       const { artist } = result;
@@ -2161,13 +2332,13 @@ function useArtistPanel({
       return {
         ...panel,
         title: artist.name,
-        content: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-          shareUrl && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: shareTarget && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl }) }) }),
-          artist.image && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArtistPhoto, { image: artist.image, name: artist.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArtistHeader, { artist }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
-          artist.tracksCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        content: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          shareUrl && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: shareTarget && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl }) }) }),
+          artist.image && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistPhoto, { image: artist.image, name: artist.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistHeader, { artist }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
+          artist.tracksCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             ArtistSongs,
             {
               artist: { uuid: artist.uuid, name: artist.name },
@@ -2177,56 +2348,56 @@ function useArtistPanel({
             }
           )
         ] }),
-        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArtistDiscography, { albums: artist.albums }) : void 0
+        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistDiscography, { albums: artist.albums }) : void 0
       };
     }
   }
 }
 
 // src/genre-tree/song/useSongPanel.tsx
-var import_ui14 = require("@behindthemusictree/ui");
-var import_genre_tree26 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui15 = require("@behindthemusictree/ui");
+var import_genre_tree27 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/song/SongPanelContent.tsx
-var import_react16 = require("react");
-var import_lucide_react10 = require("lucide-react");
-var import_ui13 = require("@behindthemusictree/ui");
+var import_react17 = require("react");
+var import_lucide_react11 = require("lucide-react");
+var import_ui14 = require("@behindthemusictree/ui");
 var import_player11 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree25 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_genre_tree26 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var numberFormat = new Intl.NumberFormat("en");
 var dateFormat = new Intl.DateTimeFormat("en", { dateStyle: "medium" });
 var externalLink = "text-[var(--color-primary)] hover:underline focus-visible:underline";
 function SongHistory({ uuid, getBackendBaseUrl }) {
-  const [open, setOpen] = (0, import_react16.useState)(false);
-  const history = (0, import_genre_tree25.useSongHistory)(uuid, getBackendBaseUrl, open);
+  const [open, setOpen] = (0, import_react17.useState)(false);
+  const history = (0, import_genre_tree26.useSongHistory)(uuid, getBackendBaseUrl, open);
   let body = null;
-  if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Skeleton, { className: "h-10", "aria-busy": "true" });
-  else if (history.status === "error") body = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-red-600", children: "Could not load the history." });
+  if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.Skeleton, { className: "h-10", "aria-busy": "true" });
+  else if (history.status === "error") body = /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime36.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("li", { className: "py-1.5 text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "font-medium", children: entry.action }),
-      entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
+    body = history.entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("li", { className: "py-1.5 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-medium", children: entry.action }),
+      entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
         " ",
         "\u2014 ",
         entry.oldValue ?? "none",
         " \u2192 ",
         entry.newValue ?? "none"
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "block text-xs text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "block text-xs text-[var(--color-text-muted)]", children: [
         entry.actorPseudo ?? "Anonymous",
         " \xB7 ",
         dateFormat.format(new Date(entry.createdOn))
       ] })
     ] }, entry.uuid)) });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "details",
     {
       onToggle: (event) => setOpen(event.currentTarget.open),
       className: "px-6 pb-2.5 mt-2.5 border-t border-[var(--color-border)]",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("summary", { className: "mt-2.5 cursor-pointer text-[0.6875rem] font-semibold uppercase text-[var(--color-text-muted)]", children: "History" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mt-1.5", children: body })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("summary", { className: "mt-2.5 cursor-pointer text-[0.6875rem] font-semibold uppercase text-[var(--color-text-muted)]", children: "History" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mt-1.5", children: body })
       ]
     }
   );
@@ -2240,25 +2411,25 @@ function SongPanelContent({
   genrePath,
   onSelectGenre
 }) {
-  const { playNewTrackListFromTrackUuid } = (0, import_genre_tree25.useTrackList)();
+  const { playNewTrackListFromTrackUuid } = (0, import_genre_tree26.useTrackList)();
   const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player11.usePlayer)();
-  const unplayableReason = (0, import_genre_tree25.songUnplayableReason)(song);
+  const unplayableReason = (0, import_genre_tree26.songUnplayableReason)(song);
   const isCurrent = playerTrackObject?.track.id === song.uuid;
   const isPlaying = isCurrent && playState === import_player11.PlayStates.PLAYING;
   const shareTarget = { kind: "song", uuid: song.uuid, name: song.title, scope };
-  const musicBrainzUrl = (0, import_genre_tree25.musicBrainzRecordingUrl)(song);
+  const musicBrainzUrl = (0, import_genre_tree26.musicBrainzRecordingUrl)(song);
   const fields = [];
   if (song.genre) {
     const path = genrePath.length > 0 ? genrePath : null;
     fields.push({
       label: "Genre",
-      value: path ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
-        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": "true", children: "\u203A " }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
+      value: path ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
+        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": "true", children: "\u203A " }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
       ] }, genrePlaylist.uuid)) }) : song.genre.name
     });
   } else {
-    fields.push({ label: "Genre", value: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-[var(--color-text-muted)]", children: "No genre" }) });
+    fields.push({ label: "Genre", value: /* @__PURE__ */ (0, import_jsx_runtime37.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;
@@ -2268,11 +2439,11 @@ function SongPanelContent({
   const links = [];
   if (musicBrainzUrl)
     links.push(
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("a", { href: musicBrainzUrl, target: "_blank", rel: "noopener noreferrer", className: externalLink, children: "MusicBrainz" }, "mb")
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("a", { href: musicBrainzUrl, target: "_blank", rel: "noopener noreferrer", className: externalLink, children: "MusicBrainz" }, "mb")
     );
   if (song.youtubeVideo)
     links.push(
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "a",
         {
           href: `https://www.youtube.com/watch?v=${encodeURIComponent(song.youtubeVideo.id)}`,
@@ -2287,33 +2458,33 @@ function SongPanelContent({
   if (links.length > 0)
     fields.push({
       label: "Links",
-      value: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex gap-3", children: links })
+      value: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex gap-3", children: links })
     });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
-      unplayableReason ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "flex items-center px-2.5 text-sm text-[var(--color-text-muted)]", children: unplayableReason }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
+      unplayableReason ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "flex items-center px-2.5 text-sm text-[var(--color-text-muted)]", children: unplayableReason }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
         "button",
         {
           type: "button",
           onClick: () => isCurrent ? handlePlayPauseAction() : playNewTrackListFromTrackUuid(song, scope),
           className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react10.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react10.Play, { "aria-hidden": "true", className: "w-5 h-5" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react11.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react11.Play, { "aria-hidden": "true", className: "w-5 h-5" }) }),
             isPlaying ? "Pause" : "Play"
           ]
         }
       ),
-      shareUrl && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
+      shareUrl && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
     ] }) }),
-    song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "px-6 pt-2.5 text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_genre_tree25.ArtistNames, { artists: song.artists, renderArtistLink }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.FieldList, { items: fields }),
-    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
+    song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "px-6 pt-2.5 text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_genre_tree26.ArtistNames, { artists: song.artists, renderArtistLink }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.FieldList, { items: fields }),
+    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
   ] });
 }
 
 // src/genre-tree/song/useSongPanel.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function useSongPanel({
   uuid,
   scope,
@@ -2326,7 +2497,7 @@ function useSongPanel({
   onExpandedChange,
   onClose
 }) {
-  const result = (0, import_genre_tree26.useSong)(uuid, getBackendBaseUrl);
+  const result = (0, import_genre_tree27.useSong)(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
   switch (result.status) {
     case "idle":
@@ -2335,24 +2506,24 @@ function useSongPanel({
       return {
         ...panel,
         title: "Song",
-        content: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.Skeleton, { className: "h-4 w-24" })
+        content: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui15.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui15.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui15.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui15.Skeleton, { className: "h-4 w-24" })
         ] })
       };
     case "not-found":
       return {
         ...panel,
         title: "Song not found",
-        content: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This song does not exist." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This song does not exist." })
       };
     case "error":
       return {
         ...panel,
         title: "Song",
-        content: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this song." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this song." })
       };
     case "success": {
       const { song } = result;
@@ -2360,7 +2531,7 @@ function useSongPanel({
       return {
         ...panel,
         title: song.title,
-        content: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        content: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           SongPanelContent,
           {
             song,
@@ -2379,29 +2550,29 @@ function useSongPanel({
 
 // src/genre-tree/SizeMetricToggle.tsx
 var import_md = require("react-icons/md");
-var import_ui15 = require("@behindthemusictree/ui");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_ui16 = require("@behindthemusictree/ui");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function SizeMetricToggle({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_ui15.SegmentedControl,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    import_ui16.SegmentedControl,
     {
       variant: "floating",
       "aria-label": "Size nodes by",
       value,
       onChange,
       options: [
-        { value: "songs", label: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_md.MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
-        { value: "views", label: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_md.MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
+        { value: "songs", label: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_md.MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
+        { value: "views", label: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_md.MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
       ]
     }
   );
 }
 
 // src/genre-tree/GenreTreeView.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = 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 = () => {
@@ -2414,8 +2585,8 @@ function GenreTreeView({
   getBackendBaseUrl,
   additionalActions,
   viewMode: controlledViewMode,
-  selectedNodeId: controlledSelectedNodeId,
-  onSelectedNodeIdChange,
+  selectedGenreUuid: controlledSelectedGenreUuid,
+  onSelectedGenreUuidChange,
   defaultViewport,
   viewportRestore,
   onViewportChange,
@@ -2463,21 +2634,21 @@ function GenreTreeView({
   placement = "default",
   ...focus
 }) {
-  const getShareUrlRef = (0, import_react17.useRef)(getShareUrl);
+  const getShareUrlRef = (0, import_react18.useRef)(getShareUrl);
   getShareUrlRef.current = getShareUrl;
-  const [internalArtistUuid, setInternalArtistUuid] = (0, import_react17.useState)(null);
+  const [internalArtistUuid, setInternalArtistUuid] = (0, import_react18.useState)(null);
   const isArtistControlled = controlledArtistUuid !== void 0;
   const artistUuid = isArtistControlled ? controlledArtistUuid : internalArtistUuid;
-  const [internalSongUuid, setInternalSongUuid] = (0, import_react17.useState)(null);
+  const [internalSongUuid, setInternalSongUuid] = (0, import_react18.useState)(null);
   const isSongControlled = controlledSongUuid !== void 0;
   const songUuid = isSongControlled ? controlledSongUuid : internalSongUuid;
   const changeSong = (uuid) => {
     if (!isSongControlled) setInternalSongUuid(uuid);
     onSongUuidChange?.(uuid);
   };
-  const [internalSizeMetric, setInternalSizeMetric] = (0, import_react17.useState)("songs");
+  const [internalSizeMetric, setInternalSizeMetric] = (0, import_react18.useState)("songs");
   const sizeMetric = controlledSizeMetric ?? internalSizeMetric;
-  const deferredSizeMetric = (0, import_react17.useDeferredValue)(sizeMetric);
+  const deferredSizeMetric = (0, import_react18.useDeferredValue)(sizeMetric);
   const changeSizeMetric = (metric) => {
     if (controlledSizeMetric === void 0) setInternalSizeMetric(metric);
     onSizeMetricChange?.(metric);
@@ -2488,10 +2659,14 @@ function GenreTreeView({
   };
   const {
     isLoading,
+    isError,
+    refetch,
     isFetching: isTreeFetching,
     genrePlaylistByNodeId,
     visibleGenrePlaylists,
     groupedGenrePlaylistsByRoot,
+    selectedGenreUuid,
+    selectGenre,
     selectedNodeId,
     selectedGenrePlaylist,
     selectNode,
@@ -2504,17 +2679,17 @@ function GenreTreeView({
     allowWheelRotation: internalAllowWheelRotation,
     toggleWheelRotation,
     onNodeHover: handleNodeHover
-  } = (0, import_genre_tree27.useGenreTreeViewState)({
+  } = (0, import_genre_tree28.useGenreTreeViewState)({
     scope,
     getBackendBaseUrl,
     viewMode: controlledViewMode,
-    selectedNodeId: controlledSelectedNodeId,
-    onSelectedNodeIdChange,
+    selectedGenreUuid: controlledSelectedGenreUuid,
+    onSelectedGenreUuidChange,
     criteriaOverviewSchema,
     artistUuid
   });
   const restoreRevision = viewportRestore?.revision;
-  const [stackedRestoreOwner, setStackedRestoreOwner] = (0, import_react17.useState)({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
+  const [stackedRestoreOwner, setStackedRestoreOwner] = (0, import_react18.useState)({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
   let restoreRootUuid = stackedRestoreOwner.rootUuid;
   if (stackedRestoreOwner.revision !== restoreRevision) {
     restoreRootUuid = selectedGenrePlaylist?.root.uuid;
@@ -2523,36 +2698,36 @@ function GenreTreeView({
     restoreRootUuid = selectedGenrePlaylist.root.uuid;
     setStackedRestoreOwner({ revision: restoreRevision, rootUuid: restoreRootUuid });
   }
-  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree27.genreUpdateMutationKey }) > 0;
-  const { mutate: updateGenre } = (0, import_genre_tree27.useUpdateGenre)(scope, getBackendBaseUrl);
+  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree28.genreUpdateMutationKey }) > 0;
+  const { mutate: updateGenre } = (0, import_genre_tree28.useUpdateGenre)(scope, getBackendBaseUrl);
   const busy = deferredSizeMetric !== sizeMetric || isTreeFetching || isGenreUpdating;
   const isArtistFiltered = artistUuid !== null;
   const canSizeByViews = !isArtistFiltered && hasViewsCount(visibleGenrePlaylists);
-  const artistResult = (0, import_genre_tree27.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
+  const artistResult = (0, import_genre_tree28.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
   const filterArtistName = artistResult.status === "success" ? artistResult.artist.name : null;
-  const filterArtist = (0, import_react17.useMemo)(
+  const filterArtist = (0, import_react18.useMemo)(
     () => artistUuid !== null && filterArtistName !== null ? { uuid: artistUuid, name: filterArtistName } : null,
     [artistUuid, filterArtistName]
   );
   const hasSelectedGenreNode = selectedGenrePlaylist !== void 0 && visibleGenrePlaylists.some(({ uuid }) => uuid === selectedGenrePlaylist.uuid);
   const playback = useGenrePlaylistPlayback({ scope, genrePlaylists: visibleGenrePlaylists, artist: filterArtist });
   const openArtist = (uuid) => {
-    if (selectedNodeId !== null) clearSelection();
+    if (selectedGenreUuid !== null) clearSelection();
     if (songUuid !== null) changeSong(null);
     changeArtist(uuid);
   };
   const openSong = (uuid) => {
-    if (selectedNodeId !== null) clearSelection();
+    if (selectedGenreUuid !== null) clearSelection();
     changeSong(uuid);
   };
-  const openSongRef = (0, import_react17.useRef)(openSong);
+  const openSongRef = (0, import_react18.useRef)(openSong);
   openSongRef.current = openSong;
-  const resolvedRenderSongLink = (0, import_react17.useCallback)(
-    (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
+  const resolvedRenderSongLink = (0, import_react18.useCallback)(
+    (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
     [renderSongLink]
   );
-  const [expandedSongUuid, setExpandedSongUuid] = (0, import_react17.useState)(null);
-  const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react17.useState)(null);
+  const [expandedSongUuid, setExpandedSongUuid] = (0, import_react18.useState)(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react18.useState)(null);
   const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
   const songBaseUrl = getBackendBaseUrl;
   const artistPanel = useArtistPanel({
@@ -2560,7 +2735,7 @@ function GenreTreeView({
     scope,
     getBackendBaseUrl: artistBaseUrl,
     getShareUrl: getShareUrlRef.current,
-    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
     expanded: controlledArtistExpanded ?? (artistUuid !== null && expandedArtistUuid === artistUuid),
     onExpandedChange: (on) => {
       if (controlledArtistExpanded === void 0) setExpandedArtistUuid(on ? artistUuid : null);
@@ -2569,7 +2744,7 @@ function GenreTreeView({
     renderSongLink: resolvedRenderSongLink,
     onClose: () => changeArtist(null)
   });
-  const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
+  const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime40.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);
@@ -2587,9 +2762,9 @@ function GenreTreeView({
     getShareUrl: getShareUrlRef.current,
     renderArtistLink: resolvedRenderArtistLink,
     getGenrePath,
-    onSelectGenre: (genrePlaylist) => {
+    onSelectGenre: (genrePlaylist2) => {
       changeSong(null);
-      selectGenrePlaylist(genrePlaylist);
+      selectGenrePlaylist(genrePlaylist2);
     },
     expanded: controlledSongExpanded ?? (songUuid !== null && expandedSongUuid === songUuid),
     onExpandedChange: (on) => {
@@ -2598,11 +2773,11 @@ function GenreTreeView({
     },
     onClose: () => changeSong(null)
   });
-  const builtInSongPanel = overlayPanel || hasSelectedGenreNode ? void 0 : songPanel;
-  const builtInArtistPanel = overlayPanel || hasSelectedGenreNode || builtInSongPanel ? void 0 : artistPanel;
+  const builtInSongPanel = overlayPanel || selectedGenreUuid !== null ? void 0 : songPanel;
+  const builtInArtistPanel = overlayPanel || selectedGenreUuid !== null || builtInSongPanel ? void 0 : artistPanel;
   const builtInPanel = builtInSongPanel ?? builtInArtistPanel;
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react17.useState)(false);
-  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react17.useState)(false);
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react18.useState)(false);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react18.useState)(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
   const isExpanded = expanded ?? uncontrolledExpanded;
   const changeCollapsed = (next) => {
@@ -2613,155 +2788,114 @@ function GenreTreeView({
     setUncontrolledExpanded(next);
     onExpandedChange?.(next);
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setUncontrolledCollapsed(false);
-  }, [selectedNodeId, artistUuid, songUuid]);
-  const [isWheelRevealed, setIsWheelRevealed] = (0, import_react17.useState)(false);
+  }, [selectedGenreUuid, artistUuid, songUuid]);
+  const [isWheelRevealed, setIsWheelRevealed] = (0, import_react18.useState)(false);
   const usesHandoff = viewMode === "wheel" || viewMode === "pop-core";
-  const isTreeReady = !isLoading && (!usesHandoff || isWheelRevealed);
-  const [resolveStyle, setResolveStyle] = (0, import_react17.useState)(null);
-  const handleNodeStyleResolverChange = (0, import_react17.useCallback)(
+  const isTreeReady = !isLoading && !isError && (!usesHandoff || isWheelRevealed);
+  const [resolveStyle, setResolveStyle] = (0, import_react18.useState)(null);
+  const handleNodeStyleResolverChange = (0, import_react18.useCallback)(
     (resolver) => setResolveStyle(() => resolver),
     []
   );
-  const panelRef = (0, import_react17.useRef)(null);
-  const obscuredInset = (0, import_ui16.useObscuredInset)(panelRef);
+  const panelRef = (0, import_react18.useRef)(null);
+  const obscuredInset = (0, import_ui17.useObscuredInset)(panelRef);
   const hostPanel = { obscuredInset, onNodeStyleResolverChange: handleNodeStyleResolverChange };
   const nodeMetric = isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric;
-  const treeNodes = (0, import_react17.useMemo)(() => toTreeNodes(visibleGenrePlaylists, nodeMetric), [visibleGenrePlaylists, nodeMetric]);
-  const relations = (0, import_genre_tree_view4.useGenreNodeRelations)(
+  const treeNodes = (0, import_react18.useMemo)(() => toTreeNodes(visibleGenrePlaylists, nodeMetric), [visibleGenrePlaylists, nodeMetric]);
+  const relations = (0, import_genre_tree_view5.useGenreNodeRelations)(
     treeNodes,
     !overlayPanel && hasSelectedGenreNode ? selectedNodeId : null,
     resolveStyle
   );
-  const [selectionHistory, setSelectionHistory] = (0, import_react17.useState)({
-    current: selectedNodeId,
-    previous: null
-  });
-  if (selectionHistory.current !== selectedNodeId) {
-    setSelectionHistory({
-      current: selectedNodeId,
-      previous: selectionHistory.current ?? selectionHistory.previous
-    });
+  const [selectionHistory, setSelectionHistory] = (0, import_react18.useState)({ current: selectedGenreUuid, previous: null });
+  if (selectionHistory.current !== selectedGenreUuid) {
+    setSelectionHistory({ current: selectedGenreUuid, previous: selectionHistory.current ?? selectionHistory.previous });
   }
-  const previousPlaylist = selectionHistory.previous !== null && selectionHistory.previous !== selectedNodeId ? genrePlaylistByNodeId.get(selectionHistory.previous) : void 0;
-  const handlePrevious = previousPlaylist && visibleGenrePlaylists.includes(previousPlaylist) ? () => handleGenreSearchSelect(previousPlaylist) : void 0;
+  const handlePrevious = selectionHistory.previous ? () => selectGenre(selectionHistory.previous) : void 0;
   const { showPopup, hidePopup } = (0, import_popup5.usePopup)();
+  const reopenPanel = () => {
+    setUncontrolledCollapsed(false);
+    onCollapsedChange?.(false);
+  };
   const handleSelectedNodeChange = (node) => {
+    reopenPanel();
     if (node !== null && songUuid !== null) changeSong(null);
     selectNode(node);
   };
   const handleGenreSearchClear = clearSelection;
-  const handleGenreSearchSelect = (genrePlaylist) => {
+  const handleGenreSearchSelect = (genrePlaylist2) => {
+    reopenPanel();
     if (songUuid !== null) changeSong(null);
-    selectGenrePlaylist(genrePlaylist);
+    selectGenrePlaylist(genrePlaylist2);
   };
   const selectedUuid = selectedGenrePlaylist?.uuid;
-  const selectedChildren = selectedUuid ? visibleGenrePlaylists.filter((genrePlaylist) => genrePlaylist.parent?.uuid === selectedUuid) : [];
+  const selectedChildren = selectedUuid ? visibleGenrePlaylists.filter((genrePlaylist2) => genrePlaylist2.parent?.uuid === selectedUuid) : [];
   const canZoomIn = viewMode === "pop-core" && focus.onFocusGenreChange !== void 0 && selectedUuid !== void 0 && focus.focusGenreUuid !== selectedUuid && selectedChildren.length > 0 && selectedChildren.filter((child) => child.criteria?.side === "pop").length <= 1;
   const handleGenreSearchZoomIn = () => {
     if (selectedUuid) focus.onFocusGenreChange?.(selectedUuid, "zoom-in");
   };
-  const zoomInRef = (0, import_react17.useRef)(void 0);
+  const zoomInRef = (0, import_react18.useRef)(void 0);
   zoomInRef.current = canZoomIn ? handleGenreSearchZoomIn : void 0;
-  const selectGenreFromPanel = (nodeId) => {
-    const genrePlaylist = genrePlaylistByNodeId.get(nodeId);
-    if (genrePlaylist) handleGenreSearchSelect(genrePlaylist);
-  };
-  const renderGenreBody = (relation) => {
-    const { node } = relation;
-    const family = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      import_genre_tree_view4.GenreNodeFamily,
-      {
-        node,
-        fill: relation.fill,
-        textColor: relation.textColor,
-        parentNode: relation.parentNode,
-        childNodes: relation.childNodes,
-        onSelectNode: selectGenreFromPanel
-      }
-    );
-    const ancestors = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: relation.ancestorNodes, onSelectNode: selectGenreFromPanel });
-    const genrePlaylist = genrePlaylistByNodeId.get(node.id);
-    const criteria = genrePlaylist?.criteria;
-    if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-      family,
-      ancestors
-    ] }) };
-    const genreUuid = criteria.uuid;
-    const parentPlaylist = visibleGenrePlaylists.find(({ uuid }) => uuid === genrePlaylist.parent?.uuid);
-    const canToggleSide = !readOnly && parentPlaylist !== void 0 && parentPlaylist.parent === null;
-    const side = criteria.side ?? "core";
-    const shareTarget = {
-      kind: "genre",
-      genrePlaylistUuid: genrePlaylist.uuid,
-      name: criteria.name,
-      scope,
-      artistUuid
-    };
-    const shareUrl = getShareUrlRef.current?.(shareTarget) ?? void 0;
-    const popSibling = canToggleSide && side === "core" ? visibleGenrePlaylists.find(
-      (sibling) => sibling.parent?.uuid === parentPlaylist.uuid && sibling.uuid !== genrePlaylist.uuid && sibling.criteria?.side === "pop"
-    ) : void 0;
-    return {
-      primary: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          GenreInfoPanelBody,
+  const genrePlaylist = selectedGenrePlaylist;
+  const criteria = genrePlaylist?.criteria;
+  const parentPlaylist = visibleGenrePlaylists.find(({ uuid }) => uuid === genrePlaylist?.parent?.uuid);
+  const canToggleSide = !readOnly && criteria !== void 0 && criteria !== null && parentPlaylist !== void 0 && parentPlaylist.parent === null;
+  const side = criteria?.side ?? "core";
+  const popSibling = canToggleSide && side === "core" ? visibleGenrePlaylists.find((sibling) => sibling.parent?.uuid === parentPlaylist.uuid && sibling.uuid !== genrePlaylist?.uuid && sibling.criteria?.side === "pop") : void 0;
+  const shareTarget = selectedGenreUuid ? { kind: "genre", genreUuid: selectedGenreUuid, name: criteria?.name ?? "Genre", scope, artistUuid } : void 0;
+  const shareUrl = shareTarget ? getShareUrlRef.current?.(shareTarget) ?? void 0 : void 0;
+  const genreContent = useGenreDetailContent({
+    genreUuid: selectedGenreUuid,
+    scope,
+    getBackendBaseUrl,
+    onSelectGenre: (uuid) => {
+      reopenPanel();
+      selectGenre(uuid);
+    },
+    expanded: isExpanded,
+    playback,
+    genrePlaylist: selectedGenrePlaylist,
+    band: {
+      ...relations ? { node: relations.node } : {},
+      shareTarget: shareUrl ? shareTarget : void 0,
+      shareUrl,
+      onZoomIn: zoomInRef.current,
+      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_runtime40.jsx)(
+          ChangeParentPopup,
           {
-            family: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-              family,
-              ancestors
-            ] }),
-            genreUuid,
-            genrePlaylist,
-            catalogue: genrePlaylist.catalogue,
-            wikidataId: criteria.wikidataId,
+            genrePlaylist: { ...genrePlaylist, criteria },
+            genrePlaylists: visibleGenrePlaylists,
             scope,
             getBackendBaseUrl,
-            playback,
-            band: {
-              node,
-              shareTarget: shareUrl ? shareTarget : void 0,
-              shareUrl,
-              onZoomIn: zoomInRef.current,
-              onAddChild: readOnly ? void 0 : () => handleGenreCreationAction(criteria),
-              onRename: readOnly ? void 0 : () => handleGenreRenameAction(criteria),
-              onChangeParent: readOnly ? void 0 : () => showPopup(
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                  ChangeParentPopup,
-                  {
-                    genrePlaylist: { ...genrePlaylist, criteria },
-                    genrePlaylists: visibleGenrePlaylists,
-                    scope,
-                    getBackendBaseUrl,
-                    onClose: hidePopup,
-                    onParentChanged
-                  }
-                )
-              ),
-              side,
-              onToggleSide: canToggleSide ? () => updateGenre({ uuid: genreUuid, data: { side: side === "pop" ? "core" : "pop" } }) : void 0,
-              toggleSideDisabledReason: popSibling ? `${popSibling.name} is already the pop side of ${parentPlaylist?.name}` : void 0,
-              additionalActions
-            },
-            extras: {
-              criteriaOverviewSchema,
-              renderGenreDetailExtras,
-              renderArtistLink,
-              renderSongLink: resolvedRenderSongLink,
-              artist: filterArtist,
-              renderSummary,
-              renderEssentialTracks,
-              renderSongLeading,
-              renderSongActions,
-              renderTracksToolbar
-            }
+            onClose: hidePopup,
+            onParentChanged
           }
-        ),
-        renderDangerZone?.(node)
-      ] })
-    };
-  };
+        )
+      ),
+      side,
+      onToggleSide: canToggleSide && criteria ? () => updateGenre({ uuid: criteria.uuid, data: { side: side === "pop" ? "core" : "pop" } }) : void 0,
+      toggleSideDisabledReason: popSibling ? `${popSibling.name} is already the pop side of ${parentPlaylist?.name}` : void 0,
+      additionalActions
+    },
+    extras: {
+      criteriaOverviewSchema,
+      renderGenreDetailExtras,
+      renderArtistLink,
+      renderSongLink: resolvedRenderSongLink,
+      artist: filterArtist,
+      renderSummary,
+      renderEssentialTracks,
+      renderSongLeading,
+      renderSongActions,
+      renderTracksToolbar
+    },
+    trailing: relations ? renderDangerZone?.(relations.node) : void 0
+  });
   const isRotationControlled = controlledAllowWheelRotation !== void 0;
   const allowWheelRotation = controlledAllowWheelRotation ?? internalAllowWheelRotation;
   let activePanel = null;
@@ -2775,16 +2909,16 @@ function GenreTreeView({
       onClose: overlayPanel.onClose,
       compact: false
     };
-  } else if (relations) {
-    const { primary } = renderGenreBody(relations);
+  } else if (selectedGenreUuid) {
     activePanel = {
-      title: relations.node.name,
-      content: primary,
+      title: genreContent.title,
+      content: genreContent.content,
+      aside: genreContent.aside,
       expanded: isExpanded,
       onExpandedChange: changeExpanded,
       onClose: clearSelection,
-      compact: true,
-      headerAccent: { background: relations.fill, color: relations.textColor }
+      compact: false,
+      headerAccent: relations ? { background: relations.fill, color: relations.textColor } : genreContent.headerAccent
     };
   } else if (builtInPanel) {
     activePanel = {
@@ -2797,36 +2931,36 @@ function GenreTreeView({
       compact: true
     };
   }
-  const isPanelShown = isTreeReady && activePanel !== null;
+  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_runtime39.jsx)(
-    import_ui16.IconButton,
+  const expandButton = placement === "default" && activePanel?.onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    import_ui17.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_runtime39.jsx)(import_lucide_react12.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react12.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
+      children: activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react13.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react13.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
     }
   ) : null;
   const renderArtistFilter = () => {
     if (isLoading || !filterArtist) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "button",
         {
           type: "button",
           className: "py-1 pl-3 pr-2 [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] hover:underline",
           "aria-label": `Show artist ${filterArtist.name}`,
           onClick: () => {
-            if (selectedNodeId !== null) clearSelection();
+            if (selectedGenreUuid !== null) clearSelection();
           },
           children: filterArtist.name
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "button",
         {
           type: "button",
@@ -2838,8 +2972,8 @@ function GenreTreeView({
       )
     ] });
   };
-  const actions = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  const actions = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    !isLoading && !isError && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       GenreTreeSearch,
       {
         artistBaseUrl,
@@ -2857,7 +2991,12 @@ function GenreTreeView({
         SearchGroups,
         genrePlaylists: visibleGenrePlaylists,
         onSelect: handleGenreSearchSelect,
-        selectedName: selectedGenrePlaylist?.name ?? (typeof builtInPanel?.title === "string" ? builtInPanel.title : null),
+        onSelectGenre: (uuid) => {
+          reopenPanel();
+          if (songUuid) changeSong(null);
+          selectGenre(uuid);
+        },
+        selectedName: (selectedGenreUuid ? genreContent.title : null) ?? (typeof builtInPanel?.title === "string" ? builtInPanel.title : null),
         onClear: builtInSongPanel ? () => changeSong(null) : builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
         onPrevious: handlePrevious,
         onQueryChange: onSearchQueryChange,
@@ -2865,10 +3004,10 @@ function GenreTreeView({
         extraGroups: extraSearchGroups
       }
     ),
-    !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "contents max-md:flex max-md:w-full max-md:items-center max-md:gap-2 max-md:overflow-x-auto max-md:[scrollbar-width:none] max-md:[&>*]:shrink-0", children: [
-      !isLoading && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        import_ui16.SegmentedControl,
+    !isLoading && !isError && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)(
+        import_ui17.SegmentedControl,
         {
           "aria-label": "Tree view mode",
           value: viewMode,
@@ -2881,14 +3020,14 @@ function GenreTreeView({
           ]
         }
       ),
-      !isLoading && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      !isLoading && !isError && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "div",
         {
           className: "flex items-center gap-1",
           role: "group",
           "aria-label": "Tree display options",
-          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            import_ui16.Button,
+          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_ui17.Button,
             {
               variant: allowWheelRotation ? "default" : "outline",
               size: "sm",
@@ -2898,44 +3037,48 @@ function GenreTreeView({
           )
         }
       ),
-      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        import_ui16.IconTextButton,
+      !isLoading && !isError && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        import_ui17.IconTextButton,
         {
-          icon: import_lucide_react11.Plus,
+          icon: import_lucide_react12.Plus,
           text: "Add root",
           onClick: () => handleGenreCreationAction(null)
         }
       )
     ] })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "div",
           {
             className: `actions-container absolute z-30 flex items-center gap-2 ${placement === "regions" ? "left-[calc(var(--layout-gutter)+var(--layout-panel-inset))] top-[calc(var(--layout-gutter)+var(--layout-panel-inset))] max-md:right-[calc(var(--layout-gutter)+var(--layout-panel-inset))] max-md:top-[var(--layout-band-top)] max-md:flex-col max-md:items-stretch" : "left-5 top-5"}`,
             children: actions
           }
         ),
-        !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        !isLoading && !isError && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "div",
           {
             className: `absolute left-1/2 z-30 hidden -translate-x-1/2 md:block ${placement === "regions" ? "top-[calc(var(--layout-gutter)+var(--layout-panel-inset))]" : "top-5"}`,
             children: renderArtistFilter()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
-          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
-          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_genre_tree_view4.GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
+          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_genre_tree_view5.GenreTreeViewSkeleton, { viewMode }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { role: "alert", className: "m-auto text-center", children: [
+            "Couldn't load the genre tree.",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime39.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_genre_tree_view5.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               GenrePlaylistTreeWheel,
               {
                 scope,
@@ -2952,9 +3095,9 @@ function GenreTreeView({
                 allowWheelRotation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
                 viewportRestore,
@@ -2963,7 +3106,7 @@ function GenreTreeView({
             ) }) })
           ) : viewMode === "pop-core" ? (
             // Same as the wheel: the header inset extends its fill behind the floating search bar, Google Maps style.
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_genre_tree_view5.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               GenrePlaylistTreeWheelRadialPopCore,
               {
                 scope,
@@ -2980,9 +3123,9 @@ function GenreTreeView({
                 allowWheelRotation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
                 viewportRestore,
@@ -2990,7 +3133,7 @@ function GenreTreeView({
                 ...focus
               }
             ) }) })
-          ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             GenrePlaylistTreeWheelRadialPopCore,
             {
               outline: true,
@@ -3006,13 +3149,13 @@ function GenreTreeView({
               selectedNodeId,
               readOnly
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)]", children: Object.entries(groupedGenrePlaylistsByRoot).map(
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime39.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "div",
                 {
                   className: "tree-per-root-container relative shrink-0 h-[28rem] mt-2 mr-16 p-2 bg-[var(--color-neutral-100)] rounded-lg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                     GenrePlaylistTreePerRoot,
                     {
                       scope,
@@ -3038,8 +3181,8 @@ function GenreTreeView({
               );
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            import_ui16.DetailPanel,
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_ui17.DetailPanel,
             {
               ref: panelRef,
               side: "left",
@@ -3049,13 +3192,13 @@ function GenreTreeView({
               headerAccent: activePanel?.headerAccent,
               headerActions: expandButton,
               onClose: activePanel?.onClose ?? noop,
-              collapsed: isCollapsed || !isTreeReady || !activePanel,
+              collapsed: isCollapsed || !isPanelShown,
               expanded: activePanel?.expanded,
               onExpandedChange: activePanel?.onExpandedChange,
               aside: activePanel?.aside,
               edgeTab: detailTab,
-              headerClassName: activePanel?.compact ? "pt-[calc(var(--layout-search-h)+var(--layout-panel-inset)+0.5rem)]" : void 0,
-              children: activePanel?.aside && !activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+              headerClassName: "pt-[calc(var(--layout-search-h)+var(--layout-panel-inset)+0.5rem)]",
+              children: activePanel?.aside && !activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
                 activePanel.content,
                 activePanel.aside
               ] }) : activePanel?.content
@@ -3067,134 +3210,6 @@ function GenreTreeView({
   );
 }
 
-// src/genre-tree/GenreDetailPanel.tsx
-var import_react18 = require("react");
-var import_genre_tree_view5 = require("@behindthemusictree/genre-tree-view");
-var import_ui17 = require("@behindthemusictree/ui");
-var import_lucide_react13 = require("lucide-react");
-var import_genre_tree28 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var RELATIVE_ITEM_COUNT = 1;
-function toNode(genre, parentId) {
-  return {
-    id: genre.uuid,
-    parentId,
-    name: genre.name,
-    itemCount: RELATIVE_ITEM_COUNT,
-    side: genre.side ?? void 0,
-    wikidataId: genre.wikidataId
-  };
-}
-function GenreDetailPanel({
-  genreUuid,
-  scope,
-  getBackendBaseUrl,
-  onClose,
-  onSelectGenre,
-  onZoomIn,
-  shareUrl,
-  shareTarget,
-  collapsed,
-  expanded,
-  onExpandedChange,
-  edgeTab,
-  extras
-}) {
-  const { data: detail, isPending, isError } = (0, import_genre_tree28.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
-  const playback = useGenrePlaylistPlayback({ scope, genrePlaylists: [] });
-  const view = (0, import_react18.useMemo)(() => {
-    if (!detail) return null;
-    const rootColor = (0, import_genre_tree_view5.getGenreTreeColor)(detail.root.wikidataId);
-    const relative = (genre, parentId) => ({
-      node: toNode(genre, parentId),
-      fill: (0, import_genre_tree_view5.tintSurface)(rootColor),
-      textColor: import_genre_tree_view5.TEXT_COLOR
-    });
-    const ancestors2 = [...detail.ascendants].sort((a, b) => b.degree - a.degree);
-    return {
-      node: {
-        id: detail.uuid,
-        parentId: detail.parent?.uuid ?? null,
-        name: detail.name,
-        itemCount: scope === "reference" ? (0, import_genre_tree28.genreMusicCount)(import_genre_tree28.GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist)) : detail.tracksCount,
-        wikidataId: detail.wikidataId
-      },
-      fill: rootColor,
-      parentNode: detail.parent ? relative(detail.parent, null) : null,
-      childNodes: detail.children.map((child) => relative(child, detail.uuid)),
-      ancestorNodes: ancestors2.map(
-        ({ ascendant }, index) => relative(ascendant, index === 0 ? null : ancestors2[index - 1].ascendant.uuid)
-      )
-    };
-  }, [detail, scope]);
-  if (isError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." });
-  }
-  if (isPending || !detail || !view) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui17.Skeleton, { className: "h-6 w-2/3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui17.Skeleton, { className: "h-4 w-full" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui17.Skeleton, { className: "h-4 w-3/4" })
-    ] });
-  }
-  const selectGenre = (nodeId) => onSelectGenre(nodeId);
-  const family = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    import_genre_tree_view5.GenreNodeFamily,
-    {
-      node: view.node,
-      fill: view.fill,
-      textColor: import_genre_tree_view5.ACCENT_TEXT_COLOR,
-      parentNode: view.parentNode,
-      childNodes: view.childNodes,
-      onSelectNode: selectGenre
-    }
-  );
-  const ancestors = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_genre_tree_view5.GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-    import_ui17.DetailPanel,
-    {
-      side: "left",
-      title: view.node.name,
-      headerAccent: { background: view.fill, color: import_genre_tree_view5.ACCENT_TEXT_COLOR },
-      headerActions: onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-        import_ui17.IconButton,
-        {
-          "aria-label": expanded ? "Shrink panel" : "Extend panel",
-          style: { color: "inherit" },
-          onClick: () => onExpandedChange(!expanded),
-          children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react13.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react13.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
-        }
-      ) : void 0,
-      onClose,
-      collapsed,
-      expanded,
-      onExpandedChange,
-      edgeTab,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          GenreInfoPanelBody,
-          {
-            family: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-              family,
-              ancestors
-            ] }),
-            genreUuid: detail.uuid,
-            genrePlaylist: scope === "reference" ? import_genre_tree28.GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist) : { ...detail.criteriaPlaylist, tracksCount: detail.tracksCount },
-            catalogue: detail.catalogue,
-            wikidataId: detail.wikidataId,
-            scope,
-            getBackendBaseUrl,
-            playback,
-            band: { node: view.node, onZoomIn, shareUrl, shareTarget: shareUrl ? shareTarget : void 0 },
-            extras
-          }
-        ),
-        !expanded && ancestors
-      ]
-    }
-  );
-}
-
 // src/genre-tree/index.ts
 var import_genre_tree_view6 = require("@behindthemusictree/genre-tree-view");