@behindthemusictree/app-kit-ui 33.1.0 → 33.3.0

package/dist/index.cjs

@@ -40,13 +40,19 @@ __export(src_exports, {
   PopupButtons: () => PopupButtons,
   PopupTitle: () => PopupTitle,
   Rating: () => Rating,
+  SEARCH_FAILED_STATUS: () => SEARCH_FAILED_STATUS,
+  SearchBox: () => SearchBox,
   SpotifyAuthErrorPopup: () => SpotifyAuthErrorPopup,
   Toast: () => Toast,
   TrackItem: () => TrackItem,
   TrackListSidebar: () => TrackListSidebar,
   TrackPositionPlayPause: () => TrackPositionPlayPause,
   TrackUploadPopup: () => TrackUploadPopup,
-  useGenrePlaylistPlayback: () => useGenrePlaylistPlayback
+  searchStatus: () => searchStatus,
+  useArtistSearchGroup: () => useArtistSearchGroup,
+  useGenrePlaylistPlayback: () => useGenrePlaylistPlayback,
+  useGenreRemoteSearchGroup: () => useGenreRemoteSearchGroup,
+  useSongSearchGroup: () => useSongSearchGroup
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -585,10 +591,9 @@ var import_react16 = require("react");
 var import_react_query3 = require("@tanstack/react-query");
 var import_lucide_react15 = require("lucide-react");
 var import_lucide_react16 = require("lucide-react");
-var import_ui18 = require("@behindthemusictree/ui");
+var import_ui19 = require("@behindthemusictree/ui");
 var import_genre_tree_view4 = require("@behindthemusictree/genre-tree-view");
-var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree19 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
 var import_popup6 = require("@behindthemusictree/app-kit/popup");
 
 // src/genre-tree/playlist-tree/size-metric.ts
@@ -1020,11 +1025,143 @@ function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
 }
 
 // src/genre-tree/GenreSearch.tsx
-var import_react8 = require("react");
 var import_lucide_react7 = require("lucide-react");
+var import_ui7 = require("@behindthemusictree/ui");
+var import_genre_tree5 = require("@behindthemusictree/app-kit/genre-tree");
+
+// src/genre-tree/search/SearchBox.tsx
+var import_react8 = require("react");
 var import_ui6 = require("@behindthemusictree/ui");
-var import_genre_tree2 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime16 = require("react/jsx-runtime");
+function SearchBox({
+  label,
+  placeholder,
+  value,
+  onValueChange,
+  groups,
+  onPicked,
+  onClear,
+  leading,
+  className: className2,
+  onFocus
+}) {
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const loading = groups.some((group) => group.loading);
+  const status = groups.map((group) => group.status).filter(Boolean).join(". ");
+  const handlePick = (groupKey, itemKey) => {
+    setOpen(false);
+    groups.find((group) => group.key === groupKey)?.items.find((item) => item.key === itemKey)?.onSelect();
+    onPicked?.(groupKey, itemKey);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: className2, onFocusCapture: onFocus, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_ui6.SearchCombobox,
+    {
+      ariaLabel: label,
+      listLabel: `${label} results`,
+      value,
+      placeholder: placeholder ?? `${label}\u2026`,
+      groups: groups.map((group) => ({
+        key: group.key,
+        label: group.label,
+        options: group.items.map((item) => ({ key: item.key, content: item.content }))
+      })),
+      open,
+      onOpenChange: setOpen,
+      onValueChange,
+      onPick: handlePick,
+      status,
+      loading,
+      onClear,
+      leading,
+      inputClassName: "focus-visible:ring-0"
+    }
+  ) });
+}
+
+// src/genre-tree/search/SearchGroup.ts
+var SEARCH_FAILED_STATUS = "Search failed";
+var searchStatus = (state, count, noun) => state.isError ? SEARCH_FAILED_STATUS : state.settled && count === 0 ? `No ${noun} found` : "";
+
+// src/genre-tree/search/useArtistSearchGroup.tsx
+var import_genre_tree2 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function useArtistSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
+  const search = (0, import_genre_tree2.useArtistSearch)(getBaseUrl, enabled ? text : "");
+  if (!enabled) return void 0;
+  return {
+    key: "artists",
+    label: "Artists",
+    items: search.artists.map((artist) => ({
+      key: artist.uuid,
+      content: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "block truncate font-medium", children: [
+          artist.name,
+          artist.disambiguation && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
+            " \xB7 ",
+            artist.disambiguation
+          ] })
+        ] }),
+        artist.matchedAlias && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
+          "also known as ",
+          artist.matchedAlias
+        ] })
+      ] }),
+      onSelect: () => onSelect(artist)
+    })),
+    status: searchStatus(search, search.artists.length, "artists"),
+    loading: search.pending
+  };
+}
+
+// src/genre-tree/search/useSongSearchGroup.tsx
+var import_genre_tree3 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function useSongSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
+  const search = (0, import_genre_tree3.useSongSearch)(getBaseUrl, enabled ? text : "");
+  if (!enabled) return void 0;
+  return {
+    key: "songs",
+    label: "Songs",
+    items: search.songs.map((song) => ({
+      key: song.uuid,
+      content: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: (0, import_genre_tree3.isSongSearchResultPlayable)(song) ? void 0 : "opacity-60", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "block truncate font-medium", children: song.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [song.artists.map((artist) => artist.name).join(", "), song.genre?.name ?? "No genre"].filter(Boolean).join(" \xB7 ") })
+      ] }),
+      onSelect: () => onSelect(song)
+    })),
+    status: searchStatus(search, search.songs.length, "songs"),
+    loading: search.pending
+  };
+}
+
+// src/genre-tree/search/useGenreRemoteSearchGroup.tsx
+var import_genre_tree4 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function useGenreRemoteSearchGroup(getBaseUrl, text, onSelect, { key = "genres", label = "Genres", filter, describe, ...options } = {}) {
+  const search = (0, import_genre_tree4.useGenreRemoteSearch)(getBaseUrl, text, options);
+  const genres = filter ? search.genres.filter(filter) : search.genres;
+  return {
+    key,
+    label,
+    items: genres.map((genre) => ({
+      key: genre.uuid,
+      content: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "block truncate font-medium", children: [
+          genre.name,
+          genre.isUmbrella && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ml-2 text-xs font-normal italic text-[var(--color-text-muted)]", children: "umbrella" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: describe?.(genre) ?? `${genre.treeName} \xB7 ${genre.root.name}` })
+      ] }),
+      onSelect: () => onSelect(genre)
+    })),
+    status: searchStatus(search, genres.length, "genres"),
+    loading: search.pending
+  };
+}
+
+// src/genre-tree/GenreSearch.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function GenreSearch({
   genrePlaylists,
   onSelect,
@@ -1033,120 +1170,58 @@ function GenreSearch({
   onPrevious,
   placeholder,
   onQueryChange,
-  extraGroups = []
+  extraGroups = [],
+  onFocus
 }) {
-  const { query, setQuery, results, canClear, clear, select } = (0, import_genre_tree2.useGenreSearch)({
+  const { query, setQuery, results, canClear, clear, select } = (0, import_genre_tree5.useGenreSearch)({
     genrePlaylists,
     onSelect,
     selectedName,
     onClear
   });
-  const [open, setOpen] = (0, import_react8.useState)(false);
   const active = query !== "" && query !== selectedName;
   const hasExtras = extraGroups.length > 0;
   const label = hasExtras ? "Search" : "Search a genre";
-  const loading = active && extraGroups.some((group) => group.loading);
-  const status = active ? extraGroups.map((group) => group.status).filter(Boolean).join(". ") : "";
   const groups = [
     {
       key: "genres",
       label: hasExtras ? "Genres" : void 0,
-      options: results.map((genrePlaylist) => ({
+      items: results.map((genrePlaylist) => ({
         key: genrePlaylist.uuid,
-        content: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        content: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
           genrePlaylist.name,
-          genrePlaylist.isUmbrella && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ml-2 text-xs italic text-[var(--color-text-muted)]", children: "umbrella" })
-        ] })
+          genrePlaylist.isUmbrella && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ml-2 text-xs italic text-[var(--color-text-muted)]", children: "umbrella" })
+        ] }),
+        onSelect: () => select(genrePlaylist)
       }))
     },
-    ...extraGroups.map((group) => ({
-      key: group.key,
-      label: group.label,
-      options: active ? group.items.map((item) => ({ key: item.key, content: item.content })) : []
-    }))
+    ...extraGroups.map(
+      (group) => active ? group : { ...group, items: [], status: "", loading: false }
+    )
   ];
-  const handlePick = (groupKey, optionKey) => {
-    setOpen(false);
-    if (groupKey === "genres") {
-      const genrePlaylist = results.find((result) => result.uuid === optionKey);
-      if (!genrePlaylist) return;
-      select(genrePlaylist);
-      onQueryChange?.("");
-      return;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "genre-search w-[calc(var(--layout-detail-panel-w,25.5rem)-2*var(--layout-panel-inset,1rem))] shrink-0 max-md:w-full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    SearchBox,
+    {
+      label,
+      placeholder,
+      value: query,
+      onValueChange: (value) => {
+        setQuery(value);
+        onQueryChange?.(value);
+      },
+      groups,
+      onPicked: (groupKey) => {
+        if (groupKey !== "genres") setQuery("");
+        onQueryChange?.("");
+      },
+      onClear: canClear ? () => {
+        clear();
+        onQueryChange?.("");
+      } : void 0,
+      leading: onPrevious && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", "aria-label": "Previous", title: "Previous", className: import_ui7.SEARCH_LEADING_BUTTON_CLASS, onClick: onPrevious, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.ArrowLeft, { "aria-hidden": "true", className: "h-4 w-4" }) }),
+      onFocus
     }
-    const item = extraGroups.find((group) => group.key === groupKey)?.items.find((entry) => entry.key === optionKey);
-    if (!item) return;
-    setQuery("");
-    onQueryChange?.("");
-    item.onSelect();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "genre-search relative w-[calc(var(--layout-detail-panel-w,25.5rem)-2*var(--layout-panel-inset,1rem))] shrink-0 max-md:w-full", children: [
-    onPrevious && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Previous",
-        title: "Previous",
-        className: "genre-search-previous absolute left-2 top-1/2 z-10 flex items-center justify-center p-1.5 [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] [@media(pointer:coarse)]:min-w-[var(--layout-touch-target)] text-[var(--color-text-muted)] rounded-full -translate-y-1/2 hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-text)]",
-        onClick: onPrevious,
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.ArrowLeft, { "aria-hidden": "true", className: "w-4 h-4" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_ui6.Combobox,
-      {
-        ariaLabel: label,
-        listLabel: `${label} results`,
-        value: query,
-        placeholder: placeholder ?? `${label}\u2026`,
-        groups,
-        open,
-        onOpenChange: setOpen,
-        onValueChange: (value) => {
-          setQuery(value);
-          onQueryChange?.(value);
-        },
-        onPick: handlePick,
-        status,
-        loading: loading ? "Searching\u2026" : void 0,
-        inputClassName: `h-[var(--layout-search-h,3rem)] ${onPrevious ? "pl-11" : "pl-6"} pr-20 text-base transition-[padding] duration-200 ease-out motion-reduce:transition-none bg-[var(--color-surface)] border-[var(--color-border)] rounded-full shadow-md focus-visible:ring-0`,
-        className: "genre-search-results z-40 rounded-xl shadow-md",
-        listClassName: "max-h-[min(20rem,50dvh)]",
-        optionClassName: "[@media(pointer:coarse)]:min-h-[var(--layout-touch-target)]"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "absolute right-3 top-1/2 flex items-center -translate-y-1/2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { "data-loading": loading, className: "relative p-2 text-[var(--color-text-muted)] pointer-events-none", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_lucide_react7.Search,
-          {
-            "aria-hidden": "true",
-            className: `w-6 h-6 transition-opacity duration-200 motion-reduce:transition-none ${loading ? "opacity-0" : ""}`
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_lucide_react7.LoaderCircle,
-          {
-            "aria-hidden": "true",
-            className: `absolute inset-2 w-6 h-6 transition-opacity duration-200 motion-reduce:transition-none ${loading ? "opacity-100 delay-300 animate-spin motion-reduce:animate-none" : "opacity-0"}`
-          }
-        )
-      ] }),
-      canClear && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Clear search",
-          className: "flex items-center justify-center p-2 [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] [@media(pointer:coarse)]:min-w-[var(--layout-touch-target)] text-[var(--color-text-muted)] rounded-full hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-text)]",
-          onClick: () => {
-            clear();
-            onQueryChange?.("");
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.X, { "aria-hidden": "true", className: "w-6 h-6" })
-        }
-      )
-    ] })
-  ] });
+  ) });
 }
 
 // src/genre-tree/GenreInfoPanelBody.tsx
@@ -1166,12 +1241,12 @@ var import_fa3 = require("react-icons/fa");
 var import_si = require("react-icons/si");
 
 // src/genre-tree/ShareDestinationButton.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var className = "group flex min-w-0 flex-1 flex-col items-center justify-center gap-1.5 rounded-xl px-2 py-2 text-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__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "max-w-full truncate", children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "max-w-full truncate", children: label })
   ] });
 }
 function ShareDestinationButton({
@@ -1183,29 +1258,29 @@ function ShareDestinationButton({
   ariaLabel
 }) {
   if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Contents, { icon, label }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Contents, { icon, label }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick, disabled, "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Contents, { icon, label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", onClick, disabled, "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Contents, { icon, label }) });
 }
 
 // src/genre-tree/SharePreviewCard.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function SharePreviewCard({ target, url }) {
   const Icon = { genre: import_lucide_react8.Music2, artist: import_lucide_react8.UserRound, song: import_lucide_react8.Music }[target.kind];
   const typeLabel = { genre: "Genre", artist: "Artist", song: "Song" }[target.kind];
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex w-28 shrink-0 items-center justify-center bg-[var(--color-primary)]/15 text-[var(--color-primary)]", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-sm text-[var(--color-primary)]", title: url, children: url })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex w-28 shrink-0 items-center justify-center bg-[var(--color-primary)]/15 text-[var(--color-primary)]", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-sm text-[var(--color-primary)]", title: url, children: url })
     ] })
   ] }) });
 }
 
 // src/genre-tree/SharePopup.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function resolveAbsoluteUrl(url) {
   try {
     const parsed = new URL(url, window.location.href);
@@ -1280,8 +1355,8 @@ function SharePopup({ target, url, onClose }) {
       setShareError("Could not open the share options.");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       BasePopup_default,
       {
         title: "Share",
@@ -1296,67 +1371,67 @@ function SharePopup({ target, url, onClose }) {
         titleTextClassName: "!text-xl !font-semibold !text-[var(--color-text)]",
         closeButtonClassName: "!h-10 !w-10 !rounded-none !border-0 !bg-transparent !p-0 !text-[var(--color-text)] hover:!bg-transparent hover:!text-[var(--color-text)]",
         contentClassName: "!rounded-none !bg-transparent !px-6 !pb-6 !pt-2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SharePreviewCard, { target, url: absoluteUrl || url }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "grid grid-cols-3 gap-1 rounded-3xl bg-[var(--color-surface)] p-3 sm:grid-cols-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SharePreviewCard, { target, url: absoluteUrl || url }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "grid grid-cols-3 gap-1 rounded-3xl bg-[var(--color-surface)] p-3 sm:grid-cols-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               ShareDestinationButton,
               {
                 label: "Copy Link",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Link2, { "aria-hidden": "true", className: "h-6 w-6" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react9.Link2, { "aria-hidden": "true", className: "h-6 w-6" }),
                 onClick: () => void handleCopy(),
                 ariaLabel: "Copy link",
                 disabled: !absoluteUrl
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               ShareDestinationButton,
               {
                 label: "WhatsApp",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fa3.FaWhatsapp, { "aria-hidden": "true", className: "h-9 w-9 text-[#25D366]" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fa3.FaWhatsapp, { "aria-hidden": "true", className: "h-9 w-9 text-[#25D366]" }),
                 href: destinationUrls?.whatsapp,
                 ariaLabel: `Share ${target.name} via WhatsApp`,
                 disabled: !absoluteUrl
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               ShareDestinationButton,
               {
                 label: "Gmail",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_si.SiGmail, { "aria-hidden": "true", className: "h-8 w-8 text-[#EA4335]" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_si.SiGmail, { "aria-hidden": "true", className: "h-8 w-8 text-[#EA4335]" }),
                 href: destinationUrls?.gmail,
                 ariaLabel: `Email ${target.name} with Gmail`,
                 disabled: !absoluteUrl
               }
             ),
-            canUseNativeShare && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            canUseNativeShare && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               ShareDestinationButton,
               {
                 label: "More",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Share2, { "aria-hidden": "true", className: "h-6 w-6" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react9.Share2, { "aria-hidden": "true", className: "h-6 w-6" }),
                 onClick: () => void handleNativeShare(),
                 ariaLabel: "More sharing options",
                 disabled: !absoluteUrl
               }
             )
           ] }),
-          copyStatus === "failed" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: "Could not copy the link." }),
-          shareError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: shareError })
+          copyStatus === "failed" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: "Could not copy the link." }),
+          shareError && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: shareError })
         ] })
       }
     ),
-    toastId > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Toast, { message: "Link copied", onClose: dismissToast }, toastId)
+    toastId > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Toast, { message: "Link copied", onClose: dismissToast }, toastId)
   ] });
 }
 
 // src/genre-tree/ShareActionButton.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function ShareActionButton({ target, url }) {
   const { showPopup, hidePopup } = (0, import_popup4.usePopup)();
   const openSharePopup = () => {
-    showPopup(/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SharePopup, { target, url, onClose: hidePopup }));
+    showPopup(/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SharePopup, { target, url, onClose: hidePopup }));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "button",
     {
       type: "button",
@@ -1365,7 +1440,7 @@ function ShareActionButton({ target, url }) {
       "aria-label": `Share ${target.name}`,
       title: `Share ${target.name}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Share2, { "aria-hidden": "true", className: "w-5 h-5" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react10.Share2, { "aria-hidden": "true", className: "w-5 h-5" }) }),
         "Share"
       ]
     }
@@ -1373,7 +1448,7 @@ function ShareActionButton({ target, url }) {
 }
 
 // src/genre-tree/GenreActionBand.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function GenreActionBand({
   node,
   onPlayPause,
@@ -1395,7 +1470,7 @@ function GenreActionBand({
     items.push({
       key: "play-pause",
       label: isPlaying ? "Pause" : "Play",
-      icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
       onClick: onPlayPause
     });
   }
@@ -1403,24 +1478,24 @@ function GenreActionBand({
     items.push({
       key: "zoom-in",
       label: "Focus",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.ZoomIn, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.ZoomIn, { "aria-hidden": "true", className: "w-5 h-5" }),
       onClick: onZoomIn
     });
   }
   if (onAddChild) {
-    adminItems.push({ key: "add-child", label: "Add", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.Plus, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onAddChild });
+    adminItems.push({ key: "add-child", label: "Add", icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.Plus, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onAddChild });
   }
   if (onRename) {
-    adminItems.push({ key: "rename", label: "Rename", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.Pencil, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onRename });
+    adminItems.push({ key: "rename", label: "Rename", icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.Pencil, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onRename });
   }
   if (onChangeParent) {
-    adminItems.push({ key: "change-parent", label: "Parent", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.MoveUpRight, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onChangeParent });
+    adminItems.push({ key: "change-parent", label: "Parent", icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.MoveUpRight, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onChangeParent });
   }
   if (onToggleSide) {
     adminItems.push({
       key: "toggle-side",
       label: side === "pop" ? "Make core" : "Make pop",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.ArrowLeftRight, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.ArrowLeftRight, { "aria-hidden": "true", className: "w-5 h-5" }),
       onClick: onToggleSide,
       disabled: !!toggleSideDisabledReason,
       title: toggleSideDisabledReason
@@ -1436,7 +1511,7 @@ function GenreActionBand({
     });
   }
   if (items.length === 0 && (!shareTarget || !shareUrl) && adminItems.length === 0) return null;
-  const renderItems = (list) => list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  const renderItems = (list) => list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "button",
     {
       type: "button",
@@ -1445,25 +1520,25 @@ 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__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)] group-disabled:group-hover:bg-[var(--color-surface-muted)]", children: item.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)] group-disabled:group-hover:bg-[var(--color-surface-muted)]", children: item.icon }),
         item.label
       ]
     },
     item.key
   ));
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: [
-    (items.length > 0 || shareTarget && shareUrl) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: [
+    (items.length > 0 || shareTarget && shareUrl) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
       renderItems(items),
-      shareTarget && shareUrl && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
+      shareTarget && shareUrl && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
     ] }),
-    adminItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    adminItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "section",
       {
         "aria-label": "Admin actions",
         className: `px-3.5 py-3 ${items.length > 0 ? "border-t border-[var(--color-border)]" : ""}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]", children: "Admin" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-wrap gap-1", children: renderItems(adminItems) })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]", children: "Admin" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-wrap gap-1", children: renderItems(adminItems) })
         ]
       }
     )
@@ -1471,12 +1546,12 @@ function GenreActionBand({
 }
 
 // src/genre-tree/GenreDetailExtras.tsx
-var import_ui8 = require("@behindthemusictree/ui");
-var import_genre_tree9 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui9 = require("@behindthemusictree/ui");
+var import_genre_tree12 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/ClampedText.tsx
 var import_react10 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ClampedText({ children, className: className2 = "" }) {
   const ref = (0, import_react10.useRef)(null);
   const [expanded, setExpanded] = (0, import_react10.useState)(false);
@@ -1486,9 +1561,9 @@ function ClampedText({ children, className: className2 = "" }) {
     if (!element || expanded) return;
     setOverflows(element.scrollHeight > element.clientHeight);
   }, [children, expanded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { ref, className: `${className2} ${expanded ? "" : "line-clamp-3"}`, children }),
-    (overflows || expanded) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { ref, className: `${className2} ${expanded ? "" : "line-clamp-3"}`, children }),
+    (overflows || expanded) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "button",
       {
         type: "button",
@@ -1506,7 +1581,7 @@ var import_react11 = require("react");
 var import_react_query = require("@tanstack/react-query");
 var import_zod = require("zod");
 var import_fa4 = require("react-icons/fa");
-var import_ui7 = require("@behindthemusictree/ui");
+var import_ui8 = require("@behindthemusictree/ui");
 var import_auth2 = require("@behindthemusictree/app-kit/auth");
 var import_transport5 = require("@behindthemusictree/app-kit/transport");
 var import_transport6 = require("@behindthemusictree/app-kit/transport");
@@ -1515,22 +1590,22 @@ var import_player4 = require("@behindthemusictree/app-kit/player");
 var import_player5 = require("@behindthemusictree/app-kit/player");
 var import_popup5 = require("@behindthemusictree/app-kit/popup");
 var import_transport8 = require("@behindthemusictree/app-kit/transport");
-var import_genre_tree4 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree5 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree6 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree7 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree8 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree9 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree10 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/MusicBrainzRecordingLink.tsx
-var import_genre_tree3 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_genre_tree6 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function MusicBrainzRecordingLink({
   song,
   children,
   className: className2 = ""
 }) {
-  const url = (0, import_genre_tree3.musicBrainzRecordingUrl)(song);
-  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const url = (0, import_genre_tree6.musicBrainzRecordingUrl)(song);
+  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "a",
     {
       href: url,
@@ -1545,11 +1620,11 @@ function MusicBrainzRecordingLink({
 }
 
 // src/genre-tree/GenrePlaylistTracks.tsx
-var import_genre_tree8 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree11 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun2 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var CATALOGUE_PAGE_SIZE = 100;
-var SongPageSchema = (0, import_transport6.PaginatedResponseSchema)(import_genre_tree6.SongDetailedSchema).extend({
+var SongPageSchema = (0, import_transport6.PaginatedResponseSchema)(import_genre_tree9.SongDetailedSchema).extend({
   overallTotal: import_zod.z.number().nullable(),
   page: import_zod.z.number().nullable(),
   totalPages: import_zod.z.number().nullable()
@@ -1576,7 +1651,7 @@ function GenrePlaylistTracks({
   renderTracksToolbar,
   artist = null
 }) {
-  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = (0, import_genre_tree7.useTrackList)();
+  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = (0, import_genre_tree10.useTrackList)();
   const { session, sessionRestored } = (0, import_auth2.useSession)();
   const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player4.usePlayer)();
   const { showPopup } = (0, import_popup5.usePopup)();
@@ -1585,11 +1660,11 @@ function GenrePlaylistTracks({
   const { fetch } = (0, import_transport5.useFetchWrapper)(getBackendBaseUrl);
   const playback = (0, import_transport5.usePlaybackContext)();
   const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)({
-    queryKey: [...scope === "me" ? import_genre_tree4.genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...import_genre_tree5.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : import_genre_tree5.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), ...playback.key ? [playback.key] : []],
+    queryKey: [...scope === "me" ? import_genre_tree7.genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...import_genre_tree8.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : import_genre_tree8.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), ...playback.key ? [playback.key] : []],
     queryFn: async ({ pageParam }) => {
       if (scope === "me") return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
       const response = await fetch(
-        import_genre_tree5.libraryEndpoints.reference.songs.list(),
+        import_genre_tree8.libraryEndpoints.reference.songs.list(),
         true,
         false,
         {},
@@ -1620,35 +1695,35 @@ function GenrePlaylistTracks({
     const started = artist ? playNewTrackListFromArtist(artist, scope, { startSongUuid, ordering: "title", genreUuid }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
     started.catch((error) => {
       console.error("Failed to play genre playlist:", error);
-      showPopup(/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InternalErrorPopup, { errorCode: import_transport8.ErrorCode.CLIENT_UNKNOWN }));
+      showPopup(/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InternalErrorPopup, { errorCode: import_transport8.ErrorCode.CLIENT_UNKNOWN }));
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui7.PanelSection, { title: `${(0, import_track_noun2.capitalize)(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui8.PanelSection, { title: `${(0, import_track_noun2.capitalize)(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
     renderTracksToolbar?.(),
-    isPending ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui7.Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { role: "alert", children: [
+    isPending ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui8.Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { role: "alert", children: [
       "Couldn't load ",
       trackNoun.plural,
       ".",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
-    ] }) : tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("ul", { className: "mt-1 max-h-64 overflow-y-auto text-[0.8125rem] leading-[1.45] [container-type:inline-size]", "aria-label": `${genrePlaylist.name} ${trackNoun.plural}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
+    ] }) : tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("ul", { className: "mt-1 max-h-64 overflow-y-auto text-[0.8125rem] leading-[1.45] [container-type:inline-size]", "aria-label": `${genrePlaylist.name} ${trackNoun.plural}`, children: [
       tracks.map((track, index) => {
         const label = track.artists?.length ? `${track.title} \u2014 ${track.artists.map((artist2) => artist2.name).join(", ")}` : track.title;
         const isCurrent = playerTrackObject?.track.id === track.uuid;
         const isPlaying = isCurrent && playState === import_player5.PlayStates.PLAYING;
-        const text = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: TEXT_CELL, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: TITLE_CELL, children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree6.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
-          track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: SEPARATOR, children: " \u2014 " }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_genre_tree8.ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
-          track.album && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: ALBUM_CELL, children: track.album.name })
+        const text = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: TEXT_CELL, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: TITLE_CELL, children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree9.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
+          track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: SEPARATOR, children: " \u2014 " }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_genre_tree11.ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
+          track.album && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: ALBUM_CELL, children: track.album.name })
         ] });
         const leading = renderSongLeading?.(track, index);
         const actions = renderSongActions?.(track);
-        const isUnplayable = (0, import_genre_tree6.isSong)(track) && (0, import_genre_tree6.songUnplayableReason)(track) !== null;
+        const isUnplayable = (0, import_genre_tree9.isSong)(track) && (0, import_genre_tree9.songUnplayableReason)(track) !== null;
         if (isUnplayable) {
-          return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", children: [
             leading,
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "button",
               {
                 type: "button",
@@ -1656,27 +1731,27 @@ function GenrePlaylistTracks({
                 "aria-disabled": "true",
                 "aria-label": label,
                 className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full opacity-0 cursor-not-allowed",
-                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa4.FaPlay, { size: 10 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa4.FaPlay, { size: 10 })
               }
             ),
             text,
             actions
           ] }, track.uuid);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "li",
           {
             className: `group flex min-h-8 items-center gap-1 rounded px-1 hover:bg-[var(--color-neutral-100)] ${isCurrent ? "font-medium text-[var(--color-primary)]" : ""}`,
             children: [
               leading,
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "button",
                 {
                   type: "button",
                   "aria-label": `${isPlaying ? "Pause" : "Play"} ${label}`,
                   className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-full cursor-pointer group-hover:opacity-100 focus-visible:opacity-100 ${isCurrent && playState !== import_player5.PlayStates.STOPPED ? "opacity-100" : "opacity-0 [@media(pointer:coarse)]:opacity-100"}`,
                   onClick: () => isCurrent ? handlePlayPauseAction() : play(track.uuid),
-                  children: isCurrent && playState === import_player5.PlayStates.LOADING ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui7.RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa4.FaPause, { size: 10 }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa4.FaPlay, { size: 10 })
+                  children: isCurrent && playState === import_player5.PlayStates.LOADING ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui8.RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa4.FaPause, { size: 10 }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa4.FaPlay, { size: 10 })
                 }
               ),
               text,
@@ -1686,7 +1761,7 @@ function GenrePlaylistTracks({
           track.uuid
         );
       }),
-      hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { ref: setSentinel, "aria-hidden": "true", className: "h-4" })
+      hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { ref: setSentinel, "aria-hidden": "true", className: "h-4" })
     ] })
   ] }) });
 }
@@ -1694,7 +1769,7 @@ function GenrePlaylistTracks({
 // src/genre-tree/GenreDetailExtras.tsx
 var import_track_noun3 = require("@behindthemusictree/app-kit/track-noun");
 var import_si2 = require("react-icons/si");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function GenreDetailExtras({
   genreUuid,
   genrePlaylist,
@@ -1711,24 +1786,24 @@ function GenreDetailExtras({
   ...trackSlots
 }) {
   const trackNoun = (0, import_track_noun3.useTrackNoun)();
-  const { data: overview, isPending } = (0, import_genre_tree9.useFetchGenreOverview)(
+  const { data: overview, isPending } = (0, import_genre_tree12.useFetchGenreOverview)(
     genreUuid,
     scope,
     getBackendBaseUrl,
     criteriaOverviewSchema
   );
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui8.PanelSection, { title: "Summary", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui8.Skeleton, { className: "h-4 w-3/4" }) }) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui9.PanelSection, { title: "Summary", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui9.Skeleton, { className: "h-4 w-3/4" }) }) }),
       family
     ] });
   }
-  if (!overview) return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: family });
+  if (!overview) return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: family });
   const { summary, summarySourceUrl, essentialSongs } = overview;
   const wikidataUrl = wikidataId ? `https://www.wikidata.org/wiki/${encodeURIComponent(wikidataId)}` : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui8.PanelSection, { title: "Links", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--color-text)]", children: [
-      summarySourceUrl && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui9.PanelSection, { title: "Links", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--color-text)]", children: [
+      summarySourceUrl && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "a",
         {
           href: summarySourceUrl,
@@ -1736,12 +1811,12 @@ function GenreDetailExtras({
           rel: "noopener noreferrer",
           className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_si2.SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_si2.SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
             "Wikipedia"
           ]
         }
       ),
-      wikidataUrl && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      wikidataUrl && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "a",
         {
           href: wikidataUrl,
@@ -1749,17 +1824,17 @@ function GenreDetailExtras({
           rel: "noopener noreferrer",
           className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_si2.SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_si2.SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
             "Wikidata"
           ]
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui8.PanelSection, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ClampedText, { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui9.PanelSection, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ClampedText, { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
     family,
     renderGenreDetailExtras?.(overview),
-    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui8.PanelSection, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: "\u2014" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui9.PanelSection, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: "\u2014" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       GenrePlaylistTracks,
       {
         genreUuid,
@@ -1775,7 +1850,7 @@ function GenreDetailExtras({
 }
 
 // src/genre-tree/GenreInfoPanelBody.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var import_react12 = require("react");
 function GenreNodeActionBand({ genrePlaylist, playback, ...bandProps }) {
   const { isPlaying, setIsPlaying } = (0, import_player6.usePlayer)();
@@ -1789,7 +1864,7 @@ function GenreNodeActionBand({ genrePlaylist, playback, ...bandProps }) {
       console.error("Failed to load genre playlist tracks:", error);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     GenreActionBand,
     {
       ...bandProps,
@@ -1810,9 +1885,9 @@ function GenreInfoPanelBody({
   band,
   extras
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
     toolbar,
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GenreNodeActionBand, { ...band, genrePlaylist, playback }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GenreNodeActionBand, { ...band, genrePlaylist, playback }),
     /* @__PURE__ */ (0, import_react12.createElement)(
       GenreDetailExtras,
       {
@@ -1831,8 +1906,8 @@ function GenreInfoPanelBody({
 
 // src/genre-tree/ChangeParentPopup.tsx
 var import_react13 = require("react");
-var import_genre_tree10 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_genre_tree13 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ChangeParentPopup({
   genrePlaylist,
   genrePlaylists,
@@ -1841,9 +1916,9 @@ function ChangeParentPopup({
   onClose,
   onParentChanged
 }) {
-  const { mutate, isPending, formErrors } = (0, import_genre_tree10.useUpdateGenre)(scope, getBackendBaseUrl);
+  const { mutate, isPending, formErrors } = (0, import_genre_tree13.useUpdateGenre)(scope, getBackendBaseUrl);
   const candidates = (0, import_react13.useMemo)(
-    () => (0, import_genre_tree10.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
+    () => (0, import_genre_tree13.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
     [genrePlaylists, genrePlaylist.uuid]
   );
   const handleSelect = (newParent) => {
@@ -1867,12 +1942,12 @@ function ChangeParentPopup({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("p", { className: "mb-3 text-sm text-[var(--color-text-muted)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { className: "mb-3 text-sm text-[var(--color-text-muted)]", children: [
       "Current parent: ",
       genrePlaylist.parent?.name ?? "none"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       GenreSearch,
       {
         genrePlaylists: candidates,
@@ -1880,22 +1955,22 @@ function ChangeParentPopup({
         placeholder: "Search a new parent\u2026"
       }
     ) }),
-    formErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
+    formErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
   ] });
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-var import_ui14 = require("@behindthemusictree/ui");
-var import_genre_tree15 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui15 = require("@behindthemusictree/ui");
+var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/artist/ArtistHeader.tsx
-var import_ui10 = require("@behindthemusictree/ui");
+var import_ui11 = require("@behindthemusictree/ui");
 
 // src/genre-tree/artist/ArtistLinks.tsx
 var import_lucide_react12 = require("lucide-react");
 var import_si3 = require("react-icons/si");
-var import_ui9 = require("@behindthemusictree/ui");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_ui10 = require("@behindthemusictree/ui");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var LINK_KINDS = {
   official: { label: "Official website", Icon: import_lucide_react12.Globe },
   wikipedia: { label: "Wikipedia", Icon: import_si3.SiWikipedia },
@@ -1932,7 +2007,7 @@ function artistLinks(artist) {
   return links;
 }
 function ArtistLinks({ links }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui9.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui10.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
 }
 
 // src/genre-tree/artist/formatYears.ts
@@ -1943,7 +2018,7 @@ function formatYears(beginYear, endYear, ended) {
 }
 
 // src/genre-tree/artist/ArtistHeader.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var countryNames = new Intl.DisplayNames(["en"], { type: "region" });
 function ArtistHeader({ artist }) {
   const fields = [];
@@ -1953,35 +2028,35 @@ function ArtistHeader({ artist }) {
   const years = formatYears(artist.beginYear, artist.endYear, artist.ended);
   if (years) fields.push({ label: "Active", value: years });
   const links = artistLinks(artist);
-  if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ArtistLinks, { links }) });
+  if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ArtistLinks, { links }) });
   if (fields.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui10.FieldList, { items: fields });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui11.FieldList, { items: fields });
 }
 
 // src/genre-tree/artist/ArtistPhoto.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function ExternalLink({ href, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
 }
 function ArtistPhoto({ image, name }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("figure", { className: "flex flex-col gap-1.5 px-6 py-2.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("figcaption", { className: "text-xs text-[var(--color-text-muted)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("figure", { className: "flex flex-col gap-1.5 px-6 py-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("figcaption", { className: "text-xs text-[var(--color-text-muted)]", children: [
       "Photo: ",
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
       ",",
       " ",
-      image.licenseUrl ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
+      image.licenseUrl ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
     ] })
   ] });
 }
 
 // src/genre-tree/artist/ArtistMembers.tsx
-var import_ui11 = require("@behindthemusictree/ui");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_ui12 = require("@behindthemusictree/ui");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function MembershipList({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui11.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { children: memberships.map((membership, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui12.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { children: memberships.map((membership, index) => {
     const details = [
       formatYears(membership.beginYear, membership.endYear, membership.ended),
       ...membership.roles
@@ -1989,9 +2064,9 @@ function MembershipList({ title, memberships, renderArtistLink }) {
     const detailsText = details.filter(Boolean).join(" \xB7 ");
     return (
       // A member can have several periods in the same group.
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
-        detailsText && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
+        detailsText && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
           " \u2014 ",
           detailsText
         ] })
@@ -2002,9 +2077,9 @@ function MembershipList({ title, memberships, renderArtistLink }) {
 function ArtistMembers({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
   const isCurrent = (membership) => !membership.ended && membership.endYear === null;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_ui11.PanelSection, { title, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_ui12.PanelSection, { title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       MembershipList,
       {
         title: "Past",
@@ -2016,8 +2091,8 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
 }
 
 // src/genre-tree/artist/ArtistDiscography.tsx
-var import_ui12 = require("@behindthemusictree/ui");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_ui13 = require("@behindthemusictree/ui");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var GROUPS = ["Albums", "EPs", "Singles", "Live", "Compilations", "Other"];
 var PRIMARY_GROUPS = { album: "Albums", ep: "EPs", single: "Singles" };
 function discographyGroup({ primaryType, secondaryTypes }) {
@@ -2037,12 +2112,12 @@ function byYear(a, b) {
 function ArtistDiscography({ albums }) {
   if (albums.length === 0) return null;
   const sorted = [...albums].sort(byYear);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui12.PanelSection, { title: "Discography", children: GROUPS.map((group) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.PanelSection, { title: "Discography", children: GROUPS.map((group) => {
     const groupAlbums = sorted.filter((album) => discographyGroup(album) === group);
     if (groupAlbums.length === 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui12.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
     ] }, album.uuid)) }) }, group);
   }) });
 }
@@ -2051,20 +2126,20 @@ function ArtistDiscography({ albums }) {
 var import_react14 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
 var import_lucide_react13 = require("lucide-react");
-var import_ui13 = require("@behindthemusictree/ui");
+var import_ui14 = require("@behindthemusictree/ui");
 var import_player10 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree14 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree17 = require("@behindthemusictree/app-kit/genre-tree");
 var import_transport9 = require("@behindthemusictree/app-kit/transport");
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
 var import_player9 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree11 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree14 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/TrackPositionPlayPause.tsx
 var import_fa5 = require("react-icons/fa");
 var import_player7 = require("@behindthemusictree/app-kit/player");
 var import_player8 = require("@behindthemusictree/app-kit/player");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function TrackPositionPlayPause({
   position,
   uuid,
@@ -2078,14 +2153,14 @@ function TrackPositionPlayPause({
   const isPlaying = isThisTrack && isConfirmedPlayable && playState === import_player8.PlayStates.PLAYING;
   const isPaused = isThisTrack && isConfirmedPlayable && playState === import_player8.PlayStates.PAUSED;
   const isCurrentTrackActive = isPlaying || isPaused;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       className: "track-position-play-pause relative flex items-center justify-center gap-2 text-lg w-16 cursor-pointer",
       style: { minWidth: "4rem", maxWidth: "4rem" },
       onClick: handlePlayPauseClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
           "span",
           {
             className: "track-position-play-pause__bars",
@@ -2093,18 +2168,18 @@ function TrackPositionPlayPause({
             role: "img",
             "aria-label": isPlaying ? "Playing" : "Paused",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__bar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__bar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__bar" })
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "track-position-play-pause__bar" })
             ]
           }
         ) : position }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
             className: `hidden group-hover:flex items-center justify-center ${isCurrentTrackActive ? "" : "absolute inset-0"}`,
             "aria-hidden": "true",
-            children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa5.FaPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa5.FaPlay, {})
+            children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fa5.FaPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fa5.FaPlay, {})
           }
         )
       ]
@@ -2113,9 +2188,9 @@ function TrackPositionPlayPause({
 }
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
-var import_genre_tree12 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree13 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_genre_tree15 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree16 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function TrackItem({
   track,
   position,
@@ -2125,11 +2200,11 @@ function TrackItem({
   renderSongLink
 }) {
   const { handlePlayPauseAction, playerTrackObject, loadTrackForPlayer } = (0, import_player9.usePlayer)();
-  const { trackList, selectedTrack, toTrackAtPosition, runtimeUnplayableTrackIds } = (0, import_genre_tree11.useTrackList)();
+  const { trackList, selectedTrack, toTrackAtPosition, runtimeUnplayableTrackIds } = (0, import_genre_tree14.useTrackList)();
   const scope = trackList?.origin?.scope ?? null;
   const isCurrentTrack = playerTrackObject?.track.id === track.uuid;
   const hasPlaybackError = isCurrentTrack && !!playerTrackObject?.loadError;
-  const isUnplayable = hasPlaybackError || runtimeUnplayableTrackIds?.has(track.uuid) === true || (0, import_genre_tree12.isSong)(track) && (0, import_genre_tree12.songUnplayableReason)(track) !== null;
+  const isUnplayable = hasPlaybackError || runtimeUnplayableTrackIds?.has(track.uuid) === true || (0, import_genre_tree15.isSong)(track) && (0, import_genre_tree15.songUnplayableReason)(track) !== null;
   const handlePlayPauseClick = (event) => {
     event.stopPropagation();
     if (isCurrentTrack) {
@@ -2139,12 +2214,12 @@ function TrackItem({
       loadTrackForPlayer(track.uuid);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
       className: `track-item flex h-14 text-[var(--color-text)] ${isUnplayable ? "opacity-50" : "hover:bg-[var(--color-surface-muted)] group"}`,
       children: [
-        isUnplayable ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        isUnplayable ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "div",
           {
             className: "flex items-center justify-center text-lg w-16",
@@ -2152,7 +2227,7 @@ function TrackItem({
             "aria-disabled": "true",
             children: position
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           TrackPositionPlayPause,
           {
             position,
@@ -2161,12 +2236,12 @@ function TrackItem({
             isSelected: selectedTrack?.uuid === track.uuid
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree12.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }) }),
-          track.artists && track.artists.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_genre_tree13.ArtistNames, { artists: track.artists, renderArtistLink }) }) : ""
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree15.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }) }),
+          track.artists && track.artists.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_genre_tree16.ArtistNames, { artists: track.artists, renderArtistLink }) }) : ""
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "genre-name-container flex items-center justify-start w-[21.6%] min-w-0 shrink-0", children: track.genre ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-xs font-bold", children: track.genre.name }) : "" }),
-        renderDuration && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "genre-name-container flex items-center justify-start w-[21.6%] min-w-0 shrink-0", children: track.genre ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-xs font-bold", children: track.genre.name }) : "" }),
+        renderDuration && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "div",
           {
             className: "duration flex text-base w-16 items-center justify-center",
@@ -2174,15 +2249,15 @@ function TrackItem({
             children: renderDuration(track)
           }
         ),
-        renderActions && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "edit flex text-base w-6 items-center justify-center mr-2 cursor-pointer", children: renderActions(track) })
+        renderActions && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "edit flex text-base w-6 items-center justify-center mr-2 cursor-pointer", children: renderActions(track) })
       ]
     }
   );
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var SongPageSchema2 = (0, import_transport9.PaginatedResponseSchema)(import_genre_tree14.SongDetailedSchema);
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var SongPageSchema2 = (0, import_transport9.PaginatedResponseSchema)(import_genre_tree17.SongDetailedSchema);
 var SORTS = [
   { ordering: "title", label: "Title" },
   { ordering: "-albumYear", label: "Year" }
@@ -2191,11 +2266,11 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
   const [page, setPage] = (0, import_react14.useState)(1);
   const [ordering, setOrdering] = (0, import_react14.useState)("title");
   const { fetch } = (0, import_transport9.useFetchWrapper)(getBackendBaseUrl);
-  const { playNewTrackListFromArtist } = (0, import_genre_tree14.useTrackList)();
+  const { playNewTrackListFromArtist } = (0, import_genre_tree17.useTrackList)();
   const { playerTrackObject } = (0, import_player10.usePlayer)();
   const { data, isPending, isError } = (0, import_transport9.useQueryWithParse)({
     queryKey: ["referenceSongs", "artist", artist.uuid, ordering, page],
-    queryFn: () => fetch(import_genre_tree14.libraryEndpoints.reference.songs.list(), true, false, void 0, {
+    queryFn: () => fetch(import_genre_tree17.libraryEndpoints.reference.songs.list(), true, false, void 0, {
       artist: artist.uuid,
       ordering,
       page
@@ -2210,25 +2285,25 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
   });
   const handleRowClickCapture = (event, song) => {
     if (!(event.target instanceof Element) || !event.target.closest(".track-position-play-pause")) return;
-    if (playerTrackObject?.track.id === song.uuid || (0, import_genre_tree14.songUnplayableReason)(song) !== null) return;
+    if (playerTrackObject?.track.id === song.uuid || (0, import_genre_tree17.songUnplayableReason)(song) !== null) return;
     event.stopPropagation();
     void play(song.uuid);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui13.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui13.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui14.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui14.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         "button",
         {
           type: "button",
           onClick: () => void play(),
           className: "flex w-fit items-center gap-1.5 px-3 py-1 text-xs font-medium bg-gray-900 text-white rounded-full hover:bg-gray-700",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react13.Play, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react13.Play, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
             "Play all"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           type: "button",
@@ -2243,7 +2318,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         sort.ordering
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       TrackItem,
       {
         track: song,
@@ -2252,12 +2327,12 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         renderSongLink
       }
     ) }, song.uuid)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui13.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui14.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
   ] }) });
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function useArtistPanel({
   uuid,
   scope,
@@ -2269,7 +2344,7 @@ function useArtistPanel({
   onExpandedChange,
   onClose
 }) {
-  const result = (0, import_genre_tree15.useArtist)(uuid, getBackendBaseUrl);
+  const result = (0, import_genre_tree18.useArtist)(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
   switch (result.status) {
     case "idle":
@@ -2278,26 +2353,26 @@ function useArtistPanel({
       return {
         ...panel,
         title: "Artist",
-        content: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui14.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui14.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui14.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui14.Skeleton, { className: "h-4 w-24" }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui14.Skeleton, { className: "h-16 mt-2.5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui14.Skeleton, { className: "h-16" })
+        content: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui15.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui15.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui15.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui15.Skeleton, { className: "h-4 w-24" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui15.Skeleton, { className: "h-16 mt-2.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui15.Skeleton, { className: "h-16" })
         ] })
       };
     case "not-found":
       return {
         ...panel,
         title: "Artist not found",
-        content: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This artist does not exist." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This artist does not exist." })
       };
     case "error":
       return {
         ...panel,
         title: "Artist",
-        content: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
       };
     case "success": {
       const { artist } = result;
@@ -2306,13 +2381,13 @@ function useArtistPanel({
       return {
         ...panel,
         title: artist.name,
-        content: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-          shareUrl && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: shareTarget && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl }) }) }),
-          artist.image && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistPhoto, { image: artist.image, name: artist.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistHeader, { artist }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
-          artist.tracksCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        content: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+          shareUrl && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: shareTarget && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl }) }) }),
+          artist.image && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArtistPhoto, { image: artist.image, name: artist.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArtistHeader, { artist }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
+          artist.tracksCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             ArtistSongs,
             {
               artist: { uuid: artist.uuid, name: artist.name },
@@ -2322,56 +2397,56 @@ function useArtistPanel({
             }
           )
         ] }),
-        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtistDiscography, { albums: artist.albums }) : void 0
+        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArtistDiscography, { albums: artist.albums }) : void 0
       };
     }
   }
 }
 
 // src/genre-tree/song/useSongPanel.tsx
-var import_ui16 = require("@behindthemusictree/ui");
-var import_genre_tree17 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui17 = require("@behindthemusictree/ui");
+var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/song/SongPanelContent.tsx
 var import_react15 = require("react");
 var import_lucide_react14 = require("lucide-react");
-var import_ui15 = require("@behindthemusictree/ui");
+var import_ui16 = require("@behindthemusictree/ui");
 var import_player11 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree16 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_genre_tree19 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var numberFormat = new Intl.NumberFormat("en");
 var dateFormat = new Intl.DateTimeFormat("en", { dateStyle: "medium" });
 var externalLink = "text-[var(--color-primary)] hover:underline focus-visible:underline";
 function SongHistory({ uuid, getBackendBaseUrl }) {
   const [open, setOpen] = (0, import_react15.useState)(false);
-  const history = (0, import_genre_tree16.useSongHistory)(uuid, getBackendBaseUrl, open);
+  const history = (0, import_genre_tree19.useSongHistory)(uuid, getBackendBaseUrl, open);
   let body = null;
-  if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui15.Skeleton, { className: "h-10", "aria-busy": "true" });
-  else if (history.status === "error") body = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-red-600", children: "Could not load the history." });
+  if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui16.Skeleton, { className: "h-10", "aria-busy": "true" });
+  else if (history.status === "error") body = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-red-600", children: "Could not load the history." });
   else if (history.status === "success")
-    body = history.entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("li", { className: "py-1.5 text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-medium", children: entry.action }),
-      entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
+    body = history.entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("li", { className: "py-1.5 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "font-medium", children: entry.action }),
+      entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
         " ",
         "\u2014 ",
         entry.oldValue ?? "none",
         " \u2192 ",
         entry.newValue ?? "none"
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "block text-xs text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "block text-xs text-[var(--color-text-muted)]", children: [
         entry.actorPseudo ?? "Anonymous",
         " \xB7 ",
         dateFormat.format(new Date(entry.createdOn))
       ] })
     ] }, entry.uuid)) });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "details",
     {
       onToggle: (event) => setOpen(event.currentTarget.open),
       className: "px-6 pb-2.5 mt-2.5 border-t border-[var(--color-border)]",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("summary", { className: "mt-2.5 cursor-pointer text-[0.6875rem] font-semibold uppercase text-[var(--color-text-muted)]", children: "History" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mt-1.5", children: body })
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("summary", { className: "mt-2.5 cursor-pointer text-[0.6875rem] font-semibold uppercase text-[var(--color-text-muted)]", children: "History" }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mt-1.5", children: body })
       ]
     }
   );
@@ -2385,25 +2460,25 @@ function SongPanelContent({
   genrePath,
   onSelectGenre
 }) {
-  const { playNewTrackListFromTrackUuid } = (0, import_genre_tree16.useTrackList)();
+  const { playNewTrackListFromTrackUuid } = (0, import_genre_tree19.useTrackList)();
   const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player11.usePlayer)();
-  const unplayableReason = (0, import_genre_tree16.songUnplayableReason)(song);
+  const unplayableReason = (0, import_genre_tree19.songUnplayableReason)(song);
   const isCurrent = playerTrackObject?.track.id === song.uuid;
   const isPlaying = isCurrent && playState === import_player11.PlayStates.PLAYING;
   const shareTarget = { kind: "song", uuid: song.uuid, name: song.title, scope };
-  const musicBrainzUrl = (0, import_genre_tree16.musicBrainzRecordingUrl)(song);
+  const musicBrainzUrl = (0, import_genre_tree19.musicBrainzRecordingUrl)(song);
   const fields = [];
   if (song.genre) {
     const path = genrePath.length > 0 ? genrePath : null;
     fields.push({
       label: "Genre",
-      value: path ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
-        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": "true", children: "\u203A " }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
+      value: path ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { children: [
+        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "aria-hidden": "true", children: "\u203A " }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
       ] }, genrePlaylist.uuid)) }) : song.genre.name
     });
   } else {
-    fields.push({ label: "Genre", value: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-[var(--color-text-muted)]", children: "No genre" }) });
+    fields.push({ label: "Genre", value: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-[var(--color-text-muted)]", children: "No genre" }) });
   }
   if (song.firstReleaseYear) fields.push({ label: "First released", value: song.firstReleaseYear });
   const viewCount = song.youtubeVideo?.viewCount;
@@ -2413,11 +2488,11 @@ function SongPanelContent({
   const links = [];
   if (musicBrainzUrl)
     links.push(
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("a", { href: musicBrainzUrl, target: "_blank", rel: "noopener noreferrer", className: externalLink, children: "MusicBrainz" }, "mb")
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("a", { href: musicBrainzUrl, target: "_blank", rel: "noopener noreferrer", className: externalLink, children: "MusicBrainz" }, "mb")
     );
   if (song.youtubeVideo)
     links.push(
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "a",
         {
           href: `https://www.youtube.com/watch?v=${encodeURIComponent(song.youtubeVideo.id)}`,
@@ -2432,33 +2507,33 @@ function SongPanelContent({
   if (links.length > 0)
     fields.push({
       label: "Links",
-      value: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex gap-3", children: links })
+      value: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "flex gap-3", children: links })
     });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
-      unplayableReason ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "flex items-center px-2.5 text-sm text-[var(--color-text-muted)]", children: unplayableReason }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
+      unplayableReason ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "flex items-center px-2.5 text-sm text-[var(--color-text-muted)]", children: unplayableReason }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         "button",
         {
           type: "button",
           onClick: () => isCurrent ? handlePlayPauseAction() : playNewTrackListFromTrackUuid(song, scope),
           className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react14.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react14.Play, { "aria-hidden": "true", className: "w-5 h-5" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react14.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react14.Play, { "aria-hidden": "true", className: "w-5 h-5" }) }),
             isPlaying ? "Pause" : "Play"
           ]
         }
       ),
-      shareUrl && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
+      shareUrl && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
     ] }) }),
-    song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "px-6 pt-2.5 text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_genre_tree16.ArtistNames, { artists: song.artists, renderArtistLink }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui15.FieldList, { items: fields }),
-    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui15.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
+    song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "px-6 pt-2.5 text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_genre_tree19.ArtistNames, { artists: song.artists, renderArtistLink }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui16.FieldList, { items: fields }),
+    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui16.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
   ] });
 }
 
 // src/genre-tree/song/useSongPanel.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function useSongPanel({
   uuid,
   scope,
@@ -2471,7 +2546,7 @@ function useSongPanel({
   onExpandedChange,
   onClose
 }) {
-  const result = (0, import_genre_tree17.useSong)(uuid, getBackendBaseUrl);
+  const result = (0, import_genre_tree20.useSong)(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
   switch (result.status) {
     case "idle":
@@ -2480,24 +2555,24 @@ function useSongPanel({
       return {
         ...panel,
         title: "Song",
-        content: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui16.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui16.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui16.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui16.Skeleton, { className: "h-4 w-24" })
+        content: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui17.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui17.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui17.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui17.Skeleton, { className: "h-4 w-24" })
         ] })
       };
     case "not-found":
       return {
         ...panel,
         title: "Song not found",
-        content: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This song does not exist." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This song does not exist." })
       };
     case "error":
       return {
         ...panel,
         title: "Song",
-        content: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this song." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this song." })
       };
     case "success": {
       const { song } = result;
@@ -2505,7 +2580,7 @@ function useSongPanel({
       return {
         ...panel,
         title: song.title,
-        content: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        content: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           SongPanelContent,
           {
             song,
@@ -2524,29 +2599,29 @@ function useSongPanel({
 
 // src/genre-tree/SizeMetricToggle.tsx
 var import_md2 = require("react-icons/md");
-var import_ui17 = require("@behindthemusictree/ui");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_ui18 = require("@behindthemusictree/ui");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function SizeMetricToggle({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    import_ui17.SegmentedControl,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    import_ui18.SegmentedControl,
     {
       variant: "floating",
       "aria-label": "Size nodes by",
       value,
       onChange,
       options: [
-        { value: "songs", label: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_md2.MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
-        { value: "views", label: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_md2.MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
+        { value: "songs", label: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_md2.MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
+        { value: "views", label: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_md2.MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
       ]
     }
   );
 }
 
 // src/genre-tree/GenreTreeView.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var NO_POP_ROOT_TITLE = "This genre tree has no 'Mainstream Pop' root yet";
 var REGIONS_CLASS = "[--gtv-center-left:var(--layout-center-left)] [--gtv-center-right:var(--layout-center-right)] [--gtv-center-top:var(--layout-band-top)]";
 var noop = () => {
@@ -2580,6 +2655,9 @@ function GenreTreeView({
   artistExpanded: controlledArtistExpanded,
   onArtistExpandedChange,
   getShareUrl,
+  extraSearchGroups = [],
+  onSearchQueryChange,
+  onSearchFocus,
   artistSearch = true,
   onArtistSelect,
   artistSearchBaseUrl,
@@ -2645,7 +2723,7 @@ function GenreTreeView({
     allowWheelRotation: internalAllowWheelRotation,
     toggleWheelRotation,
     onNodeHover: handleNodeHover
-  } = (0, import_genre_tree19.useGenreTreeViewState)({
+  } = (0, import_genre_tree21.useGenreTreeViewState)({
     scope,
     getBackendBaseUrl,
     viewMode: controlledViewMode,
@@ -2664,12 +2742,12 @@ function GenreTreeView({
     restoreRootUuid = selectedGenrePlaylist.root.uuid;
     setStackedRestoreOwner({ revision: restoreRevision, rootUuid: restoreRootUuid });
   }
-  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree19.genreUpdateMutationKey }) > 0;
-  const { mutate: updateGenre } = (0, import_genre_tree19.useUpdateGenre)(scope, getBackendBaseUrl);
+  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree21.genreUpdateMutationKey }) > 0;
+  const { mutate: updateGenre } = (0, import_genre_tree21.useUpdateGenre)(scope, getBackendBaseUrl);
   const busy = deferredSizeMetric !== sizeMetric || isTreeFetching || isGenreUpdating;
   const isArtistFiltered = artistUuid !== null;
   const canSizeByViews = !isArtistFiltered && hasViewsCount(visibleGenrePlaylists);
-  const artistResult = (0, import_genre_tree19.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
+  const artistResult = (0, import_genre_tree21.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
   const filterArtistName = artistResult.status === "success" ? artistResult.artist.name : null;
   const filterArtist = (0, import_react16.useMemo)(
     () => artistUuid !== null && filterArtistName !== null ? { uuid: artistUuid, name: filterArtistName } : null,
@@ -2689,7 +2767,7 @@ function GenreTreeView({
   const openSongRef = (0, import_react16.useRef)(openSong);
   openSongRef.current = openSong;
   const resolvedRenderSongLink = (0, import_react16.useCallback)(
-    (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
+    (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
     [renderSongLink]
   );
   const [expandedSongUuid, setExpandedSongUuid] = (0, import_react16.useState)(null);
@@ -2701,7 +2779,7 @@ function GenreTreeView({
     scope,
     getBackendBaseUrl: artistBaseUrl,
     getShareUrl: getShareUrlRef.current,
-    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
     expanded: controlledArtistExpanded ?? (artistUuid !== null && expandedArtistUuid === artistUuid),
     onExpandedChange: (on) => {
       if (controlledArtistExpanded === void 0) setExpandedArtistUuid(on ? artistUuid : null);
@@ -2710,7 +2788,7 @@ function GenreTreeView({
     renderSongLink: resolvedRenderSongLink,
     onClose: () => changeArtist(null)
   });
-  const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
+  const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
   const getGenrePath = (genre) => {
     const path = [];
     let current = visibleGenrePlaylists.find((playlist) => playlist.criteria?.uuid === genre.uuid);
@@ -2766,7 +2844,7 @@ function GenreTreeView({
     []
   );
   const panelRef = (0, import_react16.useRef)(null);
-  const obscuredInset = (0, import_ui18.useObscuredInset)(panelRef);
+  const obscuredInset = (0, import_ui19.useObscuredInset)(panelRef);
   const hostPanel = { obscuredInset, onNodeStyleResolverChange: handleNodeStyleResolverChange };
   const nodeMetric = isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric;
   const treeNodes = (0, import_react16.useMemo)(() => toTreeNodes(visibleGenrePlaylists, nodeMetric), [visibleGenrePlaylists, nodeMetric]);
@@ -2789,52 +2867,27 @@ function GenreTreeView({
   const handlePrevious = previousPlaylist && visibleGenrePlaylists.includes(previousPlaylist) ? () => handleGenreSearchSelect(previousPlaylist) : void 0;
   const { showPopup, hidePopup } = (0, import_popup6.usePopup)();
   const [searchText, setSearchText] = (0, import_react16.useState)("");
-  const artistSearchResult = (0, import_genre_tree18.useArtistSearch)(artistBaseUrl, artistSearch ? searchText : "");
-  const artistGroup = artistSearch ? {
-    key: "artists",
-    label: "Artists",
-    items: artistSearchResult.artists.map((artist) => ({
-      key: artist.uuid,
-      content: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "block truncate font-medium", children: [
-          artist.name,
-          artist.disambiguation && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
-            " \xB7 ",
-            artist.disambiguation
-          ] })
-        ] }),
-        artist.matchedAlias && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
-          "also known as ",
-          artist.matchedAlias
-        ] })
-      ] }),
-      onSelect: () => {
-        openArtist(artist.uuid);
-        onArtistSelect?.(artist);
-      }
-    })),
-    status: artistSearchResult.isError ? "Search failed" : artistSearchResult.settled && artistSearchResult.artists.length === 0 ? "No artists found" : "",
-    loading: artistSearchResult.pending
-  } : void 0;
-  const songSearchResult = (0, import_genre_tree18.useSongSearch)(songBaseUrl, songSearch ? searchText : "");
-  const songGroup = songSearch ? {
-    key: "songs",
-    label: "Songs",
-    items: songSearchResult.songs.map((song) => ({
-      key: song.uuid,
-      content: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: (0, import_genre_tree18.isSongSearchResultPlayable)(song) ? void 0 : "opacity-60", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "block truncate font-medium", children: song.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [song.artists.map((artist) => artist.name).join(", "), song.genre?.name ?? "No genre"].filter(Boolean).join(" \xB7 ") })
-      ] }),
-      onSelect: () => {
-        openSong(song.uuid);
-        onSongSelect?.(song);
-      }
-    })),
-    status: songSearchResult.isError ? "Search failed" : songSearchResult.settled && songSearchResult.songs.length === 0 ? "No songs found" : "",
-    loading: songSearchResult.pending
-  } : void 0;
-  const extraGroups = [artistGroup, songGroup].filter((group) => group !== void 0);
+  const 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);
@@ -2858,7 +2911,7 @@ function GenreTreeView({
   };
   const renderGenreBody = (relation) => {
     const { node } = relation;
-    const family = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    const family = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       import_genre_tree_view4.GenreNodeFamily,
       {
         node,
@@ -2869,10 +2922,10 @@ function GenreTreeView({
         onSelectNode: selectGenreFromPanel
       }
     );
-    const ancestors = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: relation.ancestorNodes, onSelectNode: selectGenreFromPanel });
+    const ancestors = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: relation.ancestorNodes, onSelectNode: selectGenreFromPanel });
     const genrePlaylist = genrePlaylistByNodeId.get(node.id);
     const criteria = genrePlaylist?.criteria;
-    if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
       family,
       ancestors
     ] }) };
@@ -2892,11 +2945,11 @@ function GenreTreeView({
       (sibling) => sibling.parent?.uuid === parentPlaylist.uuid && sibling.uuid !== genrePlaylist.uuid && sibling.criteria?.side === "pop"
     ) : void 0;
     return {
-      primary: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      primary: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           GenreInfoPanelBody,
           {
-            family: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+            family: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
               family,
               ancestors
             ] }),
@@ -2914,7 +2967,7 @@ function GenreTreeView({
               onAddChild: readOnly ? void 0 : () => handleGenreCreationAction(criteria),
               onRename: readOnly ? void 0 : () => handleGenreRenameAction(criteria),
               onChangeParent: readOnly ? void 0 : () => showPopup(
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                   ChangeParentPopup,
                   {
                     genrePlaylist: { ...genrePlaylist, criteria },
@@ -2989,19 +3042,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__ */ (0, import_jsx_runtime40.jsx)(
-    import_ui18.IconButton,
+  const expandButton = placement === "default" && activePanel?.onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_ui19.IconButton,
     {
       "aria-label": activePanel.expanded ? "Shrink panel" : "Extend panel",
       style: activePanel.headerAccent && { color: "inherit" },
       onClick: () => activePanel.onExpandedChange?.(!activePanel.expanded),
-      children: activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react16.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react16.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
+      children: activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react16.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react16.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
     }
   ) : null;
   const renderArtistFilter = () => {
     if (isLoading || !filterArtist) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         {
           type: "button",
@@ -3013,7 +3066,7 @@ function GenreTreeView({
           children: filterArtist.name
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         {
           type: "button",
@@ -3025,8 +3078,8 @@ function GenreTreeView({
       )
     ] });
   };
-  const actions = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  const actions = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       GenreSearch,
       {
         genrePlaylists: visibleGenrePlaylists,
@@ -3034,14 +3087,18 @@ function GenreTreeView({
         selectedName: selectedGenrePlaylist?.name ?? (typeof builtInPanel?.title === "string" ? builtInPanel.title : null),
         onClear: builtInSongPanel ? () => changeSong(null) : builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
         onPrevious: handlePrevious,
-        onQueryChange: artistSearch || songSearch ? setSearchText : void 0,
+        onQueryChange: (text) => {
+          setSearchText(text);
+          onSearchQueryChange?.(text);
+        },
+        onFocus: onSearchFocus,
         extraGroups
       }
     ),
-    !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "contents max-md:flex max-md:w-full max-md:items-center max-md:gap-2 max-md:overflow-x-auto max-md:[scrollbar-width:none] max-md:[&>*]:shrink-0", children: [
-      !isLoading && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-        import_ui18.SegmentedControl,
+    !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "contents max-md:flex max-md:w-full max-md:items-center max-md:gap-2 max-md:overflow-x-auto max-md:[scrollbar-width:none] max-md:[&>*]:shrink-0", children: [
+      !isLoading && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        import_ui19.SegmentedControl,
         {
           "aria-label": "Tree view mode",
           value: viewMode,
@@ -3054,14 +3111,14 @@ function GenreTreeView({
           ]
         }
       ),
-      !isLoading && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      !isLoading && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "div",
         {
           className: "flex items-center gap-1",
           role: "group",
           "aria-label": "Tree display options",
-          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            import_ui18.Button,
+          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            import_ui19.Button,
             {
               variant: allowWheelRotation ? "default" : "outline",
               size: "sm",
@@ -3071,8 +3128,8 @@ function GenreTreeView({
           )
         }
       ),
-      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-        import_ui18.IconTextButton,
+      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        import_ui19.IconTextButton,
         {
           icon: import_lucide_react15.Plus,
           text: "Add root",
@@ -3081,34 +3138,34 @@ function GenreTreeView({
       )
     ] })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       "data-left-panel": isPanelShown && !isCollapsed ? void 0 : "hidden",
       className: ["genre-tree-view relative flex flex-col h-full", placement === "regions" && REGIONS_CLASS, className2].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "div",
           {
             className: `actions-container absolute z-30 flex items-center gap-2 ${placement === "regions" ? "left-[calc(var(--layout-gutter)+var(--layout-panel-inset))] top-[calc(var(--layout-gutter)+var(--layout-panel-inset))] max-md:right-[calc(var(--layout-gutter)+var(--layout-panel-inset))] max-md:top-[var(--layout-band-top)] max-md:flex-col max-md:items-stretch" : "left-5 top-5"}`,
             children: actions
           }
         ),
-        !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "div",
           {
             className: `absolute left-1/2 z-30 hidden -translate-x-1/2 md:block ${placement === "regions" ? "top-[calc(var(--layout-gutter)+var(--layout-panel-inset))]" : "top-5"}`,
             children: renderArtistFilter()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
-          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
-          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_genre_tree_view4.GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
+          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
+          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_genre_tree_view4.GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
             // The info panel's top edge aligns with the tree's; the search bar floats `--layout-panel-inset` below it,
             // and the header inset (the bar's height plus that inset) extends the header's fill behind the bar,
             // Google Maps style; the 8px bottom padding mirrors the inset above the bar, and the hidden title's height is zeroed.
             // The panel's own Zoom in button is hidden: the search bar carries it.
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               GenrePlaylistTreeWheel,
               {
                 scope,
@@ -3125,9 +3182,9 @@ function GenreTreeView({
                 allowWheelRotation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
                 viewportRestore,
@@ -3136,7 +3193,7 @@ function GenreTreeView({
             ) }) })
           ) : viewMode === "pop-core" ? (
             // Same as the wheel: the header inset extends its fill behind the floating search bar, Google Maps style.
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               GenrePlaylistTreeWheelRadialPopCore,
               {
                 scope,
@@ -3153,9 +3210,9 @@ function GenreTreeView({
                 allowWheelRotation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
                 viewportRestore,
@@ -3163,7 +3220,7 @@ function GenreTreeView({
                 ...focus
               }
             ) }) })
-          ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             GenrePlaylistTreeWheelRadialPopCore,
             {
               outline: true,
@@ -3179,13 +3236,13 @@ function GenreTreeView({
               selectedNodeId,
               readOnly
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)]", children: Object.entries(groupedGenrePlaylistsByRoot).map(
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)]", children: Object.entries(groupedGenrePlaylistsByRoot).map(
             ([uuid, genrePlaylistTreePerRoot]) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 "div",
                 {
                   className: "tree-per-root-container relative shrink-0 h-[28rem] mt-2 mr-16 p-2 bg-[var(--color-neutral-100)] rounded-lg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                     GenrePlaylistTreePerRoot,
                     {
                       scope,
@@ -3211,8 +3268,8 @@ function GenreTreeView({
               );
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            import_ui18.DetailPanel,
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            import_ui19.DetailPanel,
             {
               ref: panelRef,
               side: "left",
@@ -3228,7 +3285,7 @@ function GenreTreeView({
               aside: activePanel?.aside,
               edgeTab: detailTab,
               headerClassName: activePanel?.compact ? "pt-[calc(var(--layout-search-h)+var(--layout-panel-inset)+0.5rem)]" : void 0,
-              children: activePanel?.aside && !activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+              children: activePanel?.aside && !activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
                 activePanel.content,
                 activePanel.aside
               ] }) : activePanel?.content
@@ -3243,10 +3300,10 @@ function GenreTreeView({
 // src/genre-tree/GenreDetailPanel.tsx
 var import_react17 = require("react");
 var import_genre_tree_view5 = require("@behindthemusictree/genre-tree-view");
-var import_ui19 = require("@behindthemusictree/ui");
+var import_ui20 = require("@behindthemusictree/ui");
 var import_lucide_react17 = require("lucide-react");
-var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var RELATIVE_ITEM_COUNT = 1;
 function toNode(genre, parentId) {
   return {
@@ -3273,7 +3330,7 @@ function GenreDetailPanel({
   edgeTab,
   extras
 }) {
-  const { data: detail, isPending, isError } = (0, import_genre_tree20.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
+  const { data: detail, isPending, isError } = (0, import_genre_tree22.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
   const playback = useGenrePlaylistPlayback({ scope, genrePlaylists: [] });
   const view = (0, import_react17.useMemo)(() => {
     if (!detail) return null;
@@ -3301,17 +3358,17 @@ function GenreDetailPanel({
     };
   }, [detail]);
   if (isError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." });
   }
   if (isPending || !detail || !view) {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui19.Skeleton, { className: "h-6 w-2/3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui19.Skeleton, { className: "h-4 w-full" }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui19.Skeleton, { className: "h-4 w-3/4" })
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_ui20.Skeleton, { className: "h-6 w-2/3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_ui20.Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_ui20.Skeleton, { className: "h-4 w-3/4" })
     ] });
   }
   const selectGenre = (nodeId) => onSelectGenre(nodeId);
-  const family = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  const family = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     import_genre_tree_view5.GenreNodeFamily,
     {
       node: view.node,
@@ -3322,20 +3379,20 @@ function GenreDetailPanel({
       onSelectNode: selectGenre
     }
   );
-  const ancestors = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_genre_tree_view5.GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-    import_ui19.DetailPanel,
+  const ancestors = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_genre_tree_view5.GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    import_ui20.DetailPanel,
     {
       side: "left",
       title: view.node.name,
       headerAccent: { background: view.fill, color: import_genre_tree_view5.ACCENT_TEXT_COLOR },
-      headerActions: onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        import_ui19.IconButton,
+      headerActions: onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        import_ui20.IconButton,
         {
           "aria-label": expanded ? "Shrink panel" : "Extend panel",
           style: { color: "inherit" },
           onClick: () => onExpandedChange(!expanded),
-          children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react17.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react17.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
+          children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react17.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react17.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
         }
       ) : void 0,
       onClose,
@@ -3344,10 +3401,10 @@ function GenreDetailPanel({
       onExpandedChange,
       edgeTab,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           GenreInfoPanelBody,
           {
-            family: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+            family: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
               family,
               ancestors
             ] }),
@@ -3373,10 +3430,10 @@ var import_genre_tree_view6 = require("@behindthemusictree/genre-tree-view");
 // src/genre-tree/track-list-sidebar/TrackListSidebar.tsx
 var import_react18 = require("react");
 var import_lucide_react18 = require("lucide-react");
-var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree24 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun4 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var useBrowserLayoutEffect = typeof window === "undefined" ? import_react18.useEffect : import_react18.useLayoutEffect;
 function TrackListSidebar({
   className: className2 = "",
@@ -3389,7 +3446,7 @@ function TrackListSidebar({
   renderArtistLink,
   renderSongLink
 }) {
-  const { trackList, loadMore, autoAdvanceScrollRequest } = (0, import_genre_tree21.useTrackList)();
+  const { trackList, loadMore, autoAdvanceScrollRequest } = (0, import_genre_tree23.useTrackList)();
   const trackNoun = (0, import_track_noun4.useTrackNoun)();
   const trackListRef = (0, import_react18.useRef)(null);
   const previousOriginRef = (0, import_react18.useRef)(trackList?.origin ?? null);
@@ -3478,25 +3535,25 @@ function TrackListSidebar({
     }
   };
   const positionClasses = layout === "inline" ? "relative w-full flex h-full flex-col" : "fixed right-0 w-[50rem] flex flex-col";
-  return trackList ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return trackList ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     {
       "data-theme": "dark",
       className: `track-list-sidebar ${positionClasses} rounded-2xl bg-[var(--color-surface)] pb-1 ${className2}`,
       style: layout === "fixed" ? { top: "63.5px", maxHeight: "calc(100vh - 63.5px - 79px)" } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "origin flex text-xl", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "name-container flex flex-col justify-center items-center text-[var(--color-text)] font-bold pr-2 max-w-[27.5rem]", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "origin flex text-xl", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "name-container flex flex-col justify-center items-center text-[var(--color-text)] font-bold pr-2 max-w-[27.5rem]", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "info flex items-center text-sm text-[var(--color-text-muted)]", children: [
-              trackList.origin.type === import_genre_tree22.TrackListOriginType.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === import_genre_tree22.TrackListOriginType.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "info flex items-center text-sm text-[var(--color-text-muted)]", children: [
+              trackList.origin.type === import_genre_tree24.TrackListOriginType.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === import_genre_tree24.TrackListOriginType.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
               `${trackList.total} ${trackList.total > 1 ? trackNoun.plural : trackNoun.singular}`
             ] })
           ] }),
-          (isCollapsed && onExpand || !isCollapsed && onMinimize) && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          (isCollapsed && onExpand || !isCollapsed && onMinimize) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "button",
             {
               type: "button",
@@ -3505,11 +3562,11 @@ function TrackListSidebar({
               "aria-expanded": !isCollapsed,
               className: `ml-2 flex h-8 w-8 shrink-0 items-center justify-center rounded-md hover:bg-[var(--color-surface-muted)] ${isCollapsed ? "text-[var(--color-text-muted)]" : "text-white"}`,
               onClick: isCollapsed ? onExpand : onMinimize,
-              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react18.ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react18.ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
             }
           )
         ] }),
-        !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           "ul",
           {
             ref: trackListRef,
@@ -3519,7 +3576,7 @@ function TrackListSidebar({
             onPointerDown: markUserScrollIntent,
             className: layout === "inline" ? "track-list flex-1 min-h-0 overflow-auto list-none p-0 m-0" : "track-list flex-1 min-h-0 overflow-auto list-none p-0 m-0",
             children: [
-              trackList.tracks.map((track, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              trackList.tracks.map((track, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                 TrackItem,
                 {
                   track,
@@ -3530,7 +3587,7 @@ function TrackListSidebar({
                   renderSongLink
                 }
               ) }, track.uuid)),
-              hasMore && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
+              hasMore && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
             ]
           }
         )
@@ -3543,14 +3600,14 @@ function TrackListSidebar({
 var import_react19 = require("react");
 var import_tailwind_merge = require("tailwind-merge");
 var import_player13 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree24 = require("@behindthemusictree/app-kit/genre-tree");
-var import_ui20 = require("@behindthemusictree/ui");
+var import_genre_tree26 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui21 = require("@behindthemusictree/ui");
 
 // src/genre-tree/PlayerControls.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree25 = require("@behindthemusictree/app-kit/genre-tree");
 var import_player12 = require("@behindthemusictree/app-kit/player");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function PlayerControls() {
   const {
     duration,
@@ -3562,22 +3619,22 @@ function PlayerControls() {
     setVolume,
     volume
   } = (0, import_player12.usePlayer)();
-  const { hasNextTrack, hasPreviousTrack, playNextTrack, playPreviousTrack } = (0, import_genre_tree23.useTrackList)();
+  const { hasNextTrack, hasPreviousTrack, playNextTrack, playPreviousTrack } = (0, import_genre_tree25.useTrackList)();
   const currentTime = (0, import_player12.useCurrentTime)();
   const isBusy = isLoading || playState === import_player12.PlayStates.LOADING;
   const isReady = !!playerTrackObject?.isReady && !isBusy && !playerTrackObject.loadError;
   const safeDuration = Number.isFinite(duration) && duration > 0 ? duration : 0;
   const safeCurrentTime = Number.isFinite(currentTime) ? Math.max(0, Math.min(currentTime, safeDuration)) : 0;
   const isPlaying = playState === import_player12.PlayStates.PLAYING;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "section",
     {
       "aria-label": "Player controls",
       className: "player-controls flex shrink-0 flex-col gap-2 border-b border-zinc-800 px-3 py-2 text-zinc-200",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { "aria-label": "Elapsed time", children: (0, import_genre_tree23.formatTime)(safeCurrentTime) }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { "aria-label": "Elapsed time", children: (0, import_genre_tree25.formatTime)(safeCurrentTime) }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "input",
             {
               "aria-label": "Seek",
@@ -3591,11 +3648,11 @@ function PlayerControls() {
               onChange: (event) => seekTo(Number(event.currentTarget.value))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { "aria-label": "Duration", children: (0, import_genre_tree23.formatTime)(safeDuration) })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { "aria-label": "Duration", children: (0, import_genre_tree25.formatTime)(safeDuration) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               "button",
               {
                 type: "button",
@@ -3604,10 +3661,10 @@ function PlayerControls() {
                 disabled: !isReady || !hasPreviousTrack,
                 onClick: playPreviousTrack,
                 className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-zinc-300 hover:bg-zinc-800 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
-                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react19.SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react19.SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               "button",
               {
                 type: "button",
@@ -3616,10 +3673,10 @@ function PlayerControls() {
                 disabled: !isReady,
                 onClick: handlePlayPauseAction,
                 className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white text-zinc-950 hover:bg-zinc-200 disabled:cursor-not-allowed disabled:opacity-40",
-                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react19.Pause, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react19.Play, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
+                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react19.Pause, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react19.Play, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               "button",
               {
                 type: "button",
@@ -3628,14 +3685,14 @@ function PlayerControls() {
                 disabled: !isReady || !hasNextTrack,
                 onClick: playNextTrack,
                 className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-zinc-300 hover:bg-zinc-800 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
-                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react19.SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react19.SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("label", { className: "col-start-3 flex w-[4.2rem] shrink-0 items-center gap-[0.35rem] justify-self-end text-zinc-400 sm:w-[4.9rem]", children: [
-            volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react19.VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react19.Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "sr-only", children: "Volume" }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "col-start-3 flex w-[4.2rem] shrink-0 items-center gap-[0.35rem] justify-self-end text-zinc-400 sm:w-[4.9rem]", children: [
+            volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react19.VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react19.Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sr-only", children: "Volume" }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               "input",
               {
                 "aria-label": "Volume",
@@ -3657,7 +3714,7 @@ function PlayerControls() {
 }
 
 // src/genre-tree/PlayerPanel.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var PANEL_ID = "player-panel";
 var DEFAULT_EXTENDED_WIDTH = "calc(100vw - var(--layout-center-left) - var(--layout-gutter))";
 function PlayerPanel({
@@ -3670,7 +3727,7 @@ function PlayerPanel({
   renderSongLink
 }) {
   const { playerTrackObject, retryPlayback } = (0, import_player13.usePlayer)();
-  const { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree24.useTrackListSidebarVisibility)();
+  const { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree26.useTrackListSidebarVisibility)();
   const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = (0, import_react19.useState)("");
   const loadedTrackTitle = playerTrackObject?.track.title;
   (0, import_react19.useEffect)(() => {
@@ -3697,7 +3754,7 @@ function PlayerPanel({
     onClick: () => setIsExtendRequested(true),
     expanded: false
   } : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
       id: PANEL_ID,
@@ -3710,8 +3767,8 @@ function PlayerPanel({
       ),
       style: isExtended ? { width: extendedWidth } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-          import_ui20.PanelEdgeTab,
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          import_ui21.PanelEdgeTab,
           {
             side: "right",
             edge: tabEdge,
@@ -3720,7 +3777,7 @@ function PlayerPanel({
             className: "absolute right-full top-1/2 -translate-y-1/2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
           "div",
           {
             className: (0, import_tailwind_merge.twMerge)(
@@ -3728,20 +3785,20 @@ function PlayerPanel({
               isExtended ? "flex-row" : "flex-col"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "relative w-full shrink-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_player13.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
-                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "relative w-full shrink-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_player13.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
+                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
                     playerTrackObject.loadError,
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: "ml-2 underline", onClick: () => {
+                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", className: "ml-2 underline", onClick: () => {
                       void retryPlayback();
                     }, children: "Retry" })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PlayerControls, {})
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PlayerControls, {})
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 TrackListSidebar,
                 {
                   layout: "inline",
@@ -3767,33 +3824,33 @@ function PlayerPanel({
 // src/genre-tree/Rating.tsx
 var import_uuid = require("uuid");
 var import_ai = require("react-icons/ai");
-var import_genre_tree25 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_genre_tree27 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Rating({ rating, handleChange }) {
   const instanceId = (0, import_uuid.v4)();
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "input",
       {
         id: `star-${instanceId}-${i}`,
         className: "w-6 h-6 opacity-0",
         type: "radio",
         name: "rating",
-        value: i === 0 ? import_genre_tree25.FORM_RATING_NULL_VALUE : i,
+        value: i === 0 ? import_genre_tree27.FORM_RATING_NULL_VALUE : i,
         checked: rating === (i === 0 ? null : i),
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         import_ai.AiOutlineStar,
         {
-          className: `w-7 h-7 absolute top-0 left-0 ${rating === import_genre_tree25.FORM_RATING_NULL_VALUE ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
+          className: `w-7 h-7 absolute top-0 left-0 ${rating === import_genre_tree27.FORM_RATING_NULL_VALUE ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "flex-grow w-8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "flex-grow w-8" }),
       " "
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_ai.AiFillStar,
       {
         className: `w-7 h-7 absolute top-0 left-0 ${(rating ?? -1) >= i ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
@@ -3823,12 +3880,18 @@ function Rating({ rating, handleChange }) {
   PopupButtons,
   PopupTitle,
   Rating,
+  SEARCH_FAILED_STATUS,
+  SearchBox,
   SpotifyAuthErrorPopup,
   Toast,
   TrackItem,
   TrackListSidebar,
   TrackPositionPlayPause,
   TrackUploadPopup,
-  useGenrePlaylistPlayback
+  searchStatus,
+  useArtistSearchGroup,
+  useGenrePlaylistPlayback,
+  useGenreRemoteSearchGroup,
+  useSongSearchGroup
 });
 //# sourceMappingURL=index.cjs.map