@behindthemusictree/app-kit-ui 31.0.0 → 32.0.0

package/dist/{chunk-AQASG5KT.js → chunk-QGGVPIXY.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk-DKQQLLMY.js";
 
 // src/genre-tree/GenreTreeView.tsx
-import { useCallback as useCallback6, useDeferredValue, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef4, useState as useState7 } from "react";
+import { useCallback as useCallback6, useDeferredValue, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef3, useState as useState8 } from "react";
 import { useIsMutating } from "@tanstack/react-query";
 import { Plus as Plus2 } from "lucide-react";
 import { Maximize2, Minimize2 } from "lucide-react";
@@ -916,7 +916,7 @@ function GenreActionBand({
 }
 
 // src/genre-tree/GenreDetailExtras.tsx
-import { Skeleton as Skeleton2 } from "@behindthemusictree/ui";
+import { PanelSection as PanelSection2, Skeleton as Skeleton2 } from "@behindthemusictree/ui";
 import { useFetchGenreOverview } from "@behindthemusictree/app-kit/genre-tree";
 
 // src/genre-tree/ClampedText.tsx
@@ -947,11 +947,11 @@ function ClampedText({ children, className: className2 = "" }) {
 }
 
 // src/genre-tree/GenrePlaylistTracks.tsx
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useState as useState5 } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { z } from "zod";
 import { FaPlay, FaPause } from "react-icons/fa";
-import { RingLoader, Skeleton } from "@behindthemusictree/ui";
+import { PanelSection, RingLoader, Skeleton } from "@behindthemusictree/ui";
 import { useSession } from "@behindthemusictree/app-kit/auth";
 import { useFetchWrapper } from "@behindthemusictree/app-kit/transport";
 import { PaginatedResponseSchema } from "@behindthemusictree/app-kit/transport";
@@ -1046,9 +1046,8 @@ function GenrePlaylistTracks({
     getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
     enabled: scope !== "me" || sessionRestored && !!session?.accessToken
   });
-  const sentinelRef = useRef3(null);
+  const [sentinel, setSentinel] = useState5(null);
   useEffect3(() => {
-    const sentinel = sentinelRef.current;
     if (!hasNextPage || isFetchingNextPage || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
       if (entries.some((entry) => entry.isIntersecting)) {
@@ -1057,7 +1056,7 @@ function GenrePlaylistTracks({
     });
     observer.observe(sentinel);
     return () => observer.disconnect();
-  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage, sentinel]);
   const pages = data?.pages ?? [];
   const tracks = pages.flatMap((page) => page.tracks);
   const total = pages[0]?.total ?? void 0;
@@ -1068,11 +1067,7 @@ function GenrePlaylistTracks({
       showPopup(/* @__PURE__ */ jsx13(InternalErrorPopup, { errorCode: ErrorCode3.CLIENT_UNKNOWN }));
     });
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "gtv-info-panel-children", children: [
-    /* @__PURE__ */ jsxs9("span", { className: "gtv-info-panel-children-title", children: [
-      capitalize(trackNoun.plural),
-      total !== void 0 && ` (${total})`
-    ] }),
+  return /* @__PURE__ */ jsx13(PanelSection, { title: `${capitalize(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ jsxs9("div", { children: [
     renderTracksToolbar?.(),
     isPending ? /* @__PURE__ */ jsx13(Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ jsxs9("p", { role: "alert", children: [
       "Couldn't load ",
@@ -1135,9 +1130,9 @@ function GenrePlaylistTracks({
           track.uuid
         );
       }),
-      hasNextPage && /* @__PURE__ */ jsx13("li", { ref: sentinelRef, "aria-hidden": "true", className: "h-4" })
+      hasNextPage && /* @__PURE__ */ jsx13("li", { ref: setSentinel, "aria-hidden": "true", className: "h-4" })
     ] })
-  ] });
+  ] }) });
 }
 
 // src/genre-tree/GenreDetailExtras.tsx
@@ -1168,10 +1163,7 @@ function GenreDetailExtras({
   );
   if (isPending) {
     return /* @__PURE__ */ jsxs10(Fragment6, { children: [
-      /* @__PURE__ */ jsxs10("div", { className: "gtv-info-panel-children", "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: [
-        /* @__PURE__ */ jsx14("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
-        /* @__PURE__ */ jsx14(Skeleton2, { className: "h-4 w-3/4" })
-      ] }),
+      /* @__PURE__ */ jsx14(PanelSection2, { title: "Summary", children: /* @__PURE__ */ jsx14("div", { "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: /* @__PURE__ */ jsx14(Skeleton2, { className: "h-4 w-3/4" }) }) }),
       family
     ] });
   }
@@ -1179,50 +1171,38 @@ function GenreDetailExtras({
   const { summary, summarySourceUrl, essentialSongs } = overview;
   const wikidataUrl = wikidataId ? `https://www.wikidata.org/wiki/${encodeURIComponent(wikidataId)}` : null;
   return /* @__PURE__ */ jsxs10(Fragment6, { children: [
-    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ jsxs10("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ jsx14("span", { className: "gtv-info-panel-children-title", children: "Links" }),
-      /* @__PURE__ */ jsxs10("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs", children: [
-        summarySourceUrl && /* @__PURE__ */ jsxs10(
-          "a",
-          {
-            href: summarySourceUrl,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
-            children: [
-              /* @__PURE__ */ jsx14(SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
-              "Wikipedia"
-            ]
-          }
-        ),
-        wikidataUrl && /* @__PURE__ */ jsxs10(
-          "a",
-          {
-            href: wikidataUrl,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
-            children: [
-              /* @__PURE__ */ jsx14(SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
-              "Wikidata"
-            ]
-          }
-        )
-      ] })
-    ] }),
-    renderSummary ? renderSummary(overview) : /* @__PURE__ */ jsxs10("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ jsx14("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
-      /* @__PURE__ */ jsx14(ClampedText, { className: "mt-1", children: summary ?? "\u2014" }, genreUuid)
-    ] }),
+    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ jsx14(PanelSection2, { title: "Links", children: /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--color-text)]", children: [
+      summarySourceUrl && /* @__PURE__ */ jsxs10(
+        "a",
+        {
+          href: summarySourceUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
+          children: [
+            /* @__PURE__ */ jsx14(SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            "Wikipedia"
+          ]
+        }
+      ),
+      wikidataUrl && /* @__PURE__ */ jsxs10(
+        "a",
+        {
+          href: wikidataUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
+          children: [
+            /* @__PURE__ */ jsx14(SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            "Wikidata"
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx14(PanelSection2, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ jsx14(ClampedText, { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
     family,
     renderGenreDetailExtras?.(overview),
-    renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && /* @__PURE__ */ jsxs10("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ jsxs10("span", { className: "gtv-info-panel-children-title", children: [
-        "Essential ",
-        trackNoun.plural
-      ] }),
-      essentialSongs.length > 0 ? /* @__PURE__ */ jsx14("ul", { className: "mt-1 divide-y divide-[var(--color-border)]", children: essentialSongs.map((track) => /* @__PURE__ */ jsx14("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ jsx14("p", { className: "mt-1", children: "\u2014" })
-    ] }),
+    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ jsx14(PanelSection2, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ jsx14("ul", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ jsx14("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ jsx14("p", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: "\u2014" }) }),
     /* @__PURE__ */ jsx14(
       GenrePlaylistTracks,
       {
@@ -1453,7 +1433,7 @@ function ArtistPhoto({ image, name }) {
 }
 
 // src/genre-tree/artist/ArtistMembers.tsx
-import { PanelGroup, PanelSection } from "@behindthemusictree/ui";
+import { PanelGroup, PanelSection as PanelSection3 } from "@behindthemusictree/ui";
 import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function MembershipList({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
@@ -1478,7 +1458,7 @@ 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__ */ jsxs14(PanelSection, { title, children: [
+  return /* @__PURE__ */ jsxs14(PanelSection3, { title, children: [
     /* @__PURE__ */ jsx20(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
     /* @__PURE__ */ jsx20(
       MembershipList,
@@ -1492,7 +1472,7 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
 }
 
 // src/genre-tree/artist/ArtistDiscography.tsx
-import { PanelGroup as PanelGroup2, PanelSection as PanelSection2 } from "@behindthemusictree/ui";
+import { PanelGroup as PanelGroup2, PanelSection as PanelSection4 } from "@behindthemusictree/ui";
 import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var GROUPS = ["Albums", "EPs", "Singles", "Live", "Compilations", "Other"];
 var PRIMARY_GROUPS = { album: "Albums", ep: "EPs", single: "Singles" };
@@ -1513,7 +1493,7 @@ function byYear(a, b) {
 function ArtistDiscography({ albums }) {
   if (albums.length === 0) return null;
   const sorted = [...albums].sort(byYear);
-  return /* @__PURE__ */ jsx21(PanelSection2, { title: "Discography", children: GROUPS.map((group) => {
+  return /* @__PURE__ */ jsx21(PanelSection4, { title: "Discography", children: GROUPS.map((group) => {
     const groupAlbums = sorted.filter((album) => discographyGroup(album) === group);
     if (groupAlbums.length === 0) return null;
     return /* @__PURE__ */ jsx21(PanelGroup2, { title: group, children: /* @__PURE__ */ jsx21("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ jsxs15("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
@@ -1524,10 +1504,10 @@ function ArtistDiscography({ albums }) {
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { keepPreviousData } from "@tanstack/react-query";
 import { Play as Play2 } from "lucide-react";
-import { Pagination, PanelSection as PanelSection3, Skeleton as Skeleton3 } from "@behindthemusictree/ui";
+import { Pagination, PanelSection as PanelSection5, Skeleton as Skeleton3 } from "@behindthemusictree/ui";
 import { usePlayer as usePlayer8 } from "@behindthemusictree/app-kit/player";
 import {
   SongDetailedSchema as SongDetailedSchema2,
@@ -1669,8 +1649,8 @@ var SORTS = [
   { ordering: "-albumYear", label: "Year" }
 ];
 function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLink }) {
-  const [page, setPage] = useState5(1);
-  const [ordering, setOrdering] = useState5("title");
+  const [page, setPage] = useState6(1);
+  const [ordering, setOrdering] = useState6("title");
   const { fetch } = useFetchWrapper2(getBackendBaseUrl);
   const { playNewTrackListFromArtist } = useTrackList4();
   const { playerTrackObject } = usePlayer8();
@@ -1695,7 +1675,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
     event.stopPropagation();
     void play(song.uuid);
   };
-  return /* @__PURE__ */ jsx24(PanelSection3, { title: "Songs", children: isPending ? /* @__PURE__ */ jsx24(Skeleton3, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ jsx24("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ jsx24("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ jsxs18(Fragment8, { children: [
+  return /* @__PURE__ */ jsx24(PanelSection5, { title: "Songs", children: isPending ? /* @__PURE__ */ jsx24(Skeleton3, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ jsx24("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ jsx24("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ jsxs18(Fragment8, { children: [
     /* @__PURE__ */ jsxs18("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
       /* @__PURE__ */ jsxs18(
         "button",
@@ -1816,9 +1796,9 @@ import {
 } from "@behindthemusictree/app-kit/genre-tree";
 
 // src/genre-tree/song/SongPanelContent.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { Pause as Pause2, Play as Play3 } from "lucide-react";
-import { FieldList as FieldList2, PanelSection as PanelSection4, Skeleton as Skeleton5 } from "@behindthemusictree/ui";
+import { FieldList as FieldList2, PanelSection as PanelSection6, Skeleton as Skeleton5 } from "@behindthemusictree/ui";
 import { PlayStates as PlayStates3, usePlayer as usePlayer9 } from "@behindthemusictree/app-kit/player";
 import {
   ArtistNames as ArtistNames3,
@@ -1832,7 +1812,7 @@ 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] = useState6(false);
+  const [open, setOpen] = useState7(false);
   const history = useSongHistory(uuid, getBackendBaseUrl, open);
   let body = null;
   if (history.status === "loading") body = /* @__PURE__ */ jsx26(Skeleton5, { className: "h-10", "aria-busy": "true" });
@@ -1941,7 +1921,7 @@ function SongPanelContent({
     ] }) }),
     song.artists && song.artists.length > 0 && /* @__PURE__ */ jsx26("p", { className: "px-6 pt-2.5 text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsx26(ArtistNames3, { artists: song.artists, renderArtistLink }) }),
     /* @__PURE__ */ jsx26(FieldList2, { items: fields }),
-    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ jsx26(PanelSection4, { title: "Essential in", children: /* @__PURE__ */ jsx26("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ jsx26("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
+    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ jsx26(PanelSection6, { title: "Essential in", children: /* @__PURE__ */ jsx26("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ jsx26("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
     /* @__PURE__ */ jsx26(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
   ] });
 }
@@ -2093,19 +2073,19 @@ function GenreTreeView({
   placement = "default",
   ...focus
 }) {
-  const getShareUrlRef = useRef4(getShareUrl);
+  const getShareUrlRef = useRef3(getShareUrl);
   getShareUrlRef.current = getShareUrl;
-  const [internalArtistUuid, setInternalArtistUuid] = useState7(null);
+  const [internalArtistUuid, setInternalArtistUuid] = useState8(null);
   const isArtistControlled = controlledArtistUuid !== void 0;
   const artistUuid = isArtistControlled ? controlledArtistUuid : internalArtistUuid;
-  const [internalSongUuid, setInternalSongUuid] = useState7(null);
+  const [internalSongUuid, setInternalSongUuid] = useState8(null);
   const isSongControlled = controlledSongUuid !== void 0;
   const songUuid = isSongControlled ? controlledSongUuid : internalSongUuid;
   const changeSong = (uuid) => {
     if (!isSongControlled) setInternalSongUuid(uuid);
     onSongUuidChange?.(uuid);
   };
-  const [internalSizeMetric, setInternalSizeMetric] = useState7("songs");
+  const [internalSizeMetric, setInternalSizeMetric] = useState8("songs");
   const sizeMetric = controlledSizeMetric ?? internalSizeMetric;
   const deferredSizeMetric = useDeferredValue(sizeMetric);
   const changeSizeMetric = (metric) => {
@@ -2144,7 +2124,7 @@ function GenreTreeView({
     artistUuid
   });
   const restoreRevision = viewportRestore?.revision;
-  const [stackedRestoreOwner, setStackedRestoreOwner] = useState7({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
+  const [stackedRestoreOwner, setStackedRestoreOwner] = useState8({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
   let restoreRootUuid = stackedRestoreOwner.rootUuid;
   if (stackedRestoreOwner.revision !== restoreRevision) {
     restoreRootUuid = selectedGenrePlaylist?.root.uuid;
@@ -2175,14 +2155,14 @@ function GenreTreeView({
     if (selectedNodeId !== null) clearSelection();
     changeSong(uuid);
   };
-  const openSongRef = useRef4(openSong);
+  const openSongRef = useRef3(openSong);
   openSongRef.current = openSong;
   const resolvedRenderSongLink = useCallback6(
     (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ jsx29("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
     [renderSongLink]
   );
-  const [expandedSongUuid, setExpandedSongUuid] = useState7(null);
-  const [expandedArtistUuid, setExpandedArtistUuid] = useState7(null);
+  const [expandedSongUuid, setExpandedSongUuid] = useState8(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = useState8(null);
   const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
   const songBaseUrl = getBackendBaseUrl;
   const artistPanel = useArtistPanel({
@@ -2231,8 +2211,8 @@ function GenreTreeView({
   const builtInSongPanel = overlayPanel || hasSelectedGenreNode ? void 0 : songPanel;
   const builtInArtistPanel = overlayPanel || hasSelectedGenreNode || builtInSongPanel ? void 0 : artistPanel;
   const builtInPanel = builtInSongPanel ?? builtInArtistPanel;
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState7(false);
-  const [uncontrolledExpanded, setUncontrolledExpanded] = useState7(false);
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState8(false);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState8(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
   const isExpanded = expanded ?? uncontrolledExpanded;
   const changeCollapsed = (next) => {
@@ -2246,15 +2226,15 @@ function GenreTreeView({
   useEffect5(() => {
     setUncontrolledCollapsed(false);
   }, [selectedNodeId, artistUuid, songUuid]);
-  const [isWheelRevealed, setIsWheelRevealed] = useState7(false);
+  const [isWheelRevealed, setIsWheelRevealed] = useState8(false);
   const usesHandoff = viewMode === "wheel" || viewMode === "pop-core";
   const isTreeReady = !isLoading && (!usesHandoff || isWheelRevealed);
-  const [resolveStyle, setResolveStyle] = useState7(null);
+  const [resolveStyle, setResolveStyle] = useState8(null);
   const handleNodeStyleResolverChange = useCallback6(
     (resolver) => setResolveStyle(() => resolver),
     []
   );
-  const panelRef = useRef4(null);
+  const panelRef = useRef3(null);
   const obscuredInset = useObscuredInset(panelRef);
   const hostPanel = { obscuredInset, onNodeStyleResolverChange: handleNodeStyleResolverChange };
   const nodeMetric = isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric;
@@ -2264,7 +2244,7 @@ function GenreTreeView({
     !overlayPanel && hasSelectedGenreNode ? selectedNodeId : null,
     resolveStyle
   );
-  const [selectionHistory, setSelectionHistory] = useState7({
+  const [selectionHistory, setSelectionHistory] = useState8({
     current: selectedNodeId,
     previous: null
   });
@@ -2277,7 +2257,7 @@ function GenreTreeView({
   const previousPlaylist = selectionHistory.previous !== null && selectionHistory.previous !== selectedNodeId ? genrePlaylistByNodeId.get(selectionHistory.previous) : void 0;
   const handlePrevious = previousPlaylist && visibleGenrePlaylists.includes(previousPlaylist) ? () => handleGenreSearchSelect(previousPlaylist) : void 0;
   const { showPopup, hidePopup } = usePopup5();
-  const [searchText, setSearchText] = useState7("");
+  const [searchText, setSearchText] = useState8("");
   const artistSearchResult = useArtistSearch(artistBaseUrl, artistSearch ? searchText : "");
   const artistGroup = artistSearch ? {
     key: "artists",
@@ -2339,7 +2319,7 @@ function GenreTreeView({
   const handleGenreSearchZoomIn = () => {
     if (selectedUuid) focus.onFocusGenreChange?.(selectedUuid, "zoom-in");
   };
-  const zoomInRef = useRef4(void 0);
+  const zoomInRef = useRef3(void 0);
   zoomInRef.current = canZoomIn ? handleGenreSearchZoomIn : void 0;
   const selectGenreFromPanel = (nodeId) => {
     const genrePlaylist = genrePlaylistByNodeId.get(nodeId);
@@ -2868,7 +2848,7 @@ import {
 } from "@behindthemusictree/genre-tree-view";
 
 // src/genre-tree/track-list-sidebar/TrackListSidebar.tsx
-import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useRef as useRef5 } from "react";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useRef as useRef4 } from "react";
 import { ListMusic } from "lucide-react";
 import { useTrackList as useTrackList6 } from "@behindthemusictree/app-kit/genre-tree";
 import { TrackListOriginType as TrackListOriginType2 } from "@behindthemusictree/app-kit/genre-tree";
@@ -2888,14 +2868,14 @@ function TrackListSidebar({
 }) {
   const { trackList, loadMore, autoAdvanceScrollRequest } = useTrackList6();
   const trackNoun = useTrackNoun3();
-  const trackListRef = useRef5(null);
-  const previousOriginRef = useRef5(trackList?.origin ?? null);
-  const handledAutoAdvanceRequestIdRef = useRef5(null);
-  const shouldFollowPlaybackRef = useRef5(true);
-  const programmaticScrollTopRef = useRef5(null);
-  const userScrollIntentRef = useRef5(false);
-  const userScrollIntentTimerRef = useRef5(null);
-  const loadMoreSentinelRef = useRef5(null);
+  const trackListRef = useRef4(null);
+  const previousOriginRef = useRef4(trackList?.origin ?? null);
+  const handledAutoAdvanceRequestIdRef = useRef4(null);
+  const shouldFollowPlaybackRef = useRef4(true);
+  const programmaticScrollTopRef = useRef4(null);
+  const userScrollIntentRef = useRef4(false);
+  const userScrollIntentTimerRef = useRef4(null);
+  const loadMoreSentinelRef = useRef4(null);
   const hasMore = !!trackList && trackList.nextPage !== null;
   useEffect6(() => {
     const sentinel = loadMoreSentinelRef.current;
@@ -3037,7 +3017,7 @@ function TrackListSidebar({
 }
 
 // src/genre-tree/PlayerPanel.tsx
-import { useEffect as useEffect7, useState as useState8 } from "react";
+import { useEffect as useEffect7, useState as useState9 } from "react";
 import { twMerge } from "tailwind-merge";
 import {
   usePlayer as usePlayer11,
@@ -3173,12 +3153,12 @@ function PlayerPanel({
 }) {
   const { playerTrackObject } = usePlayer11();
   const { toggleTrackListSidebar, isTrackListSidebarVisible } = useTrackListSidebarVisibility();
-  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = useState8("");
+  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = useState9("");
   const loadedTrackTitle = playerTrackObject?.track.title;
   useEffect7(() => {
     if (loadedTrackTitle) setLastLoadedTrackTitle(loadedTrackTitle);
   }, [loadedTrackTitle]);
-  const [uncontrolledExtended, setUncontrolledExtended] = useState8(false);
+  const [uncontrolledExtended, setUncontrolledExtended] = useState9(false);
   const isExtendRequested = expanded ?? uncontrolledExtended;
   const setIsExtendRequested = (next) => {
     setUncontrolledExtended(next);
@@ -3317,4 +3297,4 @@ export {
   GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
   GenreTreeOutlineSkeleton
 };
-//# sourceMappingURL=chunk-AQASG5KT.js.map
+//# sourceMappingURL=chunk-QGGVPIXY.js.map