@behindthemusictree/app-kit-ui 33.3.0 → 34.1.0

package/dist/{chunk-QMELESFB.js → chunk-JP7PID7L.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk-DKQQLLMY.js";
 
 // src/genre-tree/GenreTreeView.tsx
-import { useCallback as useCallback6, useDeferredValue, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef3, useState as useState8 } from "react";
+import { useCallback as useCallback6, useDeferredValue as useDeferredValue2, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef3, useState as useState9 } from "react";
 import { useIsMutating } from "@tanstack/react-query";
 import { Plus as Plus2 } from "lucide-react";
 import { Maximize2, Minimize2 } from "lucide-react";
@@ -21,9 +21,10 @@ import { useGenreTreeViewState, useArtist as useArtist2, useUpdateGenre as useUp
 import { usePopup as usePopup5 } from "@behindthemusictree/app-kit/popup";
 
 // src/genre-tree/playlist-tree/size-metric.ts
+import { genrePlaylistTrackCount } from "@behindthemusictree/app-kit/genre-tree";
 var hasViewsCount = (genrePlaylists) => genrePlaylists.every((genrePlaylist) => genrePlaylist.viewsCount !== void 0);
 var genrePlaylistSize = (genrePlaylist, metric) => {
-  if (metric === "songs") return genrePlaylist.tracksCount;
+  if (metric === "songs") return genrePlaylistTrackCount(genrePlaylist);
   if (genrePlaylist.viewsCount === void 0) {
     throw new Error(`Genre playlist ${genrePlaylist.uuid} has no viewsCount to size by views`);
   }
@@ -47,6 +48,7 @@ function toTreeNodes(genrePlaylists, sizeMetric) {
 }
 
 // src/genre-tree/playlist-tree/TreePerRoot.tsx
+import { genrePlaylistTrackCount as genrePlaylistTrackCount2 } from "@behindthemusictree/app-kit/genre-tree";
 import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
 import {
   GenreTree,
@@ -60,30 +62,32 @@ import { ErrorCode } from "@behindthemusictree/app-kit/transport";
 import { useCallback, useMemo } from "react";
 import {
   TrackListOriginType,
-  useTrackList
+  useTrackList,
+  GenreCatalogueCountsSchema,
+  defaultGenreMusicSelection,
+  genreMusicSelectionKey
 } from "@behindthemusictree/app-kit/genre-tree";
 function useGenrePlaylistPlayback({
   scope,
   genrePlaylists,
   artist = null
 }) {
-  const { trackList, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = useTrackList();
+  const { trackList, playNewTrackListFromGenrePlaylist } = useTrackList();
   const origin = trackList?.origin;
   const playingNodeId = useMemo(() => {
-    if (!origin) return null;
-    if (!artist) return origin.type === TrackListOriginType.GENRE_PLAYLIST ? origin.uuid : null;
-    if (origin.type !== TrackListOriginType.ARTIST || origin.uuid !== artist.uuid) return null;
-    const { genreUuid } = origin;
-    return genreUuid ? genrePlaylists.find((gp) => gp.criteria?.uuid === genreUuid)?.uuid ?? null : null;
-  }, [origin, artist, genrePlaylists]);
-  const play = useCallback(
-    async (genrePlaylist) => {
-      if (!artist) return playNewTrackListFromGenrePlaylist(genrePlaylist, scope);
-      if (!genrePlaylist.criteria) return;
-      return playNewTrackListFromArtist(artist, scope, { ordering: "title", genreUuid: genrePlaylist.criteria.uuid });
-    },
-    [artist, scope, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist]
-  );
+    if (!origin || origin.type !== TrackListOriginType.GENRE_PLAYLIST || origin.scope !== scope) return null;
+    const playlistOrigin = origin;
+    if (playlistOrigin.artistUuid !== artist?.uuid) return null;
+    const playlist = genrePlaylists.find((item) => item.uuid === origin.uuid) ?? playlistOrigin.criteriaPlaylist;
+    const expected = scope === "reference" && playlist && !("criteria" in playlist && playlist.criteria === null) ? defaultGenreMusicSelection(GenreCatalogueCountsSchema.parse(playlist)) : void 0;
+    if (playlistOrigin.selection && expected && genreMusicSelectionKey(playlistOrigin.selection).join() !== genreMusicSelectionKey(expected).join()) return null;
+    return origin.uuid;
+  }, [origin, artist, genrePlaylists, scope]);
+  const play = useCallback(async (playlist) => {
+    if (artist && !playlist.criteria) return;
+    const selection = scope === "reference" && playlist.criteria !== null ? defaultGenreMusicSelection(GenreCatalogueCountsSchema.parse(playlist)) : void 0;
+    return selection || artist ? playNewTrackListFromGenrePlaylist(playlist, scope, { selection, ...artist && { artistUuid: artist.uuid } }) : playNewTrackListFromGenrePlaylist(playlist, scope);
+  }, [artist, scope, playNewTrackListFromGenrePlaylist]);
   return useMemo(() => ({ playingNodeId, play }), [playingNodeId, play]);
 }
 
@@ -118,7 +122,7 @@ function GenrePlaylistTreePerRoot({
       id: genrePlaylist.uuid,
       parentId: genrePlaylist.parent?.uuid ?? null,
       name: genrePlaylist.name,
-      itemCount: genrePlaylist.tracksCount,
+      itemCount: genrePlaylistTrackCount2(genrePlaylist),
       actionable: Boolean(genrePlaylist.criteria),
       side: genrePlaylist.criteria?.side ?? void 0,
       wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
@@ -134,7 +138,7 @@ function GenrePlaylistTreePerRoot({
         setIsPlaying(!isPlaying);
         return;
       }
-      if (genrePlaylist.tracksCount === 0) {
+      if (genrePlaylistTrackCount2(genrePlaylist) === 0) {
         return;
       }
       play(genrePlaylist).catch((error) => {
@@ -198,6 +202,7 @@ function GenrePlaylistTreePerRoot({
 }
 
 // src/genre-tree/playlist-tree/TreeWheel.tsx
+import { genrePlaylistTrackCount as genrePlaylistTrackCount3 } from "@behindthemusictree/app-kit/genre-tree";
 import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
 import {
   GenreTreeWheel
@@ -252,7 +257,7 @@ function GenrePlaylistTreeWheel({
         setIsPlaying(!isPlaying);
         return;
       }
-      if (genrePlaylist.tracksCount === 0) {
+      if (genrePlaylistTrackCount3(genrePlaylist) === 0) {
         return;
       }
       play(genrePlaylist).catch((error) => {
@@ -317,6 +322,7 @@ function GenrePlaylistTreeWheel({
 }
 
 // src/genre-tree/playlist-tree/TreeWheelRadialPopCore.tsx
+import { genrePlaylistTrackCount as genrePlaylistTrackCount4 } from "@behindthemusictree/app-kit/genre-tree";
 import { useCallback as useCallback4, useMemo as useMemo4 } from "react";
 import {
   GenreTreeOutline,
@@ -364,7 +370,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
         setIsPlaying(!isPlaying);
         return;
       }
-      if (genrePlaylist.tracksCount === 0) {
+      if (genrePlaylistTrackCount4(genrePlaylist) === 0) {
         return;
       }
       play(genrePlaylist).catch((error) => {
@@ -459,6 +465,9 @@ function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
   ] });
 }
 
+// src/genre-tree/GenreTreeSearch.tsx
+import { useDeferredValue, useState as useState3 } from "react";
+
 // src/genre-tree/GenreSearch.tsx
 import { ArrowLeft } from "lucide-react";
 import { SEARCH_LEADING_BUTTON_CLASS } from "@behindthemusictree/ui";
@@ -664,7 +673,51 @@ function GenreSearch({
   ) });
 }
 
+// src/genre-tree/GenreTreeSearch.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function GenreTreeSearch({
+  artistBaseUrl,
+  songBaseUrl,
+  onArtistSelect,
+  onSongSelect,
+  artistSearch,
+  songSearch,
+  SearchGroups,
+  extraGroups = [],
+  onQueryChange,
+  onFocus,
+  ...props
+}) {
+  const [query, setQuery] = useState3("");
+  const [focused, setFocused] = useState3(false);
+  const deferredQuery = useDeferredValue(query);
+  const artistGroup = useArtistSearchGroup(artistBaseUrl, deferredQuery, onArtistSelect, artistSearch);
+  const songGroup = useSongSearchGroup(songBaseUrl, deferredQuery, onSongSelect, songSearch);
+  const render = (hostGroups) => /* @__PURE__ */ jsx9(
+    GenreSearch,
+    {
+      ...props,
+      onQueryChange: (text) => {
+        setQuery(text);
+        onQueryChange?.(text);
+      },
+      onFocus: () => {
+        setFocused(true);
+        onFocus?.();
+      },
+      extraGroups: [...extraGroups, ...hostGroups, artistGroup, songGroup].filter((group) => group !== void 0)
+    }
+  );
+  return SearchGroups ? /* @__PURE__ */ jsx9(SearchGroups, { query: deferredQuery, focused, children: render }) : render([]);
+}
+
 // src/genre-tree/GenreInfoPanelBody.tsx
+import {
+  genreMusicCount,
+  defaultGenreMusicSelection as defaultGenreMusicSelection2,
+  GenreCatalogueCountsSchema as GenreCatalogueCountsSchema2
+} from "@behindthemusictree/app-kit/genre-tree";
+import { useTrackNoun as useTrackNoun3 } from "@behindthemusictree/app-kit/track-noun";
 import { usePlayer as usePlayer5 } from "@behindthemusictree/app-kit/player";
 
 // src/genre-tree/GenreActionBand.tsx
@@ -675,18 +728,18 @@ import { Share2 as Share22 } from "lucide-react";
 import { usePopup as usePopup3 } from "@behindthemusictree/app-kit/popup";
 
 // src/genre-tree/SharePopup.tsx
-import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo5, useState as useState3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo5, useState as useState4 } from "react";
 import { Link2, Share2 } from "lucide-react";
 import { FaWhatsapp } from "react-icons/fa";
 import { SiGmail } from "react-icons/si";
 
 // src/genre-tree/ShareDestinationButton.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var className = "group flex min-w-0 flex-1 flex-col items-center justify-center gap-1.5 rounded-xl px-2 py-2 text-xs text-[var(--color-text)] transition-colors hover:bg-[var(--color-surface-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50";
 function Contents({ icon, label }) {
   return /* @__PURE__ */ jsxs6(Fragment4, { children: [
-    /* @__PURE__ */ jsx9("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: icon }),
-    /* @__PURE__ */ jsx9("span", { className: "max-w-full truncate", children: label })
+    /* @__PURE__ */ jsx10("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: icon }),
+    /* @__PURE__ */ jsx10("span", { className: "max-w-full truncate", children: label })
   ] });
 }
 function ShareDestinationButton({
@@ -698,29 +751,29 @@ function ShareDestinationButton({
   ariaLabel
 }) {
   if (href) {
-    return /* @__PURE__ */ jsx9("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className, children: /* @__PURE__ */ jsx9(Contents, { icon, label }) });
+    return /* @__PURE__ */ jsx10("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className, children: /* @__PURE__ */ jsx10(Contents, { icon, label }) });
   }
-  return /* @__PURE__ */ jsx9("button", { type: "button", onClick, disabled, "aria-label": ariaLabel, className, children: /* @__PURE__ */ jsx9(Contents, { icon, label }) });
+  return /* @__PURE__ */ jsx10("button", { type: "button", onClick, disabled, "aria-label": ariaLabel, className, children: /* @__PURE__ */ jsx10(Contents, { icon, label }) });
 }
 
 // src/genre-tree/SharePreviewCard.tsx
 import { Music, Music2, UserRound } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function SharePreviewCard({ target, url }) {
   const Icon = { genre: Music2, artist: UserRound, song: Music }[target.kind];
   const typeLabel = { genre: "Genre", artist: "Artist", song: "Song" }[target.kind];
-  return /* @__PURE__ */ jsx10("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ jsxs7("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
-    /* @__PURE__ */ jsx10("div", { className: "flex w-28 shrink-0 items-center justify-center bg-[var(--color-primary)]/15 text-[var(--color-primary)]", children: /* @__PURE__ */ jsx10(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
+  return /* @__PURE__ */ jsx11("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ jsxs7("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
+    /* @__PURE__ */ jsx11("div", { className: "flex w-28 shrink-0 items-center justify-center bg-[var(--color-primary)]/15 text-[var(--color-primary)]", children: /* @__PURE__ */ jsx11(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
     /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
-      /* @__PURE__ */ jsx10("span", { className: "text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
-      /* @__PURE__ */ jsx10("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
-      /* @__PURE__ */ jsx10("span", { className: "truncate text-sm text-[var(--color-primary)]", title: url, children: url })
+      /* @__PURE__ */ jsx11("span", { className: "text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
+      /* @__PURE__ */ jsx11("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
+      /* @__PURE__ */ jsx11("span", { className: "truncate text-sm text-[var(--color-primary)]", title: url, children: url })
     ] })
   ] }) });
 }
 
 // src/genre-tree/SharePopup.tsx
-import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function resolveAbsoluteUrl(url) {
   try {
     const parsed = new URL(url, window.location.href);
@@ -753,11 +806,11 @@ async function copyText(text) {
   }
 }
 function SharePopup({ target, url, onClose }) {
-  const [absoluteUrl, setAbsoluteUrl] = useState3(url);
-  const [copyStatus, setCopyStatus] = useState3("idle");
-  const [canUseNativeShare, setCanUseNativeShare] = useState3(false);
-  const [shareError, setShareError] = useState3(null);
-  const [toastId, setToastId] = useState3(0);
+  const [absoluteUrl, setAbsoluteUrl] = useState4(url);
+  const [copyStatus, setCopyStatus] = useState4("idle");
+  const [canUseNativeShare, setCanUseNativeShare] = useState4(false);
+  const [shareError, setShareError] = useState4(null);
+  const [toastId, setToastId] = useState4(0);
   useEffect2(() => {
     setAbsoluteUrl(resolveAbsoluteUrl(url) ?? "");
     setCopyStatus("idle");
@@ -796,7 +849,7 @@ function SharePopup({ target, url, onClose }) {
     }
   };
   return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       BasePopup_default,
       {
         title: "Share",
@@ -812,64 +865,64 @@ function SharePopup({ target, url, onClose }) {
         closeButtonClassName: "!h-10 !w-10 !rounded-none !border-0 !bg-transparent !p-0 !text-[var(--color-text)] hover:!bg-transparent hover:!text-[var(--color-text)]",
         contentClassName: "!rounded-none !bg-transparent !px-6 !pb-6 !pt-2",
         children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsx11(SharePreviewCard, { target, url: absoluteUrl || url }),
+          /* @__PURE__ */ jsx12(SharePreviewCard, { target, url: absoluteUrl || url }),
           /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-3 gap-1 rounded-3xl bg-[var(--color-surface)] p-3 sm:grid-cols-4", children: [
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               ShareDestinationButton,
               {
                 label: "Copy Link",
-                icon: /* @__PURE__ */ jsx11(Link2, { "aria-hidden": "true", className: "h-6 w-6" }),
+                icon: /* @__PURE__ */ jsx12(Link2, { "aria-hidden": "true", className: "h-6 w-6" }),
                 onClick: () => void handleCopy(),
                 ariaLabel: "Copy link",
                 disabled: !absoluteUrl
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               ShareDestinationButton,
               {
                 label: "WhatsApp",
-                icon: /* @__PURE__ */ jsx11(FaWhatsapp, { "aria-hidden": "true", className: "h-9 w-9 text-[#25D366]" }),
+                icon: /* @__PURE__ */ jsx12(FaWhatsapp, { "aria-hidden": "true", className: "h-9 w-9 text-[#25D366]" }),
                 href: destinationUrls?.whatsapp,
                 ariaLabel: `Share ${target.name} via WhatsApp`,
                 disabled: !absoluteUrl
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               ShareDestinationButton,
               {
                 label: "Gmail",
-                icon: /* @__PURE__ */ jsx11(SiGmail, { "aria-hidden": "true", className: "h-8 w-8 text-[#EA4335]" }),
+                icon: /* @__PURE__ */ jsx12(SiGmail, { "aria-hidden": "true", className: "h-8 w-8 text-[#EA4335]" }),
                 href: destinationUrls?.gmail,
                 ariaLabel: `Email ${target.name} with Gmail`,
                 disabled: !absoluteUrl
               }
             ),
-            canUseNativeShare && /* @__PURE__ */ jsx11(
+            canUseNativeShare && /* @__PURE__ */ jsx12(
               ShareDestinationButton,
               {
                 label: "More",
-                icon: /* @__PURE__ */ jsx11(Share2, { "aria-hidden": "true", className: "h-6 w-6" }),
+                icon: /* @__PURE__ */ jsx12(Share2, { "aria-hidden": "true", className: "h-6 w-6" }),
                 onClick: () => void handleNativeShare(),
                 ariaLabel: "More sharing options",
                 disabled: !absoluteUrl
               }
             )
           ] }),
-          copyStatus === "failed" && /* @__PURE__ */ jsx11("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: "Could not copy the link." }),
-          shareError && /* @__PURE__ */ jsx11("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: shareError })
+          copyStatus === "failed" && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: "Could not copy the link." }),
+          shareError && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: shareError })
         ] })
       }
     ),
-    toastId > 0 && /* @__PURE__ */ jsx11(Toast, { message: "Link copied", onClose: dismissToast }, toastId)
+    toastId > 0 && /* @__PURE__ */ jsx12(Toast, { message: "Link copied", onClose: dismissToast }, toastId)
   ] });
 }
 
 // src/genre-tree/ShareActionButton.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function ShareActionButton({ target, url }) {
   const { showPopup, hidePopup } = usePopup3();
   const openSharePopup = () => {
-    showPopup(/* @__PURE__ */ jsx12(SharePopup, { target, url, onClose: hidePopup }));
+    showPopup(/* @__PURE__ */ jsx13(SharePopup, { target, url, onClose: hidePopup }));
   };
   return /* @__PURE__ */ jsxs9(
     "button",
@@ -880,7 +933,7 @@ function ShareActionButton({ target, url }) {
       "aria-label": `Share ${target.name}`,
       title: `Share ${target.name}`,
       children: [
-        /* @__PURE__ */ jsx12("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: /* @__PURE__ */ jsx12(Share22, { "aria-hidden": "true", className: "w-5 h-5" }) }),
+        /* @__PURE__ */ jsx13("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: /* @__PURE__ */ jsx13(Share22, { "aria-hidden": "true", className: "w-5 h-5" }) }),
         "Share"
       ]
     }
@@ -888,7 +941,7 @@ function ShareActionButton({ target, url }) {
 }
 
 // src/genre-tree/GenreActionBand.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function GenreActionBand({
   node,
   onPlayPause,
@@ -910,7 +963,7 @@ function GenreActionBand({
     items.push({
       key: "play-pause",
       label: isPlaying ? "Pause" : "Play",
-      icon: isPlaying ? /* @__PURE__ */ jsx13(Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ jsx13(Play, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: isPlaying ? /* @__PURE__ */ jsx14(Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ jsx14(Play, { "aria-hidden": "true", className: "w-5 h-5" }),
       onClick: onPlayPause
     });
   }
@@ -918,24 +971,24 @@ function GenreActionBand({
     items.push({
       key: "zoom-in",
       label: "Focus",
-      icon: /* @__PURE__ */ jsx13(ZoomIn, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: /* @__PURE__ */ jsx14(ZoomIn, { "aria-hidden": "true", className: "w-5 h-5" }),
       onClick: onZoomIn
     });
   }
   if (onAddChild) {
-    adminItems.push({ key: "add-child", label: "Add", icon: /* @__PURE__ */ jsx13(Plus, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onAddChild });
+    adminItems.push({ key: "add-child", label: "Add", icon: /* @__PURE__ */ jsx14(Plus, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onAddChild });
   }
   if (onRename) {
-    adminItems.push({ key: "rename", label: "Rename", icon: /* @__PURE__ */ jsx13(Pencil, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onRename });
+    adminItems.push({ key: "rename", label: "Rename", icon: /* @__PURE__ */ jsx14(Pencil, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onRename });
   }
   if (onChangeParent) {
-    adminItems.push({ key: "change-parent", label: "Parent", icon: /* @__PURE__ */ jsx13(MoveUpRight, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onChangeParent });
+    adminItems.push({ key: "change-parent", label: "Parent", icon: /* @__PURE__ */ jsx14(MoveUpRight, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onChangeParent });
   }
   if (onToggleSide) {
     adminItems.push({
       key: "toggle-side",
       label: side === "pop" ? "Make core" : "Make pop",
-      icon: /* @__PURE__ */ jsx13(ArrowLeftRight, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: /* @__PURE__ */ jsx14(ArrowLeftRight, { "aria-hidden": "true", className: "w-5 h-5" }),
       onClick: onToggleSide,
       disabled: !!toggleSideDisabledReason,
       title: toggleSideDisabledReason
@@ -960,7 +1013,7 @@ function GenreActionBand({
       onClick: item.onClick,
       className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none disabled:opacity-50",
       children: [
-        /* @__PURE__ */ jsx13("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)] group-disabled:group-hover:bg-[var(--color-surface-muted)]", children: item.icon }),
+        /* @__PURE__ */ jsx14("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)] group-disabled:group-hover:bg-[var(--color-surface-muted)]", children: item.icon }),
         item.label
       ]
     },
@@ -969,7 +1022,7 @@ function GenreActionBand({
   return /* @__PURE__ */ jsxs10("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: [
     (items.length > 0 || shareTarget && shareUrl) && /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
       renderItems(items),
-      shareTarget && shareUrl && /* @__PURE__ */ jsx13(ShareActionButton, { target: shareTarget, url: shareUrl })
+      shareTarget && shareUrl && /* @__PURE__ */ jsx14(ShareActionButton, { target: shareTarget, url: shareUrl })
     ] }),
     adminItems.length > 0 && /* @__PURE__ */ jsxs10(
       "section",
@@ -977,8 +1030,8 @@ function GenreActionBand({
         "aria-label": "Admin actions",
         className: `px-3.5 py-3 ${items.length > 0 ? "border-t border-[var(--color-border)]" : ""}`,
         children: [
-          /* @__PURE__ */ jsx13("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]", children: "Admin" }),
-          /* @__PURE__ */ jsx13("div", { className: "flex flex-wrap gap-1", children: renderItems(adminItems) })
+          /* @__PURE__ */ jsx14("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]", children: "Admin" }),
+          /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap gap-1", children: renderItems(adminItems) })
         ]
       }
     )
@@ -990,20 +1043,20 @@ import { PanelSection as PanelSection2, Skeleton as Skeleton2 } from "@behindthe
 import { useFetchGenreOverview } from "@behindthemusictree/app-kit/genre-tree";
 
 // src/genre-tree/ClampedText.tsx
-import { useLayoutEffect, useRef as useRef2, useState as useState4 } from "react";
-import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useLayoutEffect, useRef as useRef2, useState as useState5 } from "react";
+import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function ClampedText({ children, className: className2 = "" }) {
   const ref = useRef2(null);
-  const [expanded, setExpanded] = useState4(false);
-  const [overflows, setOverflows] = useState4(false);
+  const [expanded, setExpanded] = useState5(false);
+  const [overflows, setOverflows] = useState5(false);
   useLayoutEffect(() => {
     const element = ref.current;
     if (!element || expanded) return;
     setOverflows(element.scrollHeight > element.clientHeight);
   }, [children, expanded]);
   return /* @__PURE__ */ jsxs11(Fragment6, { children: [
-    /* @__PURE__ */ jsx14("p", { ref, className: `${className2} ${expanded ? "" : "line-clamp-3"}`, children }),
-    (overflows || expanded) && /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15("p", { ref, className: `${className2} ${expanded ? "" : "line-clamp-3"}`, children }),
+    (overflows || expanded) && /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
@@ -1017,7 +1070,7 @@ function ClampedText({ children, className: className2 = "" }) {
 }
 
 // src/genre-tree/GenrePlaylistTracks.tsx
-import { useEffect as useEffect3, useState as useState5 } from "react";
+import { useEffect as useEffect3, useState as useState6 } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { z } from "zod";
 import { FaPlay, FaPause } from "react-icons/fa";
@@ -1030,6 +1083,7 @@ import { usePlayer as usePlayer4 } from "@behindthemusictree/app-kit/player";
 import { PlayStates } from "@behindthemusictree/app-kit/player";
 import { usePopup as usePopup4 } from "@behindthemusictree/app-kit/popup";
 import { ErrorCode as ErrorCode3 } from "@behindthemusictree/app-kit/transport";
+import { genreMusicQueryParams } from "@behindthemusictree/app-kit/genre-tree";
 import { genrePlaylistQueryKeys } from "@behindthemusictree/app-kit/genre-tree";
 import { libraryEndpoints, libraryQueryKeys } from "@behindthemusictree/app-kit/genre-tree";
 import { isSong, songUnplayableReason, SongDetailedSchema } from "@behindthemusictree/app-kit/genre-tree";
@@ -1037,15 +1091,15 @@ import { useTrackList as useTrackList2 } from "@behindthemusictree/app-kit/genre
 
 // src/genre-tree/MusicBrainzRecordingLink.tsx
 import { musicBrainzRecordingUrl } from "@behindthemusictree/app-kit/genre-tree";
-import { Fragment as Fragment7, jsx as jsx15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx16 } from "react/jsx-runtime";
 function MusicBrainzRecordingLink({
   song,
   children,
   className: className2 = ""
 }) {
   const url = musicBrainzRecordingUrl(song);
-  if (!url) return /* @__PURE__ */ jsx15(Fragment7, { children });
-  return /* @__PURE__ */ jsx15(
+  if (!url) return /* @__PURE__ */ jsx16(Fragment7, { children });
+  return /* @__PURE__ */ jsx16(
     "a",
     {
       href: url,
@@ -1062,7 +1116,7 @@ function MusicBrainzRecordingLink({
 // src/genre-tree/GenrePlaylistTracks.tsx
 import { ArtistNames } from "@behindthemusictree/app-kit/genre-tree";
 import { capitalize, useTrackNoun } from "@behindthemusictree/app-kit/track-noun";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var CATALOGUE_PAGE_SIZE = 100;
 var SongPageSchema = PaginatedResponseSchema(SongDetailedSchema).extend({
   overallTotal: z.number().nullable(),
@@ -1082,6 +1136,7 @@ var nextCursor = (next) => {
 function GenrePlaylistTracks({
   genreUuid,
   genrePlaylist,
+  selection,
   scope,
   getBackendBaseUrl,
   renderArtistLink,
@@ -1091,7 +1146,7 @@ function GenrePlaylistTracks({
   renderTracksToolbar,
   artist = null
 }) {
-  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = useTrackList2();
+  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist, playNewTrackListFromGenreCatalogue } = useTrackList2();
   const { session, sessionRestored } = useSession();
   const { playerTrackObject, playState, handlePlayPauseAction } = usePlayer4();
   const { showPopup } = usePopup4();
@@ -1100,7 +1155,7 @@ function GenrePlaylistTracks({
   const { fetch } = useFetchWrapper(getBackendBaseUrl);
   const playback = usePlaybackContext();
   const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteQuery({
-    queryKey: [...scope === "me" ? genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), ...playback.key ? [playback.key] : []],
+    queryKey: [...scope === "me" ? genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), "artist", artist.uuid] : 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(
@@ -1108,7 +1163,7 @@ function GenrePlaylistTracks({
         true,
         false,
         {},
-        { genre: genreUuid, ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
+        { genre: genreUuid, ...genreMusicQueryParams(selection), ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
       );
       const parsed = parseWithLog(SongPageSchema, response, "GenrePlaylistTracks");
       return { tracks: parsed.results, total: parsed.overallTotal, nextPage: parsed.next ? nextCursor(parsed.next) : null };
@@ -1117,7 +1172,7 @@ function GenrePlaylistTracks({
     getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
     enabled: playback.ready && (scope !== "me" || sessionRestored && !!session?.accessToken)
   });
-  const [sentinel, setSentinel] = useState5(null);
+  const [sentinel, setSentinel] = useState6(null);
   useEffect3(() => {
     if (!hasNextPage || isFetchingNextPage || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
@@ -1132,30 +1187,35 @@ function GenrePlaylistTracks({
   const tracks = pages.flatMap((page) => page.tracks);
   const total = pages[0]?.total ?? void 0;
   const play = (startSongUuid) => {
-    const started = artist ? playNewTrackListFromArtist(artist, scope, { startSongUuid, ordering: "title", genreUuid }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
+    const started = artist ? playNewTrackListFromArtist(artist, scope, {
+      startSongUuid,
+      ordering: "title",
+      genreUuid,
+      ...selection && { selection }
+    }) : scope === "reference" ? playNewTrackListFromGenreCatalogue({ uuid: genreUuid, name: genrePlaylist.name }, scope, { startSongUuid, ...selection && { selection } }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
     started.catch((error) => {
       console.error("Failed to play genre playlist:", error);
-      showPopup(/* @__PURE__ */ jsx16(InternalErrorPopup, { errorCode: ErrorCode3.CLIENT_UNKNOWN }));
+      showPopup(/* @__PURE__ */ jsx17(InternalErrorPopup, { errorCode: ErrorCode3.CLIENT_UNKNOWN }));
     });
   };
-  return /* @__PURE__ */ jsx16(PanelSection, { title: `${capitalize(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ jsxs12("div", { children: [
+  return /* @__PURE__ */ jsx17(PanelSection, { title: `${capitalize(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ jsxs12("div", { children: [
     renderTracksToolbar?.(),
-    isPending ? /* @__PURE__ */ jsx16(Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ jsxs12("p", { role: "alert", children: [
+    isPending ? /* @__PURE__ */ jsx17(Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ jsxs12("p", { role: "alert", children: [
       "Couldn't load ",
       trackNoun.plural,
       ".",
       " ",
-      /* @__PURE__ */ jsx16("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
-    ] }) : tracks.length === 0 ? /* @__PURE__ */ jsx16("p", { children: "\u2014" }) : /* @__PURE__ */ jsxs12("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: [
+      /* @__PURE__ */ jsx17("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
+    ] }) : tracks.length === 0 ? /* @__PURE__ */ jsx17("p", { children: "\u2014" }) : /* @__PURE__ */ jsxs12("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.map((track, index) => {
         const label = track.artists?.length ? `${track.title} \u2014 ${track.artists.map((artist2) => artist2.name).join(", ")}` : track.title;
         const isCurrent = playerTrackObject?.track.id === track.uuid;
         const isPlaying = isCurrent && playState === PlayStates.PLAYING;
         const text = /* @__PURE__ */ jsxs12("span", { className: TEXT_CELL, children: [
-          /* @__PURE__ */ jsx16("span", { className: TITLE_CELL, children: renderSongLink ? renderSongLink(track) : isSong(track) ? /* @__PURE__ */ jsx16(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
-          track.artists?.length ? /* @__PURE__ */ jsx16("span", { className: SEPARATOR, children: " \u2014 " }) : null,
-          /* @__PURE__ */ jsx16("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ jsx16(ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
-          track.album && /* @__PURE__ */ jsx16("span", { className: ALBUM_CELL, children: track.album.name })
+          /* @__PURE__ */ jsx17("span", { className: TITLE_CELL, children: renderSongLink ? renderSongLink(track) : isSong(track) ? /* @__PURE__ */ jsx17(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
+          track.artists?.length ? /* @__PURE__ */ jsx17("span", { className: SEPARATOR, children: " \u2014 " }) : null,
+          /* @__PURE__ */ jsx17("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ jsx17(ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
+          track.album && /* @__PURE__ */ jsx17("span", { className: ALBUM_CELL, children: track.album.name })
         ] });
         const leading = renderSongLeading?.(track, index);
         const actions = renderSongActions?.(track);
@@ -1163,7 +1223,7 @@ function GenrePlaylistTracks({
         if (isUnplayable) {
           return /* @__PURE__ */ jsxs12("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", children: [
             leading,
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(
               "button",
               {
                 type: "button",
@@ -1171,7 +1231,7 @@ function GenrePlaylistTracks({
                 "aria-disabled": "true",
                 "aria-label": label,
                 className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full opacity-0 cursor-not-allowed",
-                children: /* @__PURE__ */ jsx16(FaPlay, { size: 10 })
+                children: /* @__PURE__ */ jsx17(FaPlay, { size: 10 })
               }
             ),
             text,
@@ -1184,14 +1244,14 @@ function GenrePlaylistTracks({
             className: `group flex min-h-8 items-center gap-1 rounded px-1 hover:bg-[var(--color-neutral-100)] ${isCurrent ? "font-medium text-[var(--color-primary)]" : ""}`,
             children: [
               leading,
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 "button",
                 {
                   type: "button",
                   "aria-label": `${isPlaying ? "Pause" : "Play"} ${label}`,
                   className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-full cursor-pointer group-hover:opacity-100 focus-visible:opacity-100 ${isCurrent && playState !== PlayStates.STOPPED ? "opacity-100" : "opacity-0 [@media(pointer:coarse)]:opacity-100"}`,
                   onClick: () => isCurrent ? handlePlayPauseAction() : play(track.uuid),
-                  children: isCurrent && playState === PlayStates.LOADING ? /* @__PURE__ */ jsx16(RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ jsx16(FaPause, { size: 10 }) : /* @__PURE__ */ jsx16(FaPlay, { size: 10 })
+                  children: isCurrent && playState === PlayStates.LOADING ? /* @__PURE__ */ jsx17(RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ jsx17(FaPause, { size: 10 }) : /* @__PURE__ */ jsx17(FaPlay, { size: 10 })
                 }
               ),
               text,
@@ -1201,7 +1261,7 @@ function GenrePlaylistTracks({
           track.uuid
         );
       }),
-      hasNextPage && /* @__PURE__ */ jsx16("li", { ref: setSentinel, "aria-hidden": "true", className: "h-4" })
+      hasNextPage && /* @__PURE__ */ jsx17("li", { ref: setSentinel, "aria-hidden": "true", className: "h-4" })
     ] })
   ] }) });
 }
@@ -1209,10 +1269,11 @@ function GenrePlaylistTracks({
 // src/genre-tree/GenreDetailExtras.tsx
 import { useTrackNoun as useTrackNoun2 } from "@behindthemusictree/app-kit/track-noun";
 import { SiWikidata, SiWikipedia } from "react-icons/si";
-import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function GenreDetailExtras({
   genreUuid,
   genrePlaylist,
+  selection,
   wikidataId,
   scope,
   getBackendBaseUrl,
@@ -1234,15 +1295,15 @@ function GenreDetailExtras({
   );
   if (isPending) {
     return /* @__PURE__ */ jsxs13(Fragment8, { children: [
-      /* @__PURE__ */ jsx17(PanelSection2, { title: "Summary", children: /* @__PURE__ */ jsx17("div", { "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: /* @__PURE__ */ jsx17(Skeleton2, { className: "h-4 w-3/4" }) }) }),
+      /* @__PURE__ */ jsx18(PanelSection2, { title: "Summary", children: /* @__PURE__ */ jsx18("div", { "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: /* @__PURE__ */ jsx18(Skeleton2, { className: "h-4 w-3/4" }) }) }),
       family
     ] });
   }
-  if (!overview) return /* @__PURE__ */ jsx17(Fragment8, { children: family });
+  if (!overview) return /* @__PURE__ */ jsx18(Fragment8, { children: family });
   const { summary, summarySourceUrl, essentialSongs } = overview;
   const wikidataUrl = wikidataId ? `https://www.wikidata.org/wiki/${encodeURIComponent(wikidataId)}` : null;
   return /* @__PURE__ */ jsxs13(Fragment8, { children: [
-    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ jsx17(PanelSection2, { title: "Links", children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--color-text)]", children: [
+    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ jsx18(PanelSection2, { title: "Links", children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--color-text)]", children: [
       summarySourceUrl && /* @__PURE__ */ jsxs13(
         "a",
         {
@@ -1251,7 +1312,7 @@ function GenreDetailExtras({
           rel: "noopener noreferrer",
           className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
           children: [
-            /* @__PURE__ */ jsx17(SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx18(SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
             "Wikipedia"
           ]
         }
@@ -1264,21 +1325,22 @@ function GenreDetailExtras({
           rel: "noopener noreferrer",
           className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
           children: [
-            /* @__PURE__ */ jsx17(SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx18(SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
             "Wikidata"
           ]
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx17(PanelSection2, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ jsx17(ClampedText, { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
+    /* @__PURE__ */ jsx18(PanelSection2, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ jsx18(ClampedText, { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
     family,
     renderGenreDetailExtras?.(overview),
-    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ jsx17(PanelSection2, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ jsx17("ul", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ jsx17("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ jsx17("p", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: "\u2014" }) }),
-    /* @__PURE__ */ jsx17(
+    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ jsx18(PanelSection2, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ jsx18("ul", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ jsx18("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ jsx18("p", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: "\u2014" }) }),
+    /* @__PURE__ */ jsx18(
       GenrePlaylistTracks,
       {
         genreUuid,
         genrePlaylist,
+        selection,
         scope,
         getBackendBaseUrl,
         renderArtistLink,
@@ -1290,7 +1352,7 @@ function GenreDetailExtras({
 }
 
 // src/genre-tree/GenreInfoPanelBody.tsx
-import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 import { createElement } from "react";
 function GenreNodeActionBand({ genrePlaylist, playback, ...bandProps }) {
   const { isPlaying, setIsPlaying } = usePlayer5();
@@ -1304,11 +1366,11 @@ function GenreNodeActionBand({ genrePlaylist, playback, ...bandProps }) {
       console.error("Failed to load genre playlist tracks:", error);
     });
   };
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     GenreActionBand,
     {
       ...bandProps,
-      onPlayPause: genrePlaylist.tracksCount > 0 ? handlePlayPause : void 0,
+      onPlayPause: ("genreOnlyTracksCount" in genrePlaylist ? genreMusicCount(genrePlaylist) : genrePlaylist.tracksCount) > 0 ? handlePlayPause : void 0,
       isPlaying: isCurrentTrackList && isPlaying
     }
   );
@@ -1318,6 +1380,7 @@ function GenreInfoPanelBody({
   family,
   genreUuid,
   genrePlaylist,
+  catalogue,
   wikidataId,
   scope,
   getBackendBaseUrl,
@@ -1325,9 +1388,30 @@ function GenreInfoPanelBody({
   band,
   extras
 }) {
+  const noun = useTrackNoun3();
+  const summary = scope === "reference" ? GenreCatalogueCountsSchema2.parse(genrePlaylist) : void 0;
+  const selection = summary ? defaultGenreMusicSelection2(summary) : void 0;
+  const describeCounts = (counts) => {
+    const scopes = counts.genreAndSubgenresTracksCount;
+    return "canonical" in scopes ? `${counts.genreOnlyTracksCount} this genre only \xB7 ${scopes.canonical} with canonical subgenres \xB7 ${scopes.regional} with regional subgenres \xB7 ${scopes.all} with all subgenres` : `${counts.genreOnlyTracksCount} this genre only \xB7 ${scopes.all} with subgenres`;
+  };
   return /* @__PURE__ */ jsxs14(Fragment9, { children: [
     toolbar,
-    /* @__PURE__ */ jsx18(GenreNodeActionBand, { ...band, genrePlaylist, playback }),
+    /* @__PURE__ */ jsx19(GenreNodeActionBand, { ...band, genrePlaylist, playback }),
+    summary && catalogue && /* @__PURE__ */ jsxs14("div", { className: "px-3.5 py-3 text-sm text-[var(--color-text)]", children: [
+      /* @__PURE__ */ jsxs14("p", { children: [
+        "Catalogue ",
+        noun.plural,
+        ": ",
+        describeCounts(catalogue)
+      ] }),
+      /* @__PURE__ */ jsxs14("p", { children: [
+        "Playlist ",
+        noun.plural,
+        ": ",
+        describeCounts(summary)
+      ] })
+    ] }),
     /* @__PURE__ */ createElement(
       GenreDetailExtras,
       {
@@ -1336,6 +1420,7 @@ function GenreInfoPanelBody({
         family,
         genreUuid,
         genrePlaylist,
+        selection,
         wikidataId,
         scope,
         getBackendBaseUrl
@@ -1350,7 +1435,7 @@ import {
   getReparentCandidates,
   useUpdateGenre
 } from "@behindthemusictree/app-kit/genre-tree";
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 function ChangeParentPopup({
   genrePlaylist,
   genrePlaylists,
@@ -1390,7 +1475,7 @@ function ChangeParentPopup({
       "Current parent: ",
       genrePlaylist.parent?.name ?? "none"
     ] }),
-    /* @__PURE__ */ jsx19("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ jsx20(
       GenreSearch,
       {
         genrePlaylists: candidates,
@@ -1398,7 +1483,7 @@ function ChangeParentPopup({
         placeholder: "Search a new parent\u2026"
       }
     ) }),
-    formErrors.length > 0 && /* @__PURE__ */ jsx19("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
+    formErrors.length > 0 && /* @__PURE__ */ jsx20("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
   ] });
 }
 
@@ -1422,7 +1507,7 @@ import {
   SiYoutube
 } from "react-icons/si";
 import { Chip } from "@behindthemusictree/ui";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var LINK_KINDS = {
   official: { label: "Official website", Icon: Globe },
   wikipedia: { label: "Wikipedia", Icon: SiWikipedia2 },
@@ -1459,7 +1544,7 @@ function artistLinks(artist) {
   return links;
 }
 function ArtistLinks({ links }) {
-  return /* @__PURE__ */ jsx20("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsx20(Chip, { href: url, icon: /* @__PURE__ */ jsx20(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
+  return /* @__PURE__ */ jsx21("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ jsx21("li", { children: /* @__PURE__ */ jsx21(Chip, { href: url, icon: /* @__PURE__ */ jsx21(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
 }
 
 // src/genre-tree/artist/formatYears.ts
@@ -1470,7 +1555,7 @@ function formatYears(beginYear, endYear, ended) {
 }
 
 // src/genre-tree/artist/ArtistHeader.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var countryNames = new Intl.DisplayNames(["en"], { type: "region" });
 function ArtistHeader({ artist }) {
   const fields = [];
@@ -1480,35 +1565,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__ */ jsx21(ArtistLinks, { links }) });
+  if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ jsx22(ArtistLinks, { links }) });
   if (fields.length === 0) return null;
-  return /* @__PURE__ */ jsx21(FieldList, { items: fields });
+  return /* @__PURE__ */ jsx22(FieldList, { items: fields });
 }
 
 // src/genre-tree/artist/ArtistPhoto.tsx
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function ExternalLink({ href, children }) {
-  return /* @__PURE__ */ jsx22("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
+  return /* @__PURE__ */ jsx23("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
 }
 function ArtistPhoto({ image, name }) {
   return /* @__PURE__ */ jsxs16("figure", { className: "flex flex-col gap-1.5 px-6 py-2.5", children: [
-    /* @__PURE__ */ jsx22("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
+    /* @__PURE__ */ jsx23("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
     /* @__PURE__ */ jsxs16("figcaption", { className: "text-xs text-[var(--color-text-muted)]", children: [
       "Photo: ",
-      /* @__PURE__ */ jsx22(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
+      /* @__PURE__ */ jsx23(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
       ",",
       " ",
-      image.licenseUrl ? /* @__PURE__ */ jsx22(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
+      image.licenseUrl ? /* @__PURE__ */ jsx23(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
     ] })
   ] });
 }
 
 // src/genre-tree/artist/ArtistMembers.tsx
 import { PanelGroup, PanelSection as PanelSection3 } from "@behindthemusictree/ui";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function MembershipList({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
-  return /* @__PURE__ */ jsx23(PanelGroup, { title, children: /* @__PURE__ */ jsx23("ul", { children: memberships.map((membership, index) => {
+  return /* @__PURE__ */ jsx24(PanelGroup, { title, children: /* @__PURE__ */ jsx24("ul", { children: memberships.map((membership, index) => {
     const details = [
       formatYears(membership.beginYear, membership.endYear, membership.ended),
       ...membership.roles
@@ -1517,7 +1602,7 @@ function MembershipList({ title, memberships, renderArtistLink }) {
     return (
       // A member can have several periods in the same group.
       /* @__PURE__ */ jsxs17("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
-        /* @__PURE__ */ jsx23("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
+        /* @__PURE__ */ jsx24("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
         detailsText && /* @__PURE__ */ jsxs17("span", { className: "text-[var(--color-text-muted)]", children: [
           " \u2014 ",
           detailsText
@@ -1530,8 +1615,8 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
   const isCurrent = (membership) => !membership.ended && membership.endYear === null;
   return /* @__PURE__ */ jsxs17(PanelSection3, { title, children: [
-    /* @__PURE__ */ jsx23(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
+    /* @__PURE__ */ jsx24(
       MembershipList,
       {
         title: "Past",
@@ -1544,7 +1629,7 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
 
 // src/genre-tree/artist/ArtistDiscography.tsx
 import { PanelGroup as PanelGroup2, PanelSection as PanelSection4 } from "@behindthemusictree/ui";
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var GROUPS = ["Albums", "EPs", "Singles", "Live", "Compilations", "Other"];
 var PRIMARY_GROUPS = { album: "Albums", ep: "EPs", single: "Singles" };
 function discographyGroup({ primaryType, secondaryTypes }) {
@@ -1564,18 +1649,18 @@ function byYear(a, b) {
 function ArtistDiscography({ albums }) {
   if (albums.length === 0) return null;
   const sorted = [...albums].sort(byYear);
-  return /* @__PURE__ */ jsx24(PanelSection4, { title: "Discography", children: GROUPS.map((group) => {
+  return /* @__PURE__ */ jsx25(PanelSection4, { title: "Discography", children: GROUPS.map((group) => {
     const groupAlbums = sorted.filter((album) => discographyGroup(album) === group);
     if (groupAlbums.length === 0) return null;
-    return /* @__PURE__ */ jsx24(PanelGroup2, { title: group, children: /* @__PURE__ */ jsx24("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ jsxs18("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
-      /* @__PURE__ */ jsx24("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
-      /* @__PURE__ */ jsx24("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
+    return /* @__PURE__ */ jsx25(PanelGroup2, { title: group, children: /* @__PURE__ */ jsx25("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ jsxs18("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
+      /* @__PURE__ */ jsx25("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
+      /* @__PURE__ */ jsx25("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
     ] }, album.uuid)) }) }, group);
   }) });
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { keepPreviousData } from "@tanstack/react-query";
 import { Play as Play2 } from "lucide-react";
 import { Pagination, PanelSection as PanelSection5, Skeleton as Skeleton3 } from "@behindthemusictree/ui";
@@ -1596,7 +1681,7 @@ import { useTrackList as useTrackList3 } from "@behindthemusictree/app-kit/genre
 import { FaPlay as FaPlay2, FaPause as FaPause2 } from "react-icons/fa";
 import { usePlayer as usePlayer6 } from "@behindthemusictree/app-kit/player";
 import { PlayStates as PlayStates2 } from "@behindthemusictree/app-kit/player";
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 function TrackPositionPlayPause({
   position,
   uuid,
@@ -1617,7 +1702,7 @@ function TrackPositionPlayPause({
       style: { minWidth: "4rem", maxWidth: "4rem" },
       onClick: handlePlayPauseClick,
       children: [
-        /* @__PURE__ */ jsx25("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ jsx25("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsx26("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ jsx26("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ jsxs19(
           "span",
           {
             className: "track-position-play-pause__bars",
@@ -1625,18 +1710,18 @@ function TrackPositionPlayPause({
             role: "img",
             "aria-label": isPlaying ? "Playing" : "Paused",
             children: [
-              /* @__PURE__ */ jsx25("span", { className: "track-position-play-pause__bar" }),
-              /* @__PURE__ */ jsx25("span", { className: "track-position-play-pause__bar" }),
-              /* @__PURE__ */ jsx25("span", { className: "track-position-play-pause__bar" })
+              /* @__PURE__ */ jsx26("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ jsx26("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ jsx26("span", { className: "track-position-play-pause__bar" })
             ]
           }
         ) : position }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           "div",
           {
             className: `hidden group-hover:flex items-center justify-center ${isCurrentTrackActive ? "" : "absolute inset-0"}`,
             "aria-hidden": "true",
-            children: isAwaitingPlayback ? /* @__PURE__ */ jsx25("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ jsx25(FaPause2, {}) : /* @__PURE__ */ jsx25(FaPlay2, {})
+            children: isAwaitingPlayback ? /* @__PURE__ */ jsx26("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ jsx26(FaPause2, {}) : /* @__PURE__ */ jsx26(FaPlay2, {})
           }
         )
       ]
@@ -1647,7 +1732,7 @@ function TrackPositionPlayPause({
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
 import { isSong as isSong2, songUnplayableReason as songUnplayableReason2 } from "@behindthemusictree/app-kit/genre-tree";
 import { ArtistNames as ArtistNames2 } from "@behindthemusictree/app-kit/genre-tree";
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 function TrackItem({
   track,
   position,
@@ -1676,7 +1761,7 @@ function TrackItem({
     {
       className: `track-item flex h-14 text-[var(--color-text)] ${isUnplayable ? "opacity-50" : "hover:bg-[var(--color-surface-muted)] group"}`,
       children: [
-        isUnplayable ? /* @__PURE__ */ jsx26(
+        isUnplayable ? /* @__PURE__ */ jsx27(
           "div",
           {
             className: "flex items-center justify-center text-lg w-16",
@@ -1684,7 +1769,7 @@ function TrackItem({
             "aria-disabled": "true",
             children: position
           }
-        ) : /* @__PURE__ */ jsx26(
+        ) : /* @__PURE__ */ jsx27(
           TrackPositionPlayPause,
           {
             position,
@@ -1694,11 +1779,11 @@ function TrackItem({
           }
         ),
         /* @__PURE__ */ jsxs20("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx26("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ jsx26("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : isSong2(track) ? /* @__PURE__ */ jsx26(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }) }),
-          track.artists && track.artists.length > 0 ? /* @__PURE__ */ jsx26("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsx26(ArtistNames2, { artists: track.artists, renderArtistLink }) }) : ""
+          /* @__PURE__ */ jsx27("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ jsx27("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : isSong2(track) ? /* @__PURE__ */ jsx27(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }) }),
+          track.artists && track.artists.length > 0 ? /* @__PURE__ */ jsx27("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsx27(ArtistNames2, { artists: track.artists, renderArtistLink }) }) : ""
         ] }),
-        /* @__PURE__ */ jsx26("div", { className: "genre-name-container flex items-center justify-start w-[21.6%] min-w-0 shrink-0", children: track.genre ? /* @__PURE__ */ jsx26("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-xs font-bold", children: track.genre.name }) : "" }),
-        renderDuration && /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27("div", { className: "genre-name-container flex items-center justify-start w-[21.6%] min-w-0 shrink-0", children: track.genre ? /* @__PURE__ */ jsx27("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-xs font-bold", children: track.genre.name }) : "" }),
+        renderDuration && /* @__PURE__ */ jsx27(
           "div",
           {
             className: "duration flex text-base w-16 items-center justify-center",
@@ -1706,22 +1791,22 @@ function TrackItem({
             children: renderDuration(track)
           }
         ),
-        renderActions && /* @__PURE__ */ jsx26("div", { className: "edit flex text-base w-6 items-center justify-center mr-2 cursor-pointer", children: renderActions(track) })
+        renderActions && /* @__PURE__ */ jsx27("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
-import { Fragment as Fragment10, jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 var SongPageSchema2 = PaginatedResponseSchema2(SongDetailedSchema2);
 var SORTS = [
   { ordering: "title", label: "Title" },
   { ordering: "-albumYear", label: "Year" }
 ];
 function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLink }) {
-  const [page, setPage] = useState6(1);
-  const [ordering, setOrdering] = useState6("title");
+  const [page, setPage] = useState7(1);
+  const [ordering, setOrdering] = useState7("title");
   const { fetch } = useFetchWrapper2(getBackendBaseUrl);
   const { playNewTrackListFromArtist } = useTrackList4();
   const { playerTrackObject } = usePlayer8();
@@ -1746,7 +1831,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
     event.stopPropagation();
     void play(song.uuid);
   };
-  return /* @__PURE__ */ jsx27(PanelSection5, { title: "Songs", children: isPending ? /* @__PURE__ */ jsx27(Skeleton3, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ jsx27("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ jsx27("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ jsxs21(Fragment10, { children: [
+  return /* @__PURE__ */ jsx28(PanelSection5, { title: "Songs", children: isPending ? /* @__PURE__ */ jsx28(Skeleton3, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ jsx28("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ jsx28("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ jsxs21(Fragment10, { children: [
     /* @__PURE__ */ jsxs21("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
       /* @__PURE__ */ jsxs21(
         "button",
@@ -1755,12 +1840,12 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
           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__ */ jsx27(Play2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx28(Play2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
             "Play all"
           ]
         }
       ),
-      /* @__PURE__ */ jsx27("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx28("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ jsx28(
         "button",
         {
           type: "button",
@@ -1775,7 +1860,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         sort.ordering
       )) })
     ] }),
-    /* @__PURE__ */ jsx27("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ jsx27("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ jsx28("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ jsx28(
       TrackItem,
       {
         track: song,
@@ -1784,12 +1869,12 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         renderSongLink
       }
     ) }, song.uuid)) }),
-    /* @__PURE__ */ jsx27(Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
+    /* @__PURE__ */ jsx28(Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
   ] }) });
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-import { Fragment as Fragment11, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 function useArtistPanel({
   uuid,
   scope,
@@ -1811,25 +1896,25 @@ function useArtistPanel({
         ...panel,
         title: "Artist",
         content: /* @__PURE__ */ jsxs22("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
-          /* @__PURE__ */ jsx28(Skeleton4, { className: "h-3 w-16" }),
-          /* @__PURE__ */ jsx28(Skeleton4, { className: "h-4 w-32" }),
-          /* @__PURE__ */ jsx28(Skeleton4, { className: "h-3 w-16" }),
-          /* @__PURE__ */ jsx28(Skeleton4, { className: "h-4 w-24" }),
-          /* @__PURE__ */ jsx28(Skeleton4, { className: "h-16 mt-2.5" }),
-          /* @__PURE__ */ jsx28(Skeleton4, { className: "h-16" })
+          /* @__PURE__ */ jsx29(Skeleton4, { className: "h-3 w-16" }),
+          /* @__PURE__ */ jsx29(Skeleton4, { className: "h-4 w-32" }),
+          /* @__PURE__ */ jsx29(Skeleton4, { className: "h-3 w-16" }),
+          /* @__PURE__ */ jsx29(Skeleton4, { className: "h-4 w-24" }),
+          /* @__PURE__ */ jsx29(Skeleton4, { className: "h-16 mt-2.5" }),
+          /* @__PURE__ */ jsx29(Skeleton4, { className: "h-16" })
         ] })
       };
     case "not-found":
       return {
         ...panel,
         title: "Artist not found",
-        content: /* @__PURE__ */ jsx28("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This artist does not exist." })
+        content: /* @__PURE__ */ jsx29("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__ */ jsx28("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
+        content: /* @__PURE__ */ jsx29("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
       };
     case "success": {
       const { artist } = result;
@@ -1839,12 +1924,12 @@ function useArtistPanel({
         ...panel,
         title: artist.name,
         content: /* @__PURE__ */ jsxs22(Fragment11, { children: [
-          shareUrl && /* @__PURE__ */ jsx28("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsx28("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: shareTarget && /* @__PURE__ */ jsx28(ShareActionButton, { target: shareTarget, url: shareUrl }) }) }),
-          artist.image && /* @__PURE__ */ jsx28(ArtistPhoto, { image: artist.image, name: artist.name }),
-          /* @__PURE__ */ jsx28(ArtistHeader, { artist }),
-          /* @__PURE__ */ jsx28(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
-          /* @__PURE__ */ jsx28(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
-          artist.tracksCount > 0 && /* @__PURE__ */ jsx28(
+          shareUrl && /* @__PURE__ */ jsx29("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsx29("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: shareTarget && /* @__PURE__ */ jsx29(ShareActionButton, { target: shareTarget, url: shareUrl }) }) }),
+          artist.image && /* @__PURE__ */ jsx29(ArtistPhoto, { image: artist.image, name: artist.name }),
+          /* @__PURE__ */ jsx29(ArtistHeader, { artist }),
+          /* @__PURE__ */ jsx29(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
+          /* @__PURE__ */ jsx29(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
+          artist.tracksCount > 0 && /* @__PURE__ */ jsx29(
             ArtistSongs,
             {
               artist: { uuid: artist.uuid, name: artist.name },
@@ -1854,7 +1939,7 @@ function useArtistPanel({
             }
           )
         ] }),
-        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ jsx28(ArtistDiscography, { albums: artist.albums }) : void 0
+        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ jsx29(ArtistDiscography, { albums: artist.albums }) : void 0
       };
     }
   }
@@ -1867,7 +1952,7 @@ import {
 } from "@behindthemusictree/app-kit/genre-tree";
 
 // src/genre-tree/song/SongPanelContent.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { Pause as Pause2, Play as Play3 } from "lucide-react";
 import { FieldList as FieldList2, PanelSection as PanelSection6, Skeleton as Skeleton5 } from "@behindthemusictree/ui";
 import { PlayStates as PlayStates3, usePlayer as usePlayer9 } from "@behindthemusictree/app-kit/player";
@@ -1878,19 +1963,19 @@ import {
   useSongHistory,
   useTrackList as useTrackList5
 } from "@behindthemusictree/app-kit/genre-tree";
-import { Fragment as Fragment12, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs23 } from "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] = useState7(false);
+  const [open, setOpen] = useState8(false);
   const history = useSongHistory(uuid, getBackendBaseUrl, open);
   let body = null;
-  if (history.status === "loading") body = /* @__PURE__ */ jsx29(Skeleton5, { className: "h-10", "aria-busy": "true" });
-  else if (history.status === "error") body = /* @__PURE__ */ jsx29("p", { className: "text-red-600", children: "Could not load the history." });
+  if (history.status === "loading") body = /* @__PURE__ */ jsx30(Skeleton5, { className: "h-10", "aria-busy": "true" });
+  else if (history.status === "error") body = /* @__PURE__ */ jsx30("p", { className: "text-red-600", children: "Could not load the history." });
   else if (history.status === "success")
-    body = history.entries.length === 0 ? /* @__PURE__ */ jsx29("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ jsx29("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ jsxs23("li", { className: "py-1.5 text-sm", children: [
-      /* @__PURE__ */ jsx29("span", { className: "font-medium", children: entry.action }),
+    body = history.entries.length === 0 ? /* @__PURE__ */ jsx30("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ jsx30("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ jsxs23("li", { className: "py-1.5 text-sm", children: [
+      /* @__PURE__ */ jsx30("span", { className: "font-medium", children: entry.action }),
       entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ jsxs23("span", { className: "text-[var(--color-text-muted)]", children: [
         " ",
         "\u2014 ",
@@ -1910,8 +1995,8 @@ function SongHistory({ uuid, getBackendBaseUrl }) {
       onToggle: (event) => setOpen(event.currentTarget.open),
       className: "px-6 pb-2.5 mt-2.5 border-t border-[var(--color-border)]",
       children: [
-        /* @__PURE__ */ jsx29("summary", { className: "mt-2.5 cursor-pointer text-[0.6875rem] font-semibold uppercase text-[var(--color-text-muted)]", children: "History" }),
-        /* @__PURE__ */ jsx29("div", { className: "mt-1.5", children: body })
+        /* @__PURE__ */ jsx30("summary", { className: "mt-2.5 cursor-pointer text-[0.6875rem] font-semibold uppercase text-[var(--color-text-muted)]", children: "History" }),
+        /* @__PURE__ */ jsx30("div", { className: "mt-1.5", children: body })
       ]
     }
   );
@@ -1937,13 +2022,13 @@ function SongPanelContent({
     const path = genrePath.length > 0 ? genrePath : null;
     fields.push({
       label: "Genre",
-      value: path ? /* @__PURE__ */ jsx29("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ jsxs23("span", { children: [
-        index > 0 && /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", children: "\u203A " }),
-        /* @__PURE__ */ jsx29("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
+      value: path ? /* @__PURE__ */ jsx30("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ jsxs23("span", { children: [
+        index > 0 && /* @__PURE__ */ jsx30("span", { "aria-hidden": "true", children: "\u203A " }),
+        /* @__PURE__ */ jsx30("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
       ] }, genrePlaylist.uuid)) }) : song.genre.name
     });
   } else {
-    fields.push({ label: "Genre", value: /* @__PURE__ */ jsx29("span", { className: "text-[var(--color-text-muted)]", children: "No genre" }) });
+    fields.push({ label: "Genre", value: /* @__PURE__ */ jsx30("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;
@@ -1953,11 +2038,11 @@ function SongPanelContent({
   const links = [];
   if (musicBrainzUrl)
     links.push(
-      /* @__PURE__ */ jsx29("a", { href: musicBrainzUrl, target: "_blank", rel: "noopener noreferrer", className: externalLink, children: "MusicBrainz" }, "mb")
+      /* @__PURE__ */ jsx30("a", { href: musicBrainzUrl, target: "_blank", rel: "noopener noreferrer", className: externalLink, children: "MusicBrainz" }, "mb")
     );
   if (song.youtubeVideo)
     links.push(
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(
         "a",
         {
           href: `https://www.youtube.com/watch?v=${encodeURIComponent(song.youtubeVideo.id)}`,
@@ -1972,33 +2057,33 @@ function SongPanelContent({
   if (links.length > 0)
     fields.push({
       label: "Links",
-      value: /* @__PURE__ */ jsx29("span", { className: "flex gap-3", children: links })
+      value: /* @__PURE__ */ jsx30("span", { className: "flex gap-3", children: links })
     });
   return /* @__PURE__ */ jsxs23(Fragment12, { children: [
-    /* @__PURE__ */ jsx29("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
-      unplayableReason ? /* @__PURE__ */ jsx29("p", { className: "flex items-center px-2.5 text-sm text-[var(--color-text-muted)]", children: unplayableReason }) : /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsx30("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
+      unplayableReason ? /* @__PURE__ */ jsx30("p", { className: "flex items-center px-2.5 text-sm text-[var(--color-text-muted)]", children: unplayableReason }) : /* @__PURE__ */ jsxs23(
         "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__ */ jsx29("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__ */ jsx29(Pause2, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ jsx29(Play3, { "aria-hidden": "true", className: "w-5 h-5" }) }),
+            /* @__PURE__ */ jsx30("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__ */ jsx30(Pause2, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ jsx30(Play3, { "aria-hidden": "true", className: "w-5 h-5" }) }),
             isPlaying ? "Pause" : "Play"
           ]
         }
       ),
-      shareUrl && /* @__PURE__ */ jsx29(ShareActionButton, { target: shareTarget, url: shareUrl })
+      shareUrl && /* @__PURE__ */ jsx30(ShareActionButton, { target: shareTarget, url: shareUrl })
     ] }) }),
-    song.artists && song.artists.length > 0 && /* @__PURE__ */ jsx29("p", { className: "px-6 pt-2.5 text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsx29(ArtistNames3, { artists: song.artists, renderArtistLink }) }),
-    /* @__PURE__ */ jsx29(FieldList2, { items: fields }),
-    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ jsx29(PanelSection6, { title: "Essential in", children: /* @__PURE__ */ jsx29("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ jsx29("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
-    /* @__PURE__ */ jsx29(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
+    song.artists && song.artists.length > 0 && /* @__PURE__ */ jsx30("p", { className: "px-6 pt-2.5 text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsx30(ArtistNames3, { artists: song.artists, renderArtistLink }) }),
+    /* @__PURE__ */ jsx30(FieldList2, { items: fields }),
+    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ jsx30(PanelSection6, { title: "Essential in", children: /* @__PURE__ */ jsx30("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ jsx30("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
+    /* @__PURE__ */ jsx30(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
   ] });
 }
 
 // src/genre-tree/song/useSongPanel.tsx
-import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 function useSongPanel({
   uuid,
   scope,
@@ -2021,23 +2106,23 @@ function useSongPanel({
         ...panel,
         title: "Song",
         content: /* @__PURE__ */ jsxs24("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
-          /* @__PURE__ */ jsx30(Skeleton6, { className: "h-3 w-16" }),
-          /* @__PURE__ */ jsx30(Skeleton6, { className: "h-4 w-32" }),
-          /* @__PURE__ */ jsx30(Skeleton6, { className: "h-3 w-16" }),
-          /* @__PURE__ */ jsx30(Skeleton6, { className: "h-4 w-24" })
+          /* @__PURE__ */ jsx31(Skeleton6, { className: "h-3 w-16" }),
+          /* @__PURE__ */ jsx31(Skeleton6, { className: "h-4 w-32" }),
+          /* @__PURE__ */ jsx31(Skeleton6, { className: "h-3 w-16" }),
+          /* @__PURE__ */ jsx31(Skeleton6, { className: "h-4 w-24" })
         ] })
       };
     case "not-found":
       return {
         ...panel,
         title: "Song not found",
-        content: /* @__PURE__ */ jsx30("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This song does not exist." })
+        content: /* @__PURE__ */ jsx31("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__ */ jsx30("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this song." })
+        content: /* @__PURE__ */ jsx31("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this song." })
       };
     case "success": {
       const { song } = result;
@@ -2045,7 +2130,7 @@ function useSongPanel({
       return {
         ...panel,
         title: song.title,
-        content: /* @__PURE__ */ jsx30(
+        content: /* @__PURE__ */ jsx31(
           SongPanelContent,
           {
             song,
@@ -2065,12 +2150,12 @@ function useSongPanel({
 // src/genre-tree/SizeMetricToggle.tsx
 import { MdMusicNote, MdVisibility } from "react-icons/md";
 import { SegmentedControl } from "@behindthemusictree/ui";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function SizeMetricToggle({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     SegmentedControl,
     {
       variant: "floating",
@@ -2078,15 +2163,15 @@ function SizeMetricToggle({
       value,
       onChange,
       options: [
-        { value: "songs", label: /* @__PURE__ */ jsx31(MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
-        { value: "views", label: /* @__PURE__ */ jsx31(MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
+        { value: "songs", label: /* @__PURE__ */ jsx32(MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
+        { value: "views", label: /* @__PURE__ */ jsx32(MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
       ]
     }
   );
 }
 
 // src/genre-tree/GenreTreeView.tsx
-import { Fragment as Fragment13, jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx33, jsxs as jsxs25 } from "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 = () => {
@@ -2121,6 +2206,7 @@ function GenreTreeView({
   onArtistExpandedChange,
   getShareUrl,
   extraSearchGroups = [],
+  SearchGroups,
   onSearchQueryChange,
   onSearchFocus,
   artistSearch = true,
@@ -2149,19 +2235,19 @@ function GenreTreeView({
 }) {
   const getShareUrlRef = useRef3(getShareUrl);
   getShareUrlRef.current = getShareUrl;
-  const [internalArtistUuid, setInternalArtistUuid] = useState8(null);
+  const [internalArtistUuid, setInternalArtistUuid] = useState9(null);
   const isArtistControlled = controlledArtistUuid !== void 0;
   const artistUuid = isArtistControlled ? controlledArtistUuid : internalArtistUuid;
-  const [internalSongUuid, setInternalSongUuid] = useState8(null);
+  const [internalSongUuid, setInternalSongUuid] = useState9(null);
   const isSongControlled = controlledSongUuid !== void 0;
   const songUuid = isSongControlled ? controlledSongUuid : internalSongUuid;
   const changeSong = (uuid) => {
     if (!isSongControlled) setInternalSongUuid(uuid);
     onSongUuidChange?.(uuid);
   };
-  const [internalSizeMetric, setInternalSizeMetric] = useState8("songs");
+  const [internalSizeMetric, setInternalSizeMetric] = useState9("songs");
   const sizeMetric = controlledSizeMetric ?? internalSizeMetric;
-  const deferredSizeMetric = useDeferredValue(sizeMetric);
+  const deferredSizeMetric = useDeferredValue2(sizeMetric);
   const changeSizeMetric = (metric) => {
     if (controlledSizeMetric === void 0) setInternalSizeMetric(metric);
     onSizeMetricChange?.(metric);
@@ -2198,7 +2284,7 @@ function GenreTreeView({
     artistUuid
   });
   const restoreRevision = viewportRestore?.revision;
-  const [stackedRestoreOwner, setStackedRestoreOwner] = useState8({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
+  const [stackedRestoreOwner, setStackedRestoreOwner] = useState9({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
   let restoreRootUuid = stackedRestoreOwner.rootUuid;
   if (stackedRestoreOwner.revision !== restoreRevision) {
     restoreRootUuid = selectedGenrePlaylist?.root.uuid;
@@ -2232,11 +2318,11 @@ function GenreTreeView({
   const openSongRef = useRef3(openSong);
   openSongRef.current = openSong;
   const resolvedRenderSongLink = useCallback6(
-    (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ jsx32("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
+    (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ jsx33("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
     [renderSongLink]
   );
-  const [expandedSongUuid, setExpandedSongUuid] = useState8(null);
-  const [expandedArtistUuid, setExpandedArtistUuid] = useState8(null);
+  const [expandedSongUuid, setExpandedSongUuid] = useState9(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = useState9(null);
   const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
   const songBaseUrl = getBackendBaseUrl;
   const artistPanel = useArtistPanel({
@@ -2244,7 +2330,7 @@ function GenreTreeView({
     scope,
     getBackendBaseUrl: artistBaseUrl,
     getShareUrl: getShareUrlRef.current,
-    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx32("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx33("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);
@@ -2253,7 +2339,7 @@ function GenreTreeView({
     renderSongLink: resolvedRenderSongLink,
     onClose: () => changeArtist(null)
   });
-  const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx32("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
+  const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx33("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);
@@ -2285,8 +2371,8 @@ function GenreTreeView({
   const builtInSongPanel = overlayPanel || hasSelectedGenreNode ? void 0 : songPanel;
   const builtInArtistPanel = overlayPanel || hasSelectedGenreNode || builtInSongPanel ? void 0 : artistPanel;
   const builtInPanel = builtInSongPanel ?? builtInArtistPanel;
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState8(false);
-  const [uncontrolledExpanded, setUncontrolledExpanded] = useState8(false);
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState9(false);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState9(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
   const isExpanded = expanded ?? uncontrolledExpanded;
   const changeCollapsed = (next) => {
@@ -2300,10 +2386,10 @@ function GenreTreeView({
   useEffect5(() => {
     setUncontrolledCollapsed(false);
   }, [selectedNodeId, artistUuid, songUuid]);
-  const [isWheelRevealed, setIsWheelRevealed] = useState8(false);
+  const [isWheelRevealed, setIsWheelRevealed] = useState9(false);
   const usesHandoff = viewMode === "wheel" || viewMode === "pop-core";
   const isTreeReady = !isLoading && (!usesHandoff || isWheelRevealed);
-  const [resolveStyle, setResolveStyle] = useState8(null);
+  const [resolveStyle, setResolveStyle] = useState9(null);
   const handleNodeStyleResolverChange = useCallback6(
     (resolver) => setResolveStyle(() => resolver),
     []
@@ -2318,7 +2404,7 @@ function GenreTreeView({
     !overlayPanel && hasSelectedGenreNode ? selectedNodeId : null,
     resolveStyle
   );
-  const [selectionHistory, setSelectionHistory] = useState8({
+  const [selectionHistory, setSelectionHistory] = useState9({
     current: selectedNodeId,
     previous: null
   });
@@ -2331,28 +2417,6 @@ function GenreTreeView({
   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 { showPopup, hidePopup } = usePopup5();
-  const [searchText, setSearchText] = useState8("");
-  const artistGroup = useArtistSearchGroup(
-    artistBaseUrl,
-    searchText,
-    (artist) => {
-      openArtist(artist.uuid);
-      onArtistSelect?.(artist);
-    },
-    Boolean(artistSearch)
-  );
-  const songGroup = useSongSearchGroup(
-    songBaseUrl,
-    searchText,
-    (song) => {
-      openSong(song.uuid);
-      onSongSelect?.(song);
-    },
-    Boolean(songSearch)
-  );
-  const extraGroups = [...extraSearchGroups, artistGroup, songGroup].filter(
-    (group) => group !== void 0
-  );
   const handleSelectedNodeChange = (node) => {
     if (node !== null && songUuid !== null) changeSong(null);
     selectNode(node);
@@ -2376,7 +2440,7 @@ function GenreTreeView({
   };
   const renderGenreBody = (relation) => {
     const { node } = relation;
-    const family = /* @__PURE__ */ jsx32(
+    const family = /* @__PURE__ */ jsx33(
       GenreNodeFamily,
       {
         node,
@@ -2387,7 +2451,7 @@ function GenreTreeView({
         onSelectNode: selectGenreFromPanel
       }
     );
-    const ancestors = /* @__PURE__ */ jsx32(GenreNodeAncestors, { ancestorNodes: relation.ancestorNodes, onSelectNode: selectGenreFromPanel });
+    const ancestors = /* @__PURE__ */ jsx33(GenreNodeAncestors, { ancestorNodes: relation.ancestorNodes, onSelectNode: selectGenreFromPanel });
     const genrePlaylist = genrePlaylistByNodeId.get(node.id);
     const criteria = genrePlaylist?.criteria;
     if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ jsxs25(Fragment13, { children: [
@@ -2411,7 +2475,7 @@ function GenreTreeView({
     ) : void 0;
     return {
       primary: /* @__PURE__ */ jsxs25(Fragment13, { children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           GenreInfoPanelBody,
           {
             family: /* @__PURE__ */ jsxs25(Fragment13, { children: [
@@ -2420,6 +2484,7 @@ function GenreTreeView({
             ] }),
             genreUuid,
             genrePlaylist,
+            catalogue: genrePlaylist.catalogue,
             wikidataId: criteria.wikidataId,
             scope,
             getBackendBaseUrl,
@@ -2432,7 +2497,7 @@ function GenreTreeView({
               onAddChild: readOnly ? void 0 : () => handleGenreCreationAction(criteria),
               onRename: readOnly ? void 0 : () => handleGenreRenameAction(criteria),
               onChangeParent: readOnly ? void 0 : () => showPopup(
-                /* @__PURE__ */ jsx32(
+                /* @__PURE__ */ jsx33(
                   ChangeParentPopup,
                   {
                     genrePlaylist: { ...genrePlaylist, criteria },
@@ -2507,19 +2572,19 @@ function GenreTreeView({
     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__ */ jsx32(
+  const expandButton = placement === "default" && activePanel?.onExpandedChange ? /* @__PURE__ */ jsx33(
     IconButton,
     {
       "aria-label": activePanel.expanded ? "Shrink panel" : "Extend panel",
       style: activePanel.headerAccent && { color: "inherit" },
       onClick: () => activePanel.onExpandedChange?.(!activePanel.expanded),
-      children: activePanel.expanded ? /* @__PURE__ */ jsx32(Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx32(Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
+      children: activePanel.expanded ? /* @__PURE__ */ jsx33(Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx33(Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
     }
   ) : null;
   const renderArtistFilter = () => {
     if (isLoading || !filterArtist) return null;
     return /* @__PURE__ */ jsxs25("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         "button",
         {
           type: "button",
@@ -2531,7 +2596,7 @@ function GenreTreeView({
           children: filterArtist.name
         }
       ),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         "button",
         {
           type: "button",
@@ -2544,25 +2609,35 @@ function GenreTreeView({
     ] });
   };
   const actions = /* @__PURE__ */ jsxs25(Fragment13, { children: [
-    !isLoading && /* @__PURE__ */ jsx32(
-      GenreSearch,
+    !isLoading && /* @__PURE__ */ jsx33(
+      GenreTreeSearch,
       {
+        artistBaseUrl,
+        songBaseUrl,
+        artistSearch: Boolean(artistSearch),
+        songSearch: Boolean(songSearch),
+        onArtistSelect: (artist) => {
+          openArtist(artist.uuid);
+          onArtistSelect?.(artist);
+        },
+        onSongSelect: (song) => {
+          openSong(song.uuid);
+          onSongSelect?.(song);
+        },
+        SearchGroups,
         genrePlaylists: visibleGenrePlaylists,
         onSelect: handleGenreSearchSelect,
         selectedName: selectedGenrePlaylist?.name ?? (typeof builtInPanel?.title === "string" ? builtInPanel.title : null),
         onClear: builtInSongPanel ? () => changeSong(null) : builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
         onPrevious: handlePrevious,
-        onQueryChange: (text) => {
-          setSearchText(text);
-          onSearchQueryChange?.(text);
-        },
+        onQueryChange: onSearchQueryChange,
         onFocus: onSearchFocus,
-        extraGroups
+        extraGroups: extraSearchGroups
       }
     ),
-    !isLoading && filterArtist && /* @__PURE__ */ jsx32("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
+    !isLoading && filterArtist && /* @__PURE__ */ jsx33("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
     /* @__PURE__ */ jsxs25("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__ */ jsx32(
+      !isLoading && !isControlled && /* @__PURE__ */ jsx33(
         SegmentedControl2,
         {
           "aria-label": "Tree view mode",
@@ -2576,13 +2651,13 @@ function GenreTreeView({
           ]
         }
       ),
-      !isLoading && showDisplayOptions && /* @__PURE__ */ jsx32(
+      !isLoading && showDisplayOptions && /* @__PURE__ */ jsx33(
         "div",
         {
           className: "flex items-center gap-1",
           role: "group",
           "aria-label": "Tree display options",
-          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ jsx32(
+          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ jsx33(
             Button,
             {
               variant: allowWheelRotation ? "default" : "outline",
@@ -2593,7 +2668,7 @@ function GenreTreeView({
           )
         }
       ),
-      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ jsx32(
+      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ jsx33(
         IconTextButton,
         {
           icon: Plus2,
@@ -2609,28 +2684,28 @@ function GenreTreeView({
       "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__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           "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__ */ jsx32(
+        !isLoading && filterArtist && /* @__PURE__ */ jsx33(
           "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__ */ jsx32("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ jsxs25("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
-          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ jsx32("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
-          isLoading ? /* @__PURE__ */ jsx32(GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
+        /* @__PURE__ */ jsx33("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ jsxs25("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
+          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ jsx33("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
+          isLoading ? /* @__PURE__ */ jsx33(GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
             // The info panel's top edge aligns with the tree's; the search bar floats `--layout-panel-inset` below it,
             // and the header inset (the bar's height plus that inset) extends the header's fill behind the bar,
             // Google Maps style; the 8px bottom padding mirrors the inset above the bar, and the hidden title's height is zeroed.
             // The panel's own Zoom in button is hidden: the search bar carries it.
-            /* @__PURE__ */ jsx32("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ jsx32(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx32(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx32(
+            /* @__PURE__ */ jsx33("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ jsx33(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx33(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx33(
               GenrePlaylistTreeWheel,
               {
                 scope,
@@ -2649,7 +2724,7 @@ function GenreTreeView({
                 busy,
                 floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ jsx32(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ jsx33(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
                 viewportRestore,
@@ -2658,7 +2733,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__ */ jsx32("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ jsx32(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx32(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx32(
+            /* @__PURE__ */ jsx33("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ jsx33(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx33(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx33(
               GenrePlaylistTreeWheelRadialPopCore,
               {
                 scope,
@@ -2677,7 +2752,7 @@ function GenreTreeView({
                 busy,
                 floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ jsx32(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ jsx33(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
                 viewportRestore,
@@ -2685,7 +2760,7 @@ function GenreTreeView({
                 ...focus
               }
             ) }) })
-          ) : viewMode === "outline" ? /* @__PURE__ */ jsx32("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative", children: /* @__PURE__ */ jsx32(
+          ) : viewMode === "outline" ? /* @__PURE__ */ jsx33("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative", children: /* @__PURE__ */ jsx33(
             GenrePlaylistTreeWheelRadialPopCore,
             {
               outline: true,
@@ -2701,13 +2776,13 @@ function GenreTreeView({
               selectedNodeId,
               readOnly
             }
-          ) }) : /* @__PURE__ */ jsx32("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__ */ jsx33("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__ */ jsx32(
+              return /* @__PURE__ */ jsx33(
                 "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__ */ jsx32("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ jsx32(
+                  children: /* @__PURE__ */ jsx33("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ jsx33(
                     GenrePlaylistTreePerRoot,
                     {
                       scope,
@@ -2733,7 +2808,7 @@ function GenreTreeView({
               );
             }
           ) }),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             DetailPanel,
             {
               ref: panelRef,
@@ -2775,9 +2850,11 @@ import {
 import { DetailPanel as DetailPanel2, IconButton as IconButton2, Skeleton as Skeleton7 } from "@behindthemusictree/ui";
 import { Maximize2 as Maximize22, Minimize2 as Minimize22 } from "lucide-react";
 import {
-  useFetchGenreDetail
+  useFetchGenreDetail,
+  genreMusicCount as genreMusicCount2,
+  GenrePlaylistSummarySchema
 } from "@behindthemusictree/app-kit/genre-tree";
-import { Fragment as Fragment14, jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 var RELATIVE_ITEM_COUNT = 1;
 function toNode(genre, parentId) {
   return {
@@ -2820,7 +2897,7 @@ function GenreDetailPanel({
         id: detail.uuid,
         parentId: detail.parent?.uuid ?? null,
         name: detail.name,
-        itemCount: detail.tracksCount,
+        itemCount: scope === "reference" ? genreMusicCount2(GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist)) : detail.tracksCount,
         wikidataId: detail.wikidataId
       },
       fill: rootColor,
@@ -2830,19 +2907,19 @@ function GenreDetailPanel({
         ({ ascendant }, index) => relative(ascendant, index === 0 ? null : ancestors2[index - 1].ascendant.uuid)
       )
     };
-  }, [detail]);
+  }, [detail, scope]);
   if (isError) {
-    return /* @__PURE__ */ jsx33("div", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." });
+    return /* @__PURE__ */ jsx34("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__ */ jsxs26("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
-      /* @__PURE__ */ jsx33(Skeleton7, { className: "h-6 w-2/3" }),
-      /* @__PURE__ */ jsx33(Skeleton7, { className: "h-4 w-full" }),
-      /* @__PURE__ */ jsx33(Skeleton7, { className: "h-4 w-3/4" })
+      /* @__PURE__ */ jsx34(Skeleton7, { className: "h-6 w-2/3" }),
+      /* @__PURE__ */ jsx34(Skeleton7, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx34(Skeleton7, { className: "h-4 w-3/4" })
     ] });
   }
   const selectGenre = (nodeId) => onSelectGenre(nodeId);
-  const family = /* @__PURE__ */ jsx33(
+  const family = /* @__PURE__ */ jsx34(
     GenreNodeFamily2,
     {
       node: view.node,
@@ -2853,20 +2930,20 @@ function GenreDetailPanel({
       onSelectNode: selectGenre
     }
   );
-  const ancestors = /* @__PURE__ */ jsx33(GenreNodeAncestors2, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
+  const ancestors = /* @__PURE__ */ jsx34(GenreNodeAncestors2, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
   return /* @__PURE__ */ jsxs26(
     DetailPanel2,
     {
       side: "left",
       title: view.node.name,
       headerAccent: { background: view.fill, color: ACCENT_TEXT_COLOR },
-      headerActions: onExpandedChange ? /* @__PURE__ */ jsx33(
+      headerActions: onExpandedChange ? /* @__PURE__ */ jsx34(
         IconButton2,
         {
           "aria-label": expanded ? "Shrink panel" : "Extend panel",
           style: { color: "inherit" },
           onClick: () => onExpandedChange(!expanded),
-          children: expanded ? /* @__PURE__ */ jsx33(Minimize22, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx33(Maximize22, { "aria-hidden": "true", className: "h-4 w-4" })
+          children: expanded ? /* @__PURE__ */ jsx34(Minimize22, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx34(Maximize22, { "aria-hidden": "true", className: "h-4 w-4" })
         }
       ) : void 0,
       onClose,
@@ -2875,7 +2952,7 @@ function GenreDetailPanel({
       onExpandedChange,
       edgeTab,
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           GenreInfoPanelBody,
           {
             family: /* @__PURE__ */ jsxs26(Fragment14, { children: [
@@ -2883,7 +2960,8 @@ function GenreDetailPanel({
               ancestors
             ] }),
             genreUuid: detail.uuid,
-            genrePlaylist: { ...detail.criteriaPlaylist, tracksCount: detail.tracksCount },
+            genrePlaylist: scope === "reference" ? GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist) : { ...detail.criteriaPlaylist, tracksCount: detail.tracksCount },
+            catalogue: detail.catalogue,
             wikidataId: detail.wikidataId,
             scope,
             getBackendBaseUrl,
@@ -2911,8 +2989,8 @@ import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useRef as
 import { ListMusic } from "lucide-react";
 import { useTrackList as useTrackList6 } from "@behindthemusictree/app-kit/genre-tree";
 import { TrackListOriginType as TrackListOriginType2 } from "@behindthemusictree/app-kit/genre-tree";
-import { useTrackNoun as useTrackNoun3 } from "@behindthemusictree/app-kit/track-noun";
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { useTrackNoun as useTrackNoun4 } from "@behindthemusictree/app-kit/track-noun";
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 var useBrowserLayoutEffect = typeof window === "undefined" ? useEffect6 : useLayoutEffect2;
 function TrackListSidebar({
   className: className2 = "",
@@ -2926,7 +3004,7 @@ function TrackListSidebar({
   renderSongLink
 }) {
   const { trackList, loadMore, autoAdvanceScrollRequest } = useTrackList6();
-  const trackNoun = useTrackNoun3();
+  const trackNoun = useTrackNoun4();
   const trackListRef = useRef4(null);
   const previousOriginRef = useRef4(trackList?.origin ?? null);
   const handledAutoAdvanceRequestIdRef = useRef4(null);
@@ -3024,15 +3102,15 @@ function TrackListSidebar({
         /* @__PURE__ */ jsxs27("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
           /* @__PURE__ */ jsxs27("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
             /* @__PURE__ */ jsxs27("div", { className: "origin flex text-xl", children: [
-              /* @__PURE__ */ jsx34("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
-              /* @__PURE__ */ jsx34("div", { className: "name-container flex flex-col justify-center items-center text-[var(--color-text)] font-bold pr-2 max-w-[27.5rem]", children: /* @__PURE__ */ jsx34("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
+              /* @__PURE__ */ jsx35("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
+              /* @__PURE__ */ jsx35("div", { className: "name-container flex flex-col justify-center items-center text-[var(--color-text)] font-bold pr-2 max-w-[27.5rem]", children: /* @__PURE__ */ jsx35("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
             ] }),
             /* @__PURE__ */ jsxs27("div", { className: "info flex items-center text-sm text-[var(--color-text-muted)]", children: [
               trackList.origin.type === TrackListOriginType2.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === TrackListOriginType2.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
               `${trackList.total} ${trackList.total > 1 ? trackNoun.plural : trackNoun.singular}`
             ] })
           ] }),
-          (isCollapsed && onExpand || !isCollapsed && onMinimize) && /* @__PURE__ */ jsx34(
+          (isCollapsed && onExpand || !isCollapsed && onMinimize) && /* @__PURE__ */ jsx35(
             "button",
             {
               type: "button",
@@ -3041,7 +3119,7 @@ function TrackListSidebar({
               "aria-expanded": !isCollapsed,
               className: `ml-2 flex h-8 w-8 shrink-0 items-center justify-center rounded-md hover:bg-[var(--color-surface-muted)] ${isCollapsed ? "text-[var(--color-text-muted)]" : "text-white"}`,
               onClick: isCollapsed ? onExpand : onMinimize,
-              children: /* @__PURE__ */ jsx34(ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
+              children: /* @__PURE__ */ jsx35(ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
             }
           )
         ] }),
@@ -3055,7 +3133,7 @@ function TrackListSidebar({
             onPointerDown: markUserScrollIntent,
             className: layout === "inline" ? "track-list flex-1 min-h-0 overflow-auto list-none p-0 m-0" : "track-list flex-1 min-h-0 overflow-auto list-none p-0 m-0",
             children: [
-              trackList.tracks.map((track, index) => /* @__PURE__ */ jsx34("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ jsx34(
+              trackList.tracks.map((track, index) => /* @__PURE__ */ jsx35("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ jsx35(
                 TrackItem,
                 {
                   track,
@@ -3066,7 +3144,7 @@ function TrackListSidebar({
                   renderSongLink
                 }
               ) }, track.uuid)),
-              hasMore && /* @__PURE__ */ jsx34("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
+              hasMore && /* @__PURE__ */ jsx35("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
             ]
           }
         )
@@ -3076,7 +3154,7 @@ function TrackListSidebar({
 }
 
 // src/genre-tree/PlayerPanel.tsx
-import { useEffect as useEffect7, useState as useState9 } from "react";
+import { useEffect as useEffect7, useState as useState10 } from "react";
 import { twMerge } from "tailwind-merge";
 import {
   usePlayer as usePlayer11,
@@ -3091,7 +3169,7 @@ import { PanelEdgeTab } from "@behindthemusictree/ui";
 import { Pause as Pause3, Play as Play4, SkipBack, SkipForward, Volume2, VolumeX } from "lucide-react";
 import { formatTime, useTrackList as useTrackList7 } from "@behindthemusictree/app-kit/genre-tree";
 import { PlayStates as PlayStates4, useCurrentTime, usePlayer as usePlayer10 } from "@behindthemusictree/app-kit/player";
-import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 function PlayerControls() {
   const {
     duration,
@@ -3117,8 +3195,8 @@ function PlayerControls() {
       className: "player-controls flex shrink-0 flex-col gap-2 border-b border-zinc-800 px-3 py-2 text-zinc-200",
       children: [
         /* @__PURE__ */ jsxs28("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
-          /* @__PURE__ */ jsx35("span", { "aria-label": "Elapsed time", children: formatTime(safeCurrentTime) }),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36("span", { "aria-label": "Elapsed time", children: formatTime(safeCurrentTime) }),
+          /* @__PURE__ */ jsx36(
             "input",
             {
               "aria-label": "Seek",
@@ -3132,11 +3210,11 @@ function PlayerControls() {
               onChange: (event) => seekTo(Number(event.currentTarget.value))
             }
           ),
-          /* @__PURE__ */ jsx35("span", { "aria-label": "Duration", children: formatTime(safeDuration) })
+          /* @__PURE__ */ jsx36("span", { "aria-label": "Duration", children: formatTime(safeDuration) })
         ] }),
         /* @__PURE__ */ jsxs28("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
           /* @__PURE__ */ jsxs28("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
-            /* @__PURE__ */ jsx35(
+            /* @__PURE__ */ jsx36(
               "button",
               {
                 type: "button",
@@ -3145,10 +3223,10 @@ function PlayerControls() {
                 disabled: !isReady || !hasPreviousTrack,
                 onClick: playPreviousTrack,
                 className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-zinc-300 hover:bg-zinc-800 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
-                children: /* @__PURE__ */ jsx35(SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx36(SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             ),
-            /* @__PURE__ */ jsx35(
+            /* @__PURE__ */ jsx36(
               "button",
               {
                 type: "button",
@@ -3157,10 +3235,10 @@ function PlayerControls() {
                 disabled: !isReady,
                 onClick: handlePlayPauseAction,
                 className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white text-zinc-950 hover:bg-zinc-200 disabled:cursor-not-allowed disabled:opacity-40",
-                children: isPlaying ? /* @__PURE__ */ jsx35(Pause3, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ jsx35(Play4, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
+                children: isPlaying ? /* @__PURE__ */ jsx36(Pause3, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ jsx36(Play4, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
               }
             ),
-            /* @__PURE__ */ jsx35(
+            /* @__PURE__ */ jsx36(
               "button",
               {
                 type: "button",
@@ -3169,14 +3247,14 @@ function PlayerControls() {
                 disabled: !isReady || !hasNextTrack,
                 onClick: playNextTrack,
                 className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-zinc-300 hover:bg-zinc-800 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
-                children: /* @__PURE__ */ jsx35(SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx36(SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             )
           ] }),
           /* @__PURE__ */ jsxs28("label", { className: "col-start-3 flex w-[4.2rem] shrink-0 items-center gap-[0.35rem] justify-self-end text-zinc-400 sm:w-[4.9rem]", children: [
-            volume === 0 ? /* @__PURE__ */ jsx35(VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ jsx35(Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
-            /* @__PURE__ */ jsx35("span", { className: "sr-only", children: "Volume" }),
-            /* @__PURE__ */ jsx35(
+            volume === 0 ? /* @__PURE__ */ jsx36(VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ jsx36(Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
+            /* @__PURE__ */ jsx36("span", { className: "sr-only", children: "Volume" }),
+            /* @__PURE__ */ jsx36(
               "input",
               {
                 "aria-label": "Volume",
@@ -3198,7 +3276,7 @@ function PlayerControls() {
 }
 
 // src/genre-tree/PlayerPanel.tsx
-import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
 var PANEL_ID = "player-panel";
 var DEFAULT_EXTENDED_WIDTH = "calc(100vw - var(--layout-center-left) - var(--layout-gutter))";
 function PlayerPanel({
@@ -3212,12 +3290,12 @@ function PlayerPanel({
 }) {
   const { playerTrackObject, retryPlayback } = usePlayer11();
   const { toggleTrackListSidebar, isTrackListSidebarVisible } = useTrackListSidebarVisibility();
-  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = useState9("");
+  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = useState10("");
   const loadedTrackTitle = playerTrackObject?.track.title;
   useEffect7(() => {
     if (loadedTrackTitle) setLastLoadedTrackTitle(loadedTrackTitle);
   }, [loadedTrackTitle]);
-  const [uncontrolledExtended, setUncontrolledExtended] = useState9(false);
+  const [uncontrolledExtended, setUncontrolledExtended] = useState10(false);
   const isExtendRequested = expanded ?? uncontrolledExtended;
   const setIsExtendRequested = (next) => {
     setUncontrolledExtended(next);
@@ -3251,7 +3329,7 @@ function PlayerPanel({
       ),
       style: isExtended ? { width: extendedWidth } : void 0,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           PanelEdgeTab,
           {
             side: "right",
@@ -3270,19 +3348,19 @@ function PlayerPanel({
             ),
             children: [
               /* @__PURE__ */ jsxs29("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
-                /* @__PURE__ */ jsx36("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ jsx36("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
+                /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ jsx37("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
                 /* @__PURE__ */ jsxs29("div", { className: "relative w-full shrink-0", children: [
-                  /* @__PURE__ */ jsx36(PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
+                  /* @__PURE__ */ jsx37(PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
                   playerTrackObject?.loadError && /* @__PURE__ */ jsxs29("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
                     playerTrackObject.loadError,
-                    /* @__PURE__ */ jsx36("button", { type: "button", className: "ml-2 underline", onClick: () => {
+                    /* @__PURE__ */ jsx37("button", { type: "button", className: "ml-2 underline", onClick: () => {
                       void retryPlayback();
                     }, children: "Retry" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx36(PlayerControls, {})
+                /* @__PURE__ */ jsx37(PlayerControls, {})
               ] }),
-              /* @__PURE__ */ jsx36(
+              /* @__PURE__ */ jsx37(
                 TrackListSidebar,
                 {
                   layout: "inline",
@@ -3309,11 +3387,11 @@ function PlayerPanel({
 import { v4 as uuidv4 } from "uuid";
 import { AiFillStar, AiOutlineStar } from "react-icons/ai";
 import { FORM_RATING_NULL_VALUE } from "@behindthemusictree/app-kit/genre-tree";
-import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 function Rating({ rating, handleChange }) {
   const instanceId = uuidv4();
-  return /* @__PURE__ */ jsx37("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsxs30("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
-    /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsxs30("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
+    /* @__PURE__ */ jsx38(
       "input",
       {
         id: `star-${instanceId}-${i}`,
@@ -3325,16 +3403,16 @@ function Rating({ rating, handleChange }) {
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ jsx37("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ jsxs30("div", { className: "flex", children: [
-      /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ jsxs30("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx38(
         AiOutlineStar,
         {
           className: `w-7 h-7 absolute top-0 left-0 ${rating === FORM_RATING_NULL_VALUE ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
         }
       ),
-      /* @__PURE__ */ jsx37("span", { className: "flex-grow w-8" }),
+      /* @__PURE__ */ jsx38("span", { className: "flex-grow w-8" }),
       " "
-    ] }) : /* @__PURE__ */ jsx37(
+    ] }) : /* @__PURE__ */ jsx38(
       AiFillStar,
       {
         className: `w-7 h-7 absolute top-0 left-0 ${(rating ?? -1) >= i ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
@@ -3367,4 +3445,4 @@ export {
   GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
   GenreTreeOutlineSkeleton
 };
-//# sourceMappingURL=chunk-QMELESFB.js.map
+//# sourceMappingURL=chunk-JP7PID7L.js.map