@behindthemusictree/app-kit-ui 28.0.2 → 29.0.0

package/dist/{chunk-5PQWJRDZ.js → chunk-TFLX6C5Q.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 useState5 } from "react";
+import { useCallback as useCallback6, useDeferredValue, useEffect as useEffect6, useMemo as useMemo7, useRef as useRef4, useState as useState5 } from "react";
 import { useIsMutating } from "@tanstack/react-query";
 import { Plus as Plus2 } from "lucide-react";
 import { IconTextButton, Button, SegmentedControl as SegmentedControl2 } from "@behindthemusictree/ui";
@@ -17,429 +17,108 @@ import {
   useArtistSearch
 } from "@behindthemusictree/app-kit/genre-tree";
 import { useGenreTreeViewState, useArtist as useArtist2, useUpdateGenre as useUpdateGenre2, genreUpdateMutationKey } from "@behindthemusictree/app-kit/genre-tree";
-import { usePlayer as usePlayer8 } from "@behindthemusictree/app-kit/player";
 import { usePopup as usePopup5 } from "@behindthemusictree/app-kit/popup";
 
-// src/genre-tree/GenreDetailExtras.tsx
-import { Skeleton as Skeleton2 } from "@behindthemusictree/ui";
-import { useFetchGenreOverview } from "@behindthemusictree/app-kit/genre-tree";
-
-// src/genre-tree/ClampedText.tsx
-import { useLayoutEffect, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function ClampedText({ children, className: className2 = "" }) {
-  const ref = useRef(null);
-  const [expanded, setExpanded] = useState(false);
-  const [overflows, setOverflows] = useState(false);
-  useLayoutEffect(() => {
-    const element = ref.current;
-    if (!element || expanded) return;
-    setOverflows(element.scrollHeight > element.clientHeight);
-  }, [children, expanded]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("p", { ref, className: `${className2} ${expanded ? "" : "line-clamp-3"}`, children }),
-    (overflows || expanded) && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-expanded": expanded,
-        onClick: () => setExpanded((value) => !value),
-        className: "mt-1 text-xs text-[var(--color-text-muted)] underline hover:text-[var(--color-text)]",
-        children: expanded ? "Show less" : "Show more"
-      }
-    )
-  ] });
-}
-
-// src/genre-tree/GenrePlaylistTracks.tsx
-import { useEffect, useRef as useRef2 } 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 { useSession } from "@behindthemusictree/app-kit/auth";
-import { useFetchWrapper } from "@behindthemusictree/app-kit/transport";
-import { PaginatedResponseSchema } from "@behindthemusictree/app-kit/transport";
-import { parseWithLog } from "@behindthemusictree/app-kit/transport";
+// src/genre-tree/playlist-tree/TreePerRoot.tsx
+import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import {
+  GenreTree,
+  getGenreTreeColor
+} from "@behindthemusictree/genre-tree-view";
 import { usePlayer } from "@behindthemusictree/app-kit/player";
-import { PlayStates } from "@behindthemusictree/app-kit/player";
 import { usePopup } from "@behindthemusictree/app-kit/popup";
 import { ErrorCode } from "@behindthemusictree/app-kit/transport";
-import { genrePlaylistQueryKeys } from "@behindthemusictree/app-kit/genre-tree";
-import { libraryEndpoints, libraryQueryKeys } from "@behindthemusictree/app-kit/genre-tree";
-import { isSong, songUnplayableReason, SongDetailedSchema } from "@behindthemusictree/app-kit/genre-tree";
-import { useTrackList } from "@behindthemusictree/app-kit/genre-tree";
 
-// src/genre-tree/MusicBrainzRecordingLink.tsx
-import { musicBrainzRecordingUrl } from "@behindthemusictree/app-kit/genre-tree";
-import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
-function MusicBrainzRecordingLink({
-  song,
-  children,
-  className: className2 = ""
+// src/genre-tree/playlist-tree/useGenrePlaylistPlayback.ts
+import { useCallback, useMemo } from "react";
+import {
+  TrackListOriginType,
+  useTrackList
+} from "@behindthemusictree/app-kit/genre-tree";
+function useGenrePlaylistPlayback({
+  scope,
+  genrePlaylists,
+  artist = null
 }) {
-  const url = musicBrainzRecordingUrl(song);
-  if (!url) return /* @__PURE__ */ jsx2(Fragment2, { children });
-  return /* @__PURE__ */ jsx2(
-    "a",
-    {
-      href: url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      "aria-label": `View ${song.title} on MusicBrainz`,
-      className: className2,
-      onClick: (event) => event.stopPropagation(),
-      children
-    }
+  const { trackList, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = useTrackList();
+  const origin = trackList?.origin;
+  const playingNodeId = useMemo(() => {
+    if (!origin) return null;
+    if (!artist) return origin.type === TrackListOriginType.GENRE_PLAYLIST ? origin.uuid : null;
+    if (origin.type !== TrackListOriginType.ARTIST || origin.uuid !== artist.uuid) return null;
+    const { genreUuid } = origin;
+    return genreUuid ? genrePlaylists.find((gp) => gp.criteria?.uuid === genreUuid)?.uuid ?? null : null;
+  }, [origin, artist, genrePlaylists]);
+  const play = useCallback(
+    async (genrePlaylist) => {
+      if (!artist) return playNewTrackListFromGenrePlaylist(genrePlaylist, scope);
+      if (!genrePlaylist.criteria) return;
+      return playNewTrackListFromArtist(artist, scope, { ordering: "title", genreUuid: genrePlaylist.criteria.uuid });
+    },
+    [artist, scope, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist]
   );
+  return useMemo(() => ({ playingNodeId, play }), [playingNodeId, play]);
 }
 
-// src/genre-tree/GenrePlaylistTracks.tsx
-import { ArtistNames } from "@behindthemusictree/app-kit/genre-tree";
+// src/genre-tree/playlist-tree/TreePerRoot.tsx
 import { capitalize, useTrackNoun } from "@behindthemusictree/app-kit/track-noun";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var CATALOGUE_PAGE_SIZE = 100;
-var SongPageSchema = PaginatedResponseSchema(SongDetailedSchema).extend({
-  overallTotal: z.number().nullable(),
-  page: z.number().nullable(),
-  totalPages: z.number().nullable()
-});
-var TEXT_CELL = "min-w-0 flex-1 truncate [@container(min-width:40rem)]:flex [@container(min-width:40rem)]:gap-2";
-var TITLE_CELL = "[@container(min-width:40rem)]:flex-[2] [@container(min-width:40rem)]:truncate";
-var COLUMN_CELL = "[@container(min-width:40rem)]:flex-1 [@container(min-width:40rem)]:truncate";
-var ALBUM_CELL = `hidden [@container(min-width:40rem)]:block ${COLUMN_CELL}`;
-var SEPARATOR = "[@container(min-width:40rem)]:hidden";
-var nextCursor = (next) => {
-  const cursor = new URL(next).searchParams.get("cursor");
-  if (!cursor) throw new Error(`Songs next link has no cursor: ${next}`);
-  return cursor;
-};
-function GenrePlaylistTracks({
-  genreUuid,
-  genrePlaylist,
+import { jsx } from "react/jsx-runtime";
+function GenrePlaylistTreePerRoot({
   scope,
-  getBackendBaseUrl,
-  renderArtistLink,
-  renderSongLeading,
-  renderSongActions,
-  renderTracksToolbar,
-  artist = null
+  className: className2,
+  rootUuid,
+  genrePlaylistTreePerRoot,
+  handleGenreCreationAction,
+  handleGenreRenameAction,
+  additionalActions,
+  onNodeClick,
+  onNodeHover,
+  renderInfoPanelBody,
+  selectedNodeId,
+  onSelectedNodeChange,
+  hideInfoPanelClose,
+  hideInfoPanelTitle,
+  readOnly = false,
+  showToolbar,
+  wheelZoom,
+  defaultViewport,
+  viewportRestore,
+  onViewportChange,
+  playback,
+  ...infoPanelCuration
 }) {
-  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = useTrackList();
-  const { session, sessionRestored } = useSession();
-  const { playerTrackObject, playState, handlePlayPauseAction } = usePlayer();
-  const { showPopup } = usePopup();
+  const { isPlaying, setIsPlaying } = usePlayer();
+  const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists: genrePlaylistTreePerRoot });
+  const { playingNodeId, play } = playback ?? defaultPlayback;
   const trackNoun = useTrackNoun();
-  const { uuid } = genrePlaylist;
-  const { fetch } = useFetchWrapper(getBackendBaseUrl);
-  const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteQuery({
-    queryKey: scope === "me" ? genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid),
-    queryFn: async ({ pageParam }) => {
-      if (scope === "me") return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
-      const response = await fetch(
-        libraryEndpoints.reference.songs.list(),
-        true,
-        false,
-        {},
-        { genre: genreUuid, ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
-      );
-      const parsed = parseWithLog(SongPageSchema, response, "GenrePlaylistTracks");
-      return { tracks: parsed.results, total: parsed.overallTotal, nextPage: parsed.next ? nextCursor(parsed.next) : null };
-    },
-    initialPageParam: scope === "me" ? 1 : "",
-    getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
-    enabled: scope !== "me" || sessionRestored && !!session?.accessToken
-  });
-  const sentinelRef = useRef2(null);
-  useEffect(() => {
-    const sentinel = sentinelRef.current;
-    if (!hasNextPage || isFetchingNextPage || !sentinel) return;
-    const observer = new IntersectionObserver((entries) => {
-      if (entries.some((entry) => entry.isIntersecting)) {
-        void fetchNextPage();
-      }
-    });
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
-  const pages = data?.pages ?? [];
-  const tracks = pages.flatMap((page) => page.tracks);
-  const total = pages[0]?.total ?? void 0;
-  const play = (startSongUuid) => {
-    const started = artist ? playNewTrackListFromArtist(artist, scope, { startSongUuid, ordering: "title", genreUuid }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
-    started.catch((error) => {
-      console.error("Failed to play genre playlist:", error);
-      showPopup(/* @__PURE__ */ jsx3(InternalErrorPopup, { errorCode: ErrorCode.CLIENT_UNKNOWN }));
-    });
-  };
-  return /* @__PURE__ */ jsxs2("div", { className: "gtv-info-panel-children", children: [
-    /* @__PURE__ */ jsxs2("span", { className: "gtv-info-panel-children-title", children: [
-      capitalize(trackNoun.plural),
-      total !== void 0 && ` (${total})`
-    ] }),
-    renderTracksToolbar?.(),
-    isPending ? /* @__PURE__ */ jsx3(Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ jsxs2("p", { role: "alert", children: [
-      "Couldn't load ",
-      trackNoun.plural,
-      ".",
-      " ",
-      /* @__PURE__ */ jsx3("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
-    ] }) : tracks.length === 0 ? /* @__PURE__ */ jsx3("p", { children: "\u2014" }) : /* @__PURE__ */ jsxs2("ul", { className: "mt-1 max-h-64 overflow-y-auto text-[0.8125rem] leading-[1.45] [container-type:inline-size]", "aria-label": `${genrePlaylist.name} ${trackNoun.plural}`, children: [
-      tracks.map((track, index) => {
-        const label = track.artists?.length ? `${track.title} \u2014 ${track.artists.map((artist2) => artist2.name).join(", ")}` : track.title;
-        const isCurrent = playerTrackObject?.track.id === track.uuid;
-        const isPlaying = isCurrent && playState === PlayStates.PLAYING;
-        const text = /* @__PURE__ */ jsxs2("span", { className: TEXT_CELL, children: [
-          /* @__PURE__ */ jsx3("span", { className: TITLE_CELL, children: isSong(track) ? /* @__PURE__ */ jsx3(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
-          track.artists?.length ? /* @__PURE__ */ jsx3("span", { className: SEPARATOR, children: " \u2014 " }) : null,
-          /* @__PURE__ */ jsx3("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ jsx3(ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
-          track.album && /* @__PURE__ */ jsx3("span", { className: ALBUM_CELL, children: track.album.name })
-        ] });
-        const leading = renderSongLeading?.(track, index);
-        const actions = renderSongActions?.(track);
-        const isUnplayable = isSong(track) && songUnplayableReason(track) !== null;
-        if (isUnplayable) {
-          return /* @__PURE__ */ jsxs2("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", children: [
-            leading,
-            /* @__PURE__ */ jsx3(
-              "button",
-              {
-                type: "button",
-                disabled: true,
-                "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__ */ jsx3(FaPlay, { size: 10 })
-              }
-            ),
-            text,
-            actions
-          ] }, track.uuid);
-        }
-        return /* @__PURE__ */ jsxs2(
-          "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__ */ jsx3(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `${isPlaying ? "Pause" : "Play"} ${label}`,
-                  className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-full cursor-pointer group-hover:opacity-100 focus-visible:opacity-100 ${isCurrent && playState !== PlayStates.STOPPED ? "opacity-100" : "opacity-0 [@media(pointer:coarse)]:opacity-100"}`,
-                  onClick: () => isCurrent ? handlePlayPauseAction() : play(track.uuid),
-                  children: isCurrent && playState === PlayStates.LOADING ? /* @__PURE__ */ jsx3(RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ jsx3(FaPause, { size: 10 }) : /* @__PURE__ */ jsx3(FaPlay, { size: 10 })
-                }
-              ),
-              text,
-              actions
-            ]
-          },
-          track.uuid
-        );
-      }),
-      hasNextPage && /* @__PURE__ */ jsx3("li", { ref: sentinelRef, "aria-hidden": "true", className: "h-4" })
-    ] })
-  ] });
-}
-
-// src/genre-tree/GenreDetailExtras.tsx
-import { useTrackNoun as useTrackNoun2 } from "@behindthemusictree/app-kit/track-noun";
-import { SiWikidata, SiWikipedia } from "react-icons/si";
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function GenreDetailExtras({
-  genreUuid,
-  genrePlaylist,
-  wikidataId,
-  scope,
-  getBackendBaseUrl,
-  criteriaOverviewSchema,
-  renderGenreDetailExtras,
-  renderArtistLink,
-  renderSummary,
-  renderEssentialTracks,
-  family,
-  ...trackSlots
-}) {
-  const trackNoun = useTrackNoun2();
-  const { data: overview, isPending } = useFetchGenreOverview(
-    genreUuid,
-    scope,
-    getBackendBaseUrl,
-    criteriaOverviewSchema
-  );
-  if (isPending) {
-    return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-      /* @__PURE__ */ jsxs3("div", { className: "gtv-info-panel-children", "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: [
-        /* @__PURE__ */ jsx4("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
-        /* @__PURE__ */ jsx4(Skeleton2, { className: "h-4 w-3/4" })
-      ] }),
-      family
-    ] });
-  }
-  if (!overview) return /* @__PURE__ */ jsx4(Fragment3, { children: family });
-  const { summary, summarySourceUrl, essentialSongs } = overview;
-  const wikidataUrl = wikidataId ? `https://www.wikidata.org/wiki/${encodeURIComponent(wikidataId)}` : null;
-  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ jsxs3("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ jsx4("span", { className: "gtv-info-panel-children-title", children: "Links" }),
-      /* @__PURE__ */ jsxs3("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs", children: [
-        summarySourceUrl && /* @__PURE__ */ jsxs3(
-          "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__ */ jsx4(SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
-              "Wikipedia"
-            ]
-          }
-        ),
-        wikidataUrl && /* @__PURE__ */ jsxs3(
-          "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__ */ jsx4(SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
-              "Wikidata"
-            ]
-          }
-        )
-      ] })
-    ] }),
-    renderSummary ? renderSummary(overview) : /* @__PURE__ */ jsxs3("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ jsx4("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
-      /* @__PURE__ */ jsx4(ClampedText, { className: "mt-1", children: summary ?? "\u2014" }, genreUuid)
-    ] }),
-    family,
-    renderGenreDetailExtras?.(overview),
-    renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && /* @__PURE__ */ jsxs3("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ jsxs3("span", { className: "gtv-info-panel-children-title", children: [
-        "Essential ",
-        trackNoun.plural
-      ] }),
-      essentialSongs.length > 0 ? /* @__PURE__ */ jsx4("ul", { className: "mt-1 divide-y divide-[var(--color-border)]", children: essentialSongs.map((track) => /* @__PURE__ */ jsx4("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ jsx4("p", { className: "mt-1", children: "\u2014" })
-    ] }),
-    /* @__PURE__ */ jsx4(
-      GenrePlaylistTracks,
-      {
-        genreUuid,
-        genrePlaylist,
-        scope,
-        getBackendBaseUrl,
-        renderArtistLink,
-        ...trackSlots
-      }
-    )
-  ] });
-}
-
-// src/genre-tree/playlist-tree/TreePerRoot.tsx
-import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import {
-  GenreTree,
-  getGenreTreeColor
-} from "@behindthemusictree/genre-tree-view";
-import { usePlayer as usePlayer2 } from "@behindthemusictree/app-kit/player";
-import { usePopup as usePopup2 } from "@behindthemusictree/app-kit/popup";
-import { ErrorCode as ErrorCode2 } from "@behindthemusictree/app-kit/transport";
-
-// src/genre-tree/playlist-tree/useGenrePlaylistPlayback.ts
-import { useCallback, useMemo } from "react";
-import {
-  TrackListOriginType,
-  useTrackList as useTrackList2
-} from "@behindthemusictree/app-kit/genre-tree";
-function useGenrePlaylistPlayback({
-  scope,
-  genrePlaylists,
-  artist = null
-}) {
-  const { trackList, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = useTrackList2();
-  const origin = trackList?.origin;
-  const playingNodeId = useMemo(() => {
-    if (!origin) return null;
-    if (!artist) return origin.type === TrackListOriginType.GENRE_PLAYLIST ? origin.uuid : null;
-    if (origin.type !== TrackListOriginType.ARTIST || origin.uuid !== artist.uuid) return null;
-    const { genreUuid } = origin;
-    return genreUuid ? genrePlaylists.find((gp) => gp.criteria?.uuid === genreUuid)?.uuid ?? null : null;
-  }, [origin, artist, genrePlaylists]);
-  const play = useCallback(
-    async (genrePlaylist) => {
-      if (!artist) return playNewTrackListFromGenrePlaylist(genrePlaylist, scope);
-      if (!genrePlaylist.criteria) return;
-      return playNewTrackListFromArtist(artist, scope, { ordering: "title", genreUuid: genrePlaylist.criteria.uuid });
-    },
-    [artist, scope, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist]
-  );
-  return useMemo(() => ({ playingNodeId, play }), [playingNodeId, play]);
-}
-
-// src/genre-tree/playlist-tree/TreePerRoot.tsx
-import { capitalize as capitalize2, useTrackNoun as useTrackNoun3 } from "@behindthemusictree/app-kit/track-noun";
-import { jsx as jsx5 } from "react/jsx-runtime";
-function GenrePlaylistTreePerRoot({
-  scope,
-  className: className2,
-  rootUuid,
-  genrePlaylistTreePerRoot,
-  handleGenreCreationAction,
-  handleGenreRenameAction,
-  additionalActions,
-  onNodeClick,
-  onNodeHover,
-  renderInfoPanelBody,
-  selectedNodeId,
-  onSelectedNodeChange,
-  hideInfoPanelClose,
-  hideInfoPanelTitle,
-  readOnly = false,
-  showToolbar,
-  wheelZoom,
-  controlsOrientation,
-  defaultViewport,
-  onViewportChange,
-  playback,
-  ...infoPanelCuration
-}) {
-  const { isPlaying, setIsPlaying } = usePlayer2();
-  const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists: genrePlaylistTreePerRoot });
-  const { playingNodeId, play } = playback ?? defaultPlayback;
-  const trackNoun = useTrackNoun3();
-  const { showPopup } = usePopup2();
-  const nodes = useMemo2(
-    () => genrePlaylistTreePerRoot.map((genrePlaylist) => ({
-      id: genrePlaylist.uuid,
-      parentId: genrePlaylist.parent?.uuid ?? null,
-      name: genrePlaylist.name,
-      itemCount: genrePlaylist.tracksCount,
-      actionable: Boolean(genrePlaylist.criteria),
-      side: genrePlaylist.criteria?.side ?? void 0,
-      wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
-      umbrella: genrePlaylist.isUmbrella
-    })),
-    [genrePlaylistTreePerRoot]
-  );
-  const handlePlayPause = useCallback2(
-    (nodeId) => {
-      const genrePlaylist = genrePlaylistTreePerRoot.find((g) => g.uuid === nodeId);
-      if (!genrePlaylist) return;
-      if (nodeId === playingNodeId) {
-        setIsPlaying(!isPlaying);
-        return;
+  const { showPopup } = usePopup();
+  const nodes = useMemo2(
+    () => genrePlaylistTreePerRoot.map((genrePlaylist) => ({
+      id: genrePlaylist.uuid,
+      parentId: genrePlaylist.parent?.uuid ?? null,
+      name: genrePlaylist.name,
+      itemCount: genrePlaylist.tracksCount,
+      actionable: Boolean(genrePlaylist.criteria),
+      side: genrePlaylist.criteria?.side ?? void 0,
+      wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
+      umbrella: genrePlaylist.isUmbrella
+    })),
+    [genrePlaylistTreePerRoot]
+  );
+  const handlePlayPause = useCallback2(
+    (nodeId) => {
+      const genrePlaylist = genrePlaylistTreePerRoot.find((g) => g.uuid === nodeId);
+      if (!genrePlaylist) return;
+      if (nodeId === playingNodeId) {
+        setIsPlaying(!isPlaying);
+        return;
       }
       if (genrePlaylist.tracksCount === 0) {
         return;
       }
       play(genrePlaylist).catch((error) => {
         console.error("Failed to load genre playlist tracks:", error);
-        showPopup(/* @__PURE__ */ jsx5(InternalErrorPopup, { errorCode: ErrorCode2.CLIENT_UNKNOWN }));
+        showPopup(/* @__PURE__ */ jsx(InternalErrorPopup, { errorCode: ErrorCode.CLIENT_UNKNOWN }));
       });
     },
     [
@@ -471,12 +150,12 @@ function GenrePlaylistTreePerRoot({
     if (confirm(`Are you sure you want to delete "${node.name}"?`)) {
     }
   }, []);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx(
     GenreTree,
     {
       className: className2,
       nodes,
-      itemCountLabel: `${capitalize2(trackNoun.singular)} count`,
+      itemCountLabel: `${capitalize(trackNoun.singular)} count`,
       rootColor: getGenreTreeColor(rootUuid),
       playingNodeId,
       playState: isPlaying ? "playing" : "paused",
@@ -494,8 +173,8 @@ function GenrePlaylistTreePerRoot({
       hideInfoPanelTitle,
       showToolbar,
       wheelZoom,
-      controlsOrientation,
       defaultViewport,
+      viewportRestore,
       onViewportChange,
       ...infoPanelCuration,
       readOnly
@@ -508,9 +187,9 @@ import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
 import {
   GenreTreeWheel
 } from "@behindthemusictree/genre-tree-view";
-import { usePlayer as usePlayer3 } from "@behindthemusictree/app-kit/player";
-import { usePopup as usePopup3 } from "@behindthemusictree/app-kit/popup";
-import { ErrorCode as ErrorCode3 } from "@behindthemusictree/app-kit/transport";
+import { usePlayer as usePlayer2 } from "@behindthemusictree/app-kit/player";
+import { usePopup as usePopup2 } from "@behindthemusictree/app-kit/popup";
+import { ErrorCode as ErrorCode2 } from "@behindthemusictree/app-kit/transport";
 
 // src/genre-tree/playlist-tree/size-metric.ts
 var hasViewsCount = (genrePlaylists) => genrePlaylists.every((genrePlaylist) => genrePlaylist.viewsCount !== void 0);
@@ -523,8 +202,8 @@ var genrePlaylistSize = (genrePlaylist, metric) => {
 };
 
 // src/genre-tree/playlist-tree/TreeWheel.tsx
-import { capitalize as capitalize3, useTrackNoun as useTrackNoun4 } from "@behindthemusictree/app-kit/track-noun";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { capitalize as capitalize2, useTrackNoun as useTrackNoun2 } from "@behindthemusictree/app-kit/track-noun";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function GenrePlaylistTreeWheel({
   scope,
   className: className2,
@@ -542,20 +221,20 @@ function GenrePlaylistTreeWheel({
   readOnly = false,
   allowWheelRotation,
   showToolbar,
-  controlsOrientation,
   sizeMetric = "songs",
   floatingControlsLeading,
   busy,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   playback,
   ...infoPanelCuration
 }) {
-  const { isPlaying, setIsPlaying } = usePlayer3();
+  const { isPlaying, setIsPlaying } = usePlayer2();
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists });
   const { playingNodeId, play } = playback ?? defaultPlayback;
-  const trackNoun = useTrackNoun4();
-  const { showPopup } = usePopup3();
+  const trackNoun = useTrackNoun2();
+  const { showPopup } = usePopup2();
   const nodes = useMemo3(
     () => genrePlaylists.map((genrePlaylist) => ({
       id: genrePlaylist.uuid,
@@ -581,7 +260,7 @@ function GenrePlaylistTreeWheel({
       }
       play(genrePlaylist).catch((error) => {
         console.error("Failed to load genre playlist tracks:", error);
-        showPopup(/* @__PURE__ */ jsx6(InternalErrorPopup, { errorCode: ErrorCode3.CLIENT_UNKNOWN }));
+        showPopup(/* @__PURE__ */ jsx2(InternalErrorPopup, { errorCode: ErrorCode2.CLIENT_UNKNOWN }));
       });
     },
     [
@@ -613,12 +292,12 @@ function GenrePlaylistTreeWheel({
     if (confirm(`Are you sure you want to delete "${node.name}"?`)) {
     }
   }, []);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx2(
     GenreTreeWheel,
     {
       className: className2,
       nodes,
-      itemCountLabel: sizeMetric === "views" ? "Views" : `${capitalize3(trackNoun.singular)} count`,
+      itemCountLabel: sizeMetric === "views" ? "Views" : `${capitalize2(trackNoun.singular)} count`,
       playingNodeId,
       playState: isPlaying ? "playing" : "paused",
       onPlayPause: handlePlayPause,
@@ -635,10 +314,10 @@ function GenrePlaylistTreeWheel({
       hideInfoPanelTitle,
       allowWheelRotation,
       showToolbar,
-      controlsOrientation,
       floatingControlsLeading,
       busy,
       defaultViewport,
+      viewportRestore,
       onViewportChange,
       ...infoPanelCuration,
       readOnly
@@ -652,9 +331,9 @@ import {
   GenreTreeOutline,
   GenreTreeWheelRadialPopCore
 } from "@behindthemusictree/genre-tree-view";
-import { usePlayer as usePlayer4 } from "@behindthemusictree/app-kit/player";
-import { capitalize as capitalize4, useTrackNoun as useTrackNoun5 } from "@behindthemusictree/app-kit/track-noun";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { usePlayer as usePlayer3 } from "@behindthemusictree/app-kit/player";
+import { capitalize as capitalize3, useTrackNoun as useTrackNoun3 } from "@behindthemusictree/app-kit/track-noun";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function GenrePlaylistTreeWheelRadialPopCore(props) {
   const {
     scope,
@@ -673,12 +352,12 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     readOnly = false,
     allowWheelRotation,
     showToolbar,
-    controlsOrientation,
     sizeMetric = "songs",
     floatingControlsLeading,
     busy,
     outline = false,
     defaultViewport,
+    viewportRestore,
     onViewportChange,
     playback
   } = props;
@@ -691,10 +370,10 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     hideExpandButton: props.hideExpandButton,
     overlayPanel: props.overlayPanel
   };
-  const { isPlaying, setIsPlaying } = usePlayer4();
+  const { isPlaying, setIsPlaying } = usePlayer3();
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists });
   const { playingNodeId, play } = playback ?? defaultPlayback;
-  const trackNoun = useTrackNoun5();
+  const trackNoun = useTrackNoun3();
   const nodes = useMemo4(
     () => genrePlaylists.map((genrePlaylist) => ({
       id: genrePlaylist.uuid,
@@ -750,7 +429,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
   const treeProps = {
     className: className2,
     nodes,
-    itemCountLabel: sizeMetric === "views" ? "Views" : `${capitalize4(trackNoun.singular)} count`,
+    itemCountLabel: sizeMetric === "views" ? "Views" : `${capitalize3(trackNoun.singular)} count`,
     playingNodeId,
     playState: isPlaying ? "playing" : "paused",
     onPlayPause: handlePlayPause,
@@ -769,15 +448,15 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     ...infoPanelCuration,
     readOnly
   };
-  return outline ? /* @__PURE__ */ jsx7(GenreTreeOutline, { ...treeProps }) : /* @__PURE__ */ jsx7(
+  return outline ? /* @__PURE__ */ jsx3(GenreTreeOutline, { ...treeProps }) : /* @__PURE__ */ jsx3(
     GenreTreeWheelRadialPopCore,
     {
       ...treeProps,
       allowWheelRotation,
-      controlsOrientation,
       floatingControlsLeading,
       busy,
       defaultViewport,
+      viewportRestore,
       onViewportChange,
       ...focus.onFocusGenreChange ? { focusNodeId: focus.focusGenreUuid, onFocusChange: focus.onFocusGenreChange } : { focusNodeId: void 0, onFocusChange: void 0 }
     }
@@ -785,13 +464,13 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
 }
 
 // src/genre-tree/GenreTreeWheelHandoff.tsx
-import { useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
-  const [revealed, setRevealed] = useState2(false);
-  const onRevealedChangeRef = useRef3(onRevealedChange);
+  const [revealed, setRevealed] = useState(false);
+  const onRevealedChangeRef = useRef(onRevealedChange);
   onRevealedChangeRef.current = onRevealedChange;
-  useEffect2(() => {
+  useEffect(() => {
     let innerFrame = 0;
     const outerFrame = requestAnimationFrame(() => {
       innerFrame = requestAnimationFrame(() => {
@@ -805,8 +484,8 @@ function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
       cancelAnimationFrame(innerFrame);
     };
   }, []);
-  return /* @__PURE__ */ jsxs4("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ jsx4(
       "div",
       {
         className: "absolute inset-0 transition-opacity duration-150 ease-out",
@@ -815,7 +494,7 @@ function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
         children
       }
     ),
-    !revealed && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0", "aria-hidden": "true", children: skeleton })
+    !revealed && /* @__PURE__ */ jsx4("div", { className: "absolute inset-0", "aria-hidden": "true", children: skeleton })
   ] });
 }
 
@@ -823,7 +502,7 @@ function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
 import { ArrowLeft, LoaderCircle, Search, X } from "lucide-react";
 import { Input } from "@behindthemusictree/ui";
 import { useGenreSearch } from "@behindthemusictree/app-kit/genre-tree";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function GenreSearch({
   genrePlaylists,
   onSelect,
@@ -845,8 +524,8 @@ function GenreSearch({
   const loading = query !== "" && query !== selectedName && (extraResults?.loading ?? false);
   const showList = results.length > 0 || extraItems.length > 0;
   const heading = "px-3 pt-2 pb-1 text-xs font-medium uppercase text-[var(--color-text-muted)]";
-  return /* @__PURE__ */ jsxs5("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__ */ jsx9(
+  return /* @__PURE__ */ jsxs2("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__ */ jsx5(
       "button",
       {
         type: "button",
@@ -854,10 +533,10 @@ function GenreSearch({
         title: "Previous",
         className: "genre-search-previous absolute left-2 top-1/2 z-10 hidden 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__ */ jsx9(ArrowLeft, { "aria-hidden": "true", className: "w-4 h-4" })
+        children: /* @__PURE__ */ jsx5(ArrowLeft, { "aria-hidden": "true", className: "w-4 h-4" })
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx5(
       Input,
       {
         type: "text",
@@ -875,21 +554,21 @@ function GenreSearch({
         className: "h-[var(--layout-search-h,3rem)] 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"
       }
     ),
-    /* @__PURE__ */ jsxs5("div", { className: "absolute right-3 top-1/2 flex items-center -translate-y-1/2", children: [
-      /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsxs2("div", { className: "absolute right-3 top-1/2 flex items-center -translate-y-1/2", children: [
+      /* @__PURE__ */ jsxs2(
         "span",
         {
           "data-loading": loading,
           className: "relative p-2 text-[var(--color-text-muted)] pointer-events-none",
           children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx5(
               Search,
               {
                 "aria-hidden": "true",
                 className: `w-6 h-6 transition-opacity duration-200 motion-reduce:transition-none ${loading ? "opacity-0" : ""}`
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx5(
               LoaderCircle,
               {
                 "aria-hidden": "true",
@@ -899,7 +578,7 @@ function GenreSearch({
           ]
         }
       ),
-      canClear && /* @__PURE__ */ jsx9(
+      canClear && /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -909,14 +588,14 @@ function GenreSearch({
             clear();
             onQueryChange?.("");
           },
-          children: /* @__PURE__ */ jsx9(X, { "aria-hidden": "true", className: "w-6 h-6" })
+          children: /* @__PURE__ */ jsx5(X, { "aria-hidden": "true", className: "w-6 h-6" })
         }
       )
     ] }),
-    extraResults?.status && /* @__PURE__ */ jsx9("p", { role: "status", "aria-live": "polite", className: "sr-only", children: extraResults.status }),
-    showList && /* @__PURE__ */ jsxs5("ul", { className: "genre-search-results absolute z-40 w-full max-h-[min(16rem,50dvh)] mt-1 overflow-y-auto bg-[var(--color-surface)] border border-[var(--color-border)] rounded-xl shadow-md", children: [
-      extraResults && results.length > 0 && /* @__PURE__ */ jsx9("li", { className: heading, children: "Genres" }),
-      results.map((genrePlaylist) => /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsxs5(
+    extraResults?.status && /* @__PURE__ */ jsx5("p", { role: "status", "aria-live": "polite", className: "sr-only", children: extraResults.status }),
+    showList && /* @__PURE__ */ jsxs2("ul", { className: "genre-search-results absolute z-40 w-full max-h-[min(16rem,50dvh)] mt-1 overflow-y-auto bg-[var(--color-surface)] border border-[var(--color-border)] rounded-xl shadow-md", children: [
+      extraResults && results.length > 0 && /* @__PURE__ */ jsx5("li", { className: heading, children: "Genres" }),
+      results.map((genrePlaylist) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs2(
         "button",
         {
           type: "button",
@@ -927,12 +606,12 @@ function GenreSearch({
           },
           children: [
             genrePlaylist.name,
-            genrePlaylist.isUmbrella && /* @__PURE__ */ jsx9("span", { className: "ml-2 text-xs italic text-[var(--color-text-muted)]", children: "umbrella" })
+            genrePlaylist.isUmbrella && /* @__PURE__ */ jsx5("span", { className: "ml-2 text-xs italic text-[var(--color-text-muted)]", children: "umbrella" })
           ]
         }
       ) }, genrePlaylist.uuid)),
-      extraResults && extraItems.length > 0 && /* @__PURE__ */ jsx9("li", { className: heading, children: extraResults.label }),
-      extraItems.map((item) => /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsx9(
+      extraResults && extraItems.length > 0 && /* @__PURE__ */ jsx5("li", { className: heading, children: extraResults.label }),
+      extraItems.map((item) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -949,26 +628,29 @@ function GenreSearch({
   ] });
 }
 
+// src/genre-tree/GenreInfoPanelBody.tsx
+import { usePlayer as usePlayer5 } from "@behindthemusictree/app-kit/player";
+
 // src/genre-tree/GenreActionBand.tsx
 import { ArrowLeftRight, MoveUpRight, Pause, Pencil, Play, Plus, ZoomIn } from "lucide-react";
 
 // src/genre-tree/ShareActionButton.tsx
 import { Share2 as Share22 } from "lucide-react";
-import { usePopup as usePopup4 } from "@behindthemusictree/app-kit/popup";
+import { usePopup as usePopup3 } from "@behindthemusictree/app-kit/popup";
 
 // src/genre-tree/SharePopup.tsx
-import { useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo5, useState as useState2 } from "react";
 import { Link2, Share2 } from "lucide-react";
 import { FaWhatsapp } from "react-icons/fa";
 import { SiGmail } from "react-icons/si";
 
 // src/genre-tree/ShareDestinationButton.tsx
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var className = "group flex min-w-0 flex-1 flex-col items-center justify-center gap-1.5 rounded-xl px-2 py-2 text-xs text-[var(--color-text)] transition-colors hover:bg-[var(--color-surface-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50";
 function Contents({ icon, label }) {
-  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
-    /* @__PURE__ */ jsx10("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: icon }),
-    /* @__PURE__ */ jsx10("span", { className: "max-w-full truncate", children: label })
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx6("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__ */ jsx6("span", { className: "max-w-full truncate", children: label })
   ] });
 }
 function ShareDestinationButton({
@@ -980,29 +662,29 @@ function ShareDestinationButton({
   ariaLabel
 }) {
   if (href) {
-    return /* @__PURE__ */ jsx10("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className, children: /* @__PURE__ */ jsx10(Contents, { icon, label }) });
+    return /* @__PURE__ */ jsx6("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className, children: /* @__PURE__ */ jsx6(Contents, { icon, label }) });
   }
-  return /* @__PURE__ */ jsx10("button", { type: "button", onClick, disabled, "aria-label": ariaLabel, className, children: /* @__PURE__ */ jsx10(Contents, { icon, label }) });
+  return /* @__PURE__ */ jsx6("button", { type: "button", onClick, disabled, "aria-label": ariaLabel, className, children: /* @__PURE__ */ jsx6(Contents, { icon, label }) });
 }
 
 // src/genre-tree/SharePreviewCard.tsx
 import { Music2, UserRound } from "lucide-react";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function SharePreviewCard({ target, url }) {
   const Icon = target.kind === "genre" ? Music2 : UserRound;
   const typeLabel = target.kind === "genre" ? "Genre" : "Artist";
-  return /* @__PURE__ */ jsx11("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ jsxs7("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
-    /* @__PURE__ */ jsx11("div", { className: "flex w-28 shrink-0 items-center justify-center bg-[var(--color-primary)]/15 text-[var(--color-primary)]", children: /* @__PURE__ */ jsx11(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
-      /* @__PURE__ */ jsx11("span", { className: "text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
-      /* @__PURE__ */ jsx11("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
-      /* @__PURE__ */ jsx11("span", { className: "truncate text-sm text-[var(--color-primary)]", title: url, children: url })
+  return /* @__PURE__ */ jsx7("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ jsxs4("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
+    /* @__PURE__ */ jsx7("div", { className: "flex w-28 shrink-0 items-center justify-center bg-[var(--color-primary)]/15 text-[var(--color-primary)]", children: /* @__PURE__ */ jsx7(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
+      /* @__PURE__ */ jsx7("span", { className: "text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
+      /* @__PURE__ */ jsx7("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
+      /* @__PURE__ */ jsx7("span", { className: "truncate text-sm text-[var(--color-primary)]", title: url, children: url })
     ] })
   ] }) });
 }
 
 // src/genre-tree/SharePopup.tsx
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function resolveAbsoluteUrl(url) {
   try {
     const parsed = new URL(url, window.location.href);
@@ -1035,17 +717,17 @@ async function copyText(text) {
   }
 }
 function SharePopup({ target, url, onClose }) {
-  const [absoluteUrl, setAbsoluteUrl] = useState3(url);
-  const [copyStatus, setCopyStatus] = useState3("idle");
-  const [canUseNativeShare, setCanUseNativeShare] = useState3(false);
-  const [shareError, setShareError] = useState3(null);
-  const [toastId, setToastId] = useState3(0);
-  useEffect3(() => {
+  const [absoluteUrl, setAbsoluteUrl] = useState2(url);
+  const [copyStatus, setCopyStatus] = useState2("idle");
+  const [canUseNativeShare, setCanUseNativeShare] = useState2(false);
+  const [shareError, setShareError] = useState2(null);
+  const [toastId, setToastId] = useState2(0);
+  useEffect2(() => {
     setAbsoluteUrl(resolveAbsoluteUrl(url) ?? "");
     setCopyStatus("idle");
     setShareError(null);
   }, [url]);
-  useEffect3(() => {
+  useEffect2(() => {
     setCanUseNativeShare(typeof navigator !== "undefined" && typeof navigator.share === "function");
   }, []);
   const destinationUrls = useMemo5(() => {
@@ -1077,8 +759,8 @@ function SharePopup({ target, url, onClose }) {
       setShareError("Could not open the share options.");
     }
   };
-  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(
       BasePopup_default,
       {
         title: "Share",
@@ -1093,175 +775,550 @@ 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__ */ jsxs8("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsx12(SharePreviewCard, { target, url: absoluteUrl || url }),
-          /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-3 gap-1 rounded-3xl bg-[var(--color-surface)] p-3 sm:grid-cols-4", children: [
-            /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsx8(SharePreviewCard, { target, url: absoluteUrl || url }),
+          /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-3 gap-1 rounded-3xl bg-[var(--color-surface)] p-3 sm:grid-cols-4", children: [
+            /* @__PURE__ */ jsx8(
               ShareDestinationButton,
               {
                 label: "Copy Link",
-                icon: /* @__PURE__ */ jsx12(Link2, { "aria-hidden": "true", className: "h-6 w-6" }),
+                icon: /* @__PURE__ */ jsx8(Link2, { "aria-hidden": "true", className: "h-6 w-6" }),
                 onClick: () => void handleCopy(),
                 ariaLabel: "Copy link",
                 disabled: !absoluteUrl
               }
             ),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx8(
               ShareDestinationButton,
               {
                 label: "WhatsApp",
-                icon: /* @__PURE__ */ jsx12(FaWhatsapp, { "aria-hidden": "true", className: "h-9 w-9 text-[#25D366]" }),
+                icon: /* @__PURE__ */ jsx8(FaWhatsapp, { "aria-hidden": "true", className: "h-9 w-9 text-[#25D366]" }),
                 href: destinationUrls?.whatsapp,
                 ariaLabel: `Share ${target.name} via WhatsApp`,
                 disabled: !absoluteUrl
               }
             ),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx8(
               ShareDestinationButton,
               {
                 label: "Gmail",
-                icon: /* @__PURE__ */ jsx12(SiGmail, { "aria-hidden": "true", className: "h-8 w-8 text-[#EA4335]" }),
+                icon: /* @__PURE__ */ jsx8(SiGmail, { "aria-hidden": "true", className: "h-8 w-8 text-[#EA4335]" }),
                 href: destinationUrls?.gmail,
                 ariaLabel: `Email ${target.name} with Gmail`,
                 disabled: !absoluteUrl
               }
             ),
-            canUseNativeShare && /* @__PURE__ */ jsx12(
+            canUseNativeShare && /* @__PURE__ */ jsx8(
               ShareDestinationButton,
               {
                 label: "More",
-                icon: /* @__PURE__ */ jsx12(Share2, { "aria-hidden": "true", className: "h-6 w-6" }),
+                icon: /* @__PURE__ */ jsx8(Share2, { "aria-hidden": "true", className: "h-6 w-6" }),
                 onClick: () => void handleNativeShare(),
                 ariaLabel: "More sharing options",
                 disabled: !absoluteUrl
               }
             )
           ] }),
-          copyStatus === "failed" && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: "Could not copy the link." }),
-          shareError && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: shareError })
+          copyStatus === "failed" && /* @__PURE__ */ jsx8("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: "Could not copy the link." }),
+          shareError && /* @__PURE__ */ jsx8("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: shareError })
         ] })
       }
-    ),
-    toastId > 0 && /* @__PURE__ */ jsx12(Toast, { message: "Link copied", onClose: dismissToast }, toastId)
+    ),
+    toastId > 0 && /* @__PURE__ */ jsx8(Toast, { message: "Link copied", onClose: dismissToast }, toastId)
+  ] });
+}
+
+// src/genre-tree/ShareActionButton.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function ShareActionButton({ target, url }) {
+  const { showPopup, hidePopup } = usePopup3();
+  const openSharePopup = () => {
+    showPopup(/* @__PURE__ */ jsx9(SharePopup, { target, url, onClose: hidePopup }));
+  };
+  return /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      onClick: openSharePopup,
+      className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none",
+      "aria-label": `Share ${target.name}`,
+      title: `Share ${target.name}`,
+      children: [
+        /* @__PURE__ */ jsx9("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__ */ jsx9(Share22, { "aria-hidden": "true", className: "w-5 h-5" }) }),
+        "Share"
+      ]
+    }
+  );
+}
+
+// src/genre-tree/GenreActionBand.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function GenreActionBand({
+  node,
+  onPlayPause,
+  isPlaying = false,
+  onZoomIn,
+  onAddChild,
+  onRename,
+  onChangeParent,
+  side,
+  onToggleSide,
+  toggleSideDisabledReason,
+  additionalActions,
+  shareTarget,
+  shareUrl
+}) {
+  const items = [];
+  const adminItems = [];
+  if (onPlayPause) {
+    items.push({
+      key: "play-pause",
+      label: isPlaying ? "Pause" : "Play",
+      icon: isPlaying ? /* @__PURE__ */ jsx10(Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ jsx10(Play, { "aria-hidden": "true", className: "w-5 h-5" }),
+      onClick: onPlayPause
+    });
+  }
+  if (onZoomIn) {
+    items.push({
+      key: "zoom-in",
+      label: "Focus",
+      icon: /* @__PURE__ */ jsx10(ZoomIn, { "aria-hidden": "true", className: "w-5 h-5" }),
+      onClick: onZoomIn
+    });
+  }
+  if (onAddChild) {
+    adminItems.push({ key: "add-child", label: "Add", icon: /* @__PURE__ */ jsx10(Plus, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onAddChild });
+  }
+  if (onRename) {
+    adminItems.push({ key: "rename", label: "Rename", icon: /* @__PURE__ */ jsx10(Pencil, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onRename });
+  }
+  if (onChangeParent) {
+    adminItems.push({ key: "change-parent", label: "Parent", icon: /* @__PURE__ */ jsx10(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__ */ jsx10(ArrowLeftRight, { "aria-hidden": "true", className: "w-5 h-5" }),
+      onClick: onToggleSide,
+      disabled: !!toggleSideDisabledReason,
+      title: toggleSideDisabledReason
+    });
+  }
+  for (const action of additionalActions?.(node) ?? []) {
+    items.push({
+      key: action.key,
+      label: action.label(node),
+      icon: action.icon(node),
+      onClick: (event) => action.onClick(event, node),
+      disabled: action.enabled ? !action.enabled(node) : false
+    });
+  }
+  if (items.length === 0 && (!shareTarget || !shareUrl) && adminItems.length === 0) return null;
+  const renderItems = (list) => list.map((item) => /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type: "button",
+      disabled: item.disabled,
+      title: item.title,
+      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__ */ jsx10("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__ */ jsxs7("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: [
+    (items.length > 0 || shareTarget && shareUrl) && /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
+      renderItems(items),
+      shareTarget && shareUrl && /* @__PURE__ */ jsx10(ShareActionButton, { target: shareTarget, url: shareUrl })
+    ] }),
+    adminItems.length > 0 && /* @__PURE__ */ jsxs7(
+      "section",
+      {
+        "aria-label": "Admin actions",
+        className: `px-3.5 py-3 ${items.length > 0 ? "border-t border-[var(--color-border)]" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx10("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]", children: "Admin" }),
+          /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-1", children: renderItems(adminItems) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/genre-tree/GenreDetailExtras.tsx
+import { Skeleton as Skeleton2 } from "@behindthemusictree/ui";
+import { useFetchGenreOverview } from "@behindthemusictree/app-kit/genre-tree";
+
+// src/genre-tree/ClampedText.tsx
+import { useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function ClampedText({ children, className: className2 = "" }) {
+  const ref = useRef2(null);
+  const [expanded, setExpanded] = useState3(false);
+  const [overflows, setOverflows] = useState3(false);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element || expanded) return;
+    setOverflows(element.scrollHeight > element.clientHeight);
+  }, [children, expanded]);
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx11("p", { ref, className: `${className2} ${expanded ? "" : "line-clamp-3"}`, children }),
+    (overflows || expanded) && /* @__PURE__ */ jsx11(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": expanded,
+        onClick: () => setExpanded((value) => !value),
+        className: "mt-1 text-xs text-[var(--color-text-muted)] underline hover:text-[var(--color-text)]",
+        children: expanded ? "Show less" : "Show more"
+      }
+    )
+  ] });
+}
+
+// src/genre-tree/GenrePlaylistTracks.tsx
+import { useEffect as useEffect3, useRef as useRef3 } 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 { useSession } from "@behindthemusictree/app-kit/auth";
+import { useFetchWrapper } from "@behindthemusictree/app-kit/transport";
+import { PaginatedResponseSchema } from "@behindthemusictree/app-kit/transport";
+import { parseWithLog } from "@behindthemusictree/app-kit/transport";
+import { usePlayer as usePlayer4 } from "@behindthemusictree/app-kit/player";
+import { PlayStates } from "@behindthemusictree/app-kit/player";
+import { usePopup as usePopup4 } from "@behindthemusictree/app-kit/popup";
+import { ErrorCode as ErrorCode3 } from "@behindthemusictree/app-kit/transport";
+import { genrePlaylistQueryKeys } from "@behindthemusictree/app-kit/genre-tree";
+import { libraryEndpoints, libraryQueryKeys } from "@behindthemusictree/app-kit/genre-tree";
+import { isSong, songUnplayableReason, SongDetailedSchema } from "@behindthemusictree/app-kit/genre-tree";
+import { useTrackList as useTrackList2 } from "@behindthemusictree/app-kit/genre-tree";
+
+// src/genre-tree/MusicBrainzRecordingLink.tsx
+import { musicBrainzRecordingUrl } from "@behindthemusictree/app-kit/genre-tree";
+import { Fragment as Fragment4, jsx as jsx12 } from "react/jsx-runtime";
+function MusicBrainzRecordingLink({
+  song,
+  children,
+  className: className2 = ""
+}) {
+  const url = musicBrainzRecordingUrl(song);
+  if (!url) return /* @__PURE__ */ jsx12(Fragment4, { children });
+  return /* @__PURE__ */ jsx12(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": `View ${song.title} on MusicBrainz`,
+      className: className2,
+      onClick: (event) => event.stopPropagation(),
+      children
+    }
+  );
+}
+
+// src/genre-tree/GenrePlaylistTracks.tsx
+import { ArtistNames } from "@behindthemusictree/app-kit/genre-tree";
+import { capitalize as capitalize4, useTrackNoun as useTrackNoun4 } from "@behindthemusictree/app-kit/track-noun";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var CATALOGUE_PAGE_SIZE = 100;
+var SongPageSchema = PaginatedResponseSchema(SongDetailedSchema).extend({
+  overallTotal: z.number().nullable(),
+  page: z.number().nullable(),
+  totalPages: z.number().nullable()
+});
+var TEXT_CELL = "min-w-0 flex-1 truncate [@container(min-width:40rem)]:flex [@container(min-width:40rem)]:gap-2";
+var TITLE_CELL = "[@container(min-width:40rem)]:flex-[2] [@container(min-width:40rem)]:truncate";
+var COLUMN_CELL = "[@container(min-width:40rem)]:flex-1 [@container(min-width:40rem)]:truncate";
+var ALBUM_CELL = `hidden [@container(min-width:40rem)]:block ${COLUMN_CELL}`;
+var SEPARATOR = "[@container(min-width:40rem)]:hidden";
+var nextCursor = (next) => {
+  const cursor = new URL(next).searchParams.get("cursor");
+  if (!cursor) throw new Error(`Songs next link has no cursor: ${next}`);
+  return cursor;
+};
+function GenrePlaylistTracks({
+  genreUuid,
+  genrePlaylist,
+  scope,
+  getBackendBaseUrl,
+  renderArtistLink,
+  renderSongLeading,
+  renderSongActions,
+  renderTracksToolbar,
+  artist = null
+}) {
+  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = useTrackList2();
+  const { session, sessionRestored } = useSession();
+  const { playerTrackObject, playState, handlePlayPauseAction } = usePlayer4();
+  const { showPopup } = usePopup4();
+  const trackNoun = useTrackNoun4();
+  const { uuid } = genrePlaylist;
+  const { fetch } = useFetchWrapper(getBackendBaseUrl);
+  const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteQuery({
+    queryKey: scope === "me" ? genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid),
+    queryFn: async ({ pageParam }) => {
+      if (scope === "me") return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
+      const response = await fetch(
+        libraryEndpoints.reference.songs.list(),
+        true,
+        false,
+        {},
+        { genre: genreUuid, ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
+      );
+      const parsed = parseWithLog(SongPageSchema, response, "GenrePlaylistTracks");
+      return { tracks: parsed.results, total: parsed.overallTotal, nextPage: parsed.next ? nextCursor(parsed.next) : null };
+    },
+    initialPageParam: scope === "me" ? 1 : "",
+    getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
+    enabled: scope !== "me" || sessionRestored && !!session?.accessToken
+  });
+  const sentinelRef = useRef3(null);
+  useEffect3(() => {
+    const sentinel = sentinelRef.current;
+    if (!hasNextPage || isFetchingNextPage || !sentinel) return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        void fetchNextPage();
+      }
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+  const pages = data?.pages ?? [];
+  const tracks = pages.flatMap((page) => page.tracks);
+  const total = pages[0]?.total ?? void 0;
+  const play = (startSongUuid) => {
+    const started = artist ? playNewTrackListFromArtist(artist, scope, { startSongUuid, ordering: "title", genreUuid }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
+    started.catch((error) => {
+      console.error("Failed to play genre playlist:", error);
+      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: [
+      capitalize4(trackNoun.plural),
+      total !== void 0 && ` (${total})`
+    ] }),
+    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 ",
+      trackNoun.plural,
+      ".",
+      " ",
+      /* @__PURE__ */ jsx13("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
+    ] }) : tracks.length === 0 ? /* @__PURE__ */ jsx13("p", { children: "\u2014" }) : /* @__PURE__ */ jsxs9("ul", { className: "mt-1 max-h-64 overflow-y-auto text-[0.8125rem] leading-[1.45] [container-type:inline-size]", "aria-label": `${genrePlaylist.name} ${trackNoun.plural}`, children: [
+      tracks.map((track, index) => {
+        const label = track.artists?.length ? `${track.title} \u2014 ${track.artists.map((artist2) => artist2.name).join(", ")}` : track.title;
+        const isCurrent = playerTrackObject?.track.id === track.uuid;
+        const isPlaying = isCurrent && playState === PlayStates.PLAYING;
+        const text = /* @__PURE__ */ jsxs9("span", { className: TEXT_CELL, children: [
+          /* @__PURE__ */ jsx13("span", { className: TITLE_CELL, children: isSong(track) ? /* @__PURE__ */ jsx13(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
+          track.artists?.length ? /* @__PURE__ */ jsx13("span", { className: SEPARATOR, children: " \u2014 " }) : null,
+          /* @__PURE__ */ jsx13("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ jsx13(ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
+          track.album && /* @__PURE__ */ jsx13("span", { className: ALBUM_CELL, children: track.album.name })
+        ] });
+        const leading = renderSongLeading?.(track, index);
+        const actions = renderSongActions?.(track);
+        const isUnplayable = isSong(track) && songUnplayableReason(track) !== null;
+        if (isUnplayable) {
+          return /* @__PURE__ */ jsxs9("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", children: [
+            leading,
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                disabled: true,
+                "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__ */ jsx13(FaPlay, { size: 10 })
+              }
+            ),
+            text,
+            actions
+          ] }, track.uuid);
+        }
+        return /* @__PURE__ */ jsxs9(
+          "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__ */ jsx13(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `${isPlaying ? "Pause" : "Play"} ${label}`,
+                  className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-full cursor-pointer group-hover:opacity-100 focus-visible:opacity-100 ${isCurrent && playState !== PlayStates.STOPPED ? "opacity-100" : "opacity-0 [@media(pointer:coarse)]:opacity-100"}`,
+                  onClick: () => isCurrent ? handlePlayPauseAction() : play(track.uuid),
+                  children: isCurrent && playState === PlayStates.LOADING ? /* @__PURE__ */ jsx13(RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ jsx13(FaPause, { size: 10 }) : /* @__PURE__ */ jsx13(FaPlay, { size: 10 })
+                }
+              ),
+              text,
+              actions
+            ]
+          },
+          track.uuid
+        );
+      }),
+      hasNextPage && /* @__PURE__ */ jsx13("li", { ref: sentinelRef, "aria-hidden": "true", className: "h-4" })
+    ] })
+  ] });
+}
+
+// src/genre-tree/GenreDetailExtras.tsx
+import { useTrackNoun as useTrackNoun5 } from "@behindthemusictree/app-kit/track-noun";
+import { SiWikidata, SiWikipedia } from "react-icons/si";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function GenreDetailExtras({
+  genreUuid,
+  genrePlaylist,
+  wikidataId,
+  scope,
+  getBackendBaseUrl,
+  criteriaOverviewSchema,
+  renderGenreDetailExtras,
+  renderArtistLink,
+  renderSummary,
+  renderEssentialTracks,
+  family,
+  ...trackSlots
+}) {
+  const trackNoun = useTrackNoun5();
+  const { data: overview, isPending } = useFetchGenreOverview(
+    genreUuid,
+    scope,
+    getBackendBaseUrl,
+    criteriaOverviewSchema
+  );
+  if (isPending) {
+    return /* @__PURE__ */ jsxs10(Fragment5, { 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" })
+      ] }),
+      family
+    ] });
+  }
+  if (!overview) return /* @__PURE__ */ jsx14(Fragment5, { children: family });
+  const { summary, summarySourceUrl, essentialSongs } = overview;
+  const wikidataUrl = wikidataId ? `https://www.wikidata.org/wiki/${encodeURIComponent(wikidataId)}` : null;
+  return /* @__PURE__ */ jsxs10(Fragment5, { 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)
+    ] }),
+    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" })
+    ] }),
+    /* @__PURE__ */ jsx14(
+      GenrePlaylistTracks,
+      {
+        genreUuid,
+        genrePlaylist,
+        scope,
+        getBackendBaseUrl,
+        renderArtistLink,
+        ...trackSlots
+      }
+    )
   ] });
 }
 
-// src/genre-tree/ShareActionButton.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-function ShareActionButton({ target, url }) {
-  const { showPopup, hidePopup } = usePopup4();
-  const openSharePopup = () => {
-    showPopup(/* @__PURE__ */ jsx13(SharePopup, { target, url, onClose: hidePopup }));
+// src/genre-tree/GenreInfoPanelBody.tsx
+import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { createElement } from "react";
+function GenreNodeActionBand({ genrePlaylist, playback, ...bandProps }) {
+  const { isPlaying, setIsPlaying } = usePlayer5();
+  const isCurrentTrackList = playback.playingNodeId === genrePlaylist.uuid;
+  const handlePlayPause = () => {
+    if (isCurrentTrackList) {
+      setIsPlaying(!isPlaying);
+      return;
+    }
+    playback.play(genrePlaylist).catch((error) => {
+      console.error("Failed to load genre playlist tracks:", error);
+    });
   };
-  return /* @__PURE__ */ jsxs9(
-    "button",
+  return /* @__PURE__ */ jsx15(
+    GenreActionBand,
     {
-      type: "button",
-      onClick: openSharePopup,
-      className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none",
-      "aria-label": `Share ${target.name}`,
-      title: `Share ${target.name}`,
-      children: [
-        /* @__PURE__ */ jsx13("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: /* @__PURE__ */ jsx13(Share22, { "aria-hidden": "true", className: "w-5 h-5" }) }),
-        "Share"
-      ]
+      ...bandProps,
+      onPlayPause: genrePlaylist.tracksCount > 0 ? handlePlayPause : void 0,
+      isPlaying: isCurrentTrackList && isPlaying
     }
   );
 }
-
-// src/genre-tree/GenreActionBand.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
-function GenreActionBand({
-  node,
-  onPlayPause,
-  isPlaying = false,
-  onZoomIn,
-  onAddChild,
-  onRename,
-  onChangeParent,
-  side,
-  onToggleSide,
-  toggleSideDisabledReason,
-  additionalActions,
-  shareTarget,
-  shareUrl
+function GenreInfoPanelBody({
+  toolbar,
+  family,
+  genreUuid,
+  genrePlaylist,
+  wikidataId,
+  scope,
+  getBackendBaseUrl,
+  playback,
+  band,
+  extras
 }) {
-  const items = [];
-  const adminItems = [];
-  if (onPlayPause) {
-    items.push({
-      key: "play-pause",
-      label: isPlaying ? "Pause" : "Play",
-      icon: isPlaying ? /* @__PURE__ */ jsx14(Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ jsx14(Play, { "aria-hidden": "true", className: "w-5 h-5" }),
-      onClick: onPlayPause
-    });
-  }
-  if (onZoomIn) {
-    items.push({
-      key: "zoom-in",
-      label: "Focus",
-      icon: /* @__PURE__ */ jsx14(ZoomIn, { "aria-hidden": "true", className: "w-5 h-5" }),
-      onClick: onZoomIn
-    });
-  }
-  if (onAddChild) {
-    adminItems.push({ key: "add-child", label: "Add", icon: /* @__PURE__ */ jsx14(Plus, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onAddChild });
-  }
-  if (onRename) {
-    adminItems.push({ key: "rename", label: "Rename", icon: /* @__PURE__ */ jsx14(Pencil, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onRename });
-  }
-  if (onChangeParent) {
-    adminItems.push({ key: "change-parent", label: "Parent", icon: /* @__PURE__ */ jsx14(MoveUpRight, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onChangeParent });
-  }
-  if (onToggleSide) {
-    adminItems.push({
-      key: "toggle-side",
-      label: side === "pop" ? "Make core" : "Make pop",
-      icon: /* @__PURE__ */ jsx14(ArrowLeftRight, { "aria-hidden": "true", className: "w-5 h-5" }),
-      onClick: onToggleSide,
-      disabled: !!toggleSideDisabledReason,
-      title: toggleSideDisabledReason
-    });
-  }
-  for (const action of additionalActions?.(node) ?? []) {
-    items.push({
-      key: action.key,
-      label: action.label(node),
-      icon: action.icon(node),
-      onClick: (event) => action.onClick(event, node),
-      disabled: action.enabled ? !action.enabled(node) : false
-    });
-  }
-  if (items.length === 0 && (!shareTarget || !shareUrl) && adminItems.length === 0) return null;
-  const renderItems = (list) => list.map((item) => /* @__PURE__ */ jsxs10(
-    "button",
-    {
-      type: "button",
-      disabled: item.disabled,
-      title: item.title,
-      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__ */ jsx14("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)] group-disabled:group-hover:bg-[var(--color-surface-muted)]", children: item.icon }),
-        item.label
-      ]
-    },
-    item.key
-  ));
-  return /* @__PURE__ */ jsxs10("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: [
-    (items.length > 0 || shareTarget && shareUrl) && /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
-      renderItems(items),
-      shareTarget && shareUrl && /* @__PURE__ */ jsx14(ShareActionButton, { target: shareTarget, url: shareUrl })
-    ] }),
-    adminItems.length > 0 && /* @__PURE__ */ jsxs10(
-      "section",
+  return /* @__PURE__ */ jsxs11(Fragment6, { children: [
+    toolbar,
+    /* @__PURE__ */ jsx15(GenreNodeActionBand, { ...band, genrePlaylist, playback }),
+    /* @__PURE__ */ createElement(
+      GenreDetailExtras,
       {
-        "aria-label": "Admin actions",
-        className: `px-3.5 py-3 ${items.length > 0 ? "border-t border-[var(--color-border)]" : ""}`,
-        children: [
-          /* @__PURE__ */ jsx14("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]", children: "Admin" }),
-          /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap gap-1", children: renderItems(adminItems) })
-        ]
+        ...extras,
+        key: genreUuid,
+        family,
+        genreUuid,
+        genrePlaylist,
+        wikidataId,
+        scope,
+        getBackendBaseUrl
       }
     )
   ] });
@@ -1270,14 +1327,14 @@ function GenreActionBand({
 // src/genre-tree/PanelEdgeTab.tsx
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { twMerge } from "tailwind-merge";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var buttonClassName = "flex h-12 w-full items-center justify-center p-0 text-[var(--color-text-muted)] hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-text)] focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--color-primary)]";
 function PanelEdgeTab({ side, edge, center, controls, className: className2 }) {
   if (!edge && !center) return null;
   const isLeft = side === "left";
   const EdgeIcon = isLeft ? ChevronLeft : ChevronRight;
   const CenterIcon = isLeft ? ChevronRight : ChevronLeft;
-  const renderButton = (action, icon) => /* @__PURE__ */ jsx15(
+  const renderButton = (action, icon) => /* @__PURE__ */ jsx16(
     "button",
     {
       type: "button",
@@ -1290,10 +1347,10 @@ function PanelEdgeTab({ side, edge, center, controls, className: className2 }) {
       children: icon
     }
   );
-  const edgeButton = edge && renderButton(edge, /* @__PURE__ */ jsx15(EdgeIcon, { "aria-hidden": "true", className: "h-5 w-5" }));
-  const centerButton = center && renderButton(center, /* @__PURE__ */ jsx15(CenterIcon, { "aria-hidden": "true", className: "h-5 w-5" }));
+  const edgeButton = edge && renderButton(edge, /* @__PURE__ */ jsx16(EdgeIcon, { "aria-hidden": "true", className: "h-5 w-5" }));
+  const centerButton = center && renderButton(center, /* @__PURE__ */ jsx16(CenterIcon, { "aria-hidden": "true", className: "h-5 w-5" }));
   const buttons = isLeft ? [edgeButton, centerButton] : [centerButton, edgeButton];
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: twMerge(
@@ -1303,20 +1360,33 @@ function PanelEdgeTab({ side, edge, center, controls, className: className2 }) {
       ),
       children: [
         buttons[0],
-        buttons[0] && buttons[1] && /* @__PURE__ */ jsx15("div", { role: "presentation", className: "h-px shrink-0 bg-[var(--color-border)]" }),
+        buttons[0] && buttons[1] && /* @__PURE__ */ jsx16("div", { role: "presentation", className: "h-px shrink-0 bg-[var(--color-border)]" }),
         buttons[1]
       ]
     }
   );
 }
 
+// src/genre-tree/useLeftDetailPanelLayout.ts
+import { useEffect as useEffect4 } from "react";
+function useLeftDetailPanelLayout(isPanelShown, enabled = true) {
+  useEffect4(() => {
+    if (!enabled || isPanelShown) return void 0;
+    const root = document.documentElement;
+    root.style.setProperty("--layout-left-w", "0px");
+    return () => {
+      root.style.removeProperty("--layout-left-w");
+    };
+  }, [enabled, isPanelShown]);
+}
+
 // src/genre-tree/ChangeParentPopup.tsx
-import { useEffect as useEffect4, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo6 } from "react";
 import {
   getReparentCandidates,
   useUpdateGenre
 } from "@behindthemusictree/app-kit/genre-tree";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function ChangeParentPopup({
   genrePlaylist,
   genrePlaylists,
@@ -1344,19 +1414,19 @@ function ChangeParentPopup({
       }
     );
   };
-  useEffect4(() => {
+  useEffect5(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") onClose();
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
-  return /* @__PURE__ */ jsxs12(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
-    /* @__PURE__ */ jsxs12("p", { className: "mb-3 text-sm text-[var(--color-text-muted)]", children: [
+  return /* @__PURE__ */ jsxs13(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
+    /* @__PURE__ */ jsxs13("p", { className: "mb-3 text-sm text-[var(--color-text-muted)]", children: [
       "Current parent: ",
       genrePlaylist.parent?.name ?? "none"
     ] }),
-    /* @__PURE__ */ jsx16("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ jsx17(
       GenreSearch,
       {
         genrePlaylists: candidates,
@@ -1364,7 +1434,7 @@ function ChangeParentPopup({
         placeholder: "Search a new parent\u2026"
       }
     ) }),
-    formErrors.length > 0 && /* @__PURE__ */ jsx16("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
+    formErrors.length > 0 && /* @__PURE__ */ jsx17("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
   ] });
 }
 
@@ -1388,7 +1458,7 @@ import {
   SiYoutube
 } from "react-icons/si";
 import { Chip } from "@behindthemusictree/ui";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var LINK_KINDS = {
   official: { label: "Official website", Icon: Globe },
   wikipedia: { label: "Wikipedia", Icon: SiWikipedia2 },
@@ -1425,7 +1495,7 @@ function artistLinks(artist) {
   return links;
 }
 function ArtistLinks({ links }) {
-  return /* @__PURE__ */ jsx17("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsx17(Chip, { href: url, icon: /* @__PURE__ */ jsx17(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
+  return /* @__PURE__ */ jsx18("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(Chip, { href: url, icon: /* @__PURE__ */ jsx18(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
 }
 
 // src/genre-tree/artist/formatYears.ts
@@ -1436,7 +1506,7 @@ function formatYears(beginYear, endYear, ended) {
 }
 
 // src/genre-tree/artist/ArtistHeader.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var countryNames = new Intl.DisplayNames(["en"], { type: "region" });
 function ArtistHeader({ artist }) {
   const fields = [];
@@ -1446,35 +1516,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__ */ jsx18(ArtistLinks, { links }) });
+  if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ jsx19(ArtistLinks, { links }) });
   if (fields.length === 0) return null;
-  return /* @__PURE__ */ jsx18(FieldList, { items: fields });
+  return /* @__PURE__ */ jsx19(FieldList, { items: fields });
 }
 
 // src/genre-tree/artist/ArtistPhoto.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function ExternalLink({ href, children }) {
-  return /* @__PURE__ */ jsx19("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
+  return /* @__PURE__ */ jsx20("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
 }
 function ArtistPhoto({ image, name }) {
-  return /* @__PURE__ */ jsxs13("figure", { className: "flex flex-col gap-1.5 px-6 py-2.5", children: [
-    /* @__PURE__ */ jsx19("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
-    /* @__PURE__ */ jsxs13("figcaption", { className: "text-xs text-[var(--color-text-muted)]", children: [
+  return /* @__PURE__ */ jsxs14("figure", { className: "flex flex-col gap-1.5 px-6 py-2.5", children: [
+    /* @__PURE__ */ jsx20("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
+    /* @__PURE__ */ jsxs14("figcaption", { className: "text-xs text-[var(--color-text-muted)]", children: [
       "Photo: ",
-      /* @__PURE__ */ jsx19(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
+      /* @__PURE__ */ jsx20(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
       ",",
       " ",
-      image.licenseUrl ? /* @__PURE__ */ jsx19(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
+      image.licenseUrl ? /* @__PURE__ */ jsx20(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
     ] })
   ] });
 }
 
 // src/genre-tree/artist/ArtistMembers.tsx
 import { PanelGroup, PanelSection } from "@behindthemusictree/ui";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function MembershipList({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
-  return /* @__PURE__ */ jsx20(PanelGroup, { title, children: /* @__PURE__ */ jsx20("ul", { children: memberships.map((membership, index) => {
+  return /* @__PURE__ */ jsx21(PanelGroup, { title, children: /* @__PURE__ */ jsx21("ul", { children: memberships.map((membership, index) => {
     const details = [
       formatYears(membership.beginYear, membership.endYear, membership.ended),
       ...membership.roles
@@ -1482,9 +1552,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__ */ jsxs14("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
-        /* @__PURE__ */ jsx20("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
-        detailsText && /* @__PURE__ */ jsxs14("span", { className: "text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ jsxs15("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
+        /* @__PURE__ */ jsx21("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
+        detailsText && /* @__PURE__ */ jsxs15("span", { className: "text-[var(--color-text-muted)]", children: [
           " \u2014 ",
           detailsText
         ] })
@@ -1495,9 +1565,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__ */ jsxs14(PanelSection, { title, children: [
-    /* @__PURE__ */ jsx20(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs15(PanelSection, { title, children: [
+    /* @__PURE__ */ jsx21(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
+    /* @__PURE__ */ jsx21(
       MembershipList,
       {
         title: "Past",
@@ -1510,7 +1580,7 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
 
 // src/genre-tree/artist/ArtistDiscography.tsx
 import { PanelGroup as PanelGroup2, PanelSection as PanelSection2 } from "@behindthemusictree/ui";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var GROUPS = ["Albums", "EPs", "Singles", "Live", "Compilations", "Other"];
 var PRIMARY_GROUPS = { album: "Albums", ep: "EPs", single: "Singles" };
 function discographyGroup({ primaryType, secondaryTypes }) {
@@ -1530,12 +1600,12 @@ 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__ */ jsx22(PanelSection2, { 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: [
-      /* @__PURE__ */ jsx21("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
-      /* @__PURE__ */ jsx21("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
+    return /* @__PURE__ */ jsx22(PanelGroup2, { title: group, children: /* @__PURE__ */ jsx22("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ jsxs16("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
+      /* @__PURE__ */ jsx22("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
+      /* @__PURE__ */ jsx22("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
     ] }, album.uuid)) }) }, group);
   }) });
 }
@@ -1545,7 +1615,7 @@ import { useState as useState4 } 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 { usePlayer as usePlayer7 } from "@behindthemusictree/app-kit/player";
+import { usePlayer as usePlayer8 } from "@behindthemusictree/app-kit/player";
 import {
   SongDetailedSchema as SongDetailedSchema2,
   libraryEndpoints as libraryEndpoints2,
@@ -1555,35 +1625,35 @@ import {
 import { PaginatedResponseSchema as PaginatedResponseSchema2, useFetchWrapper as useFetchWrapper2, useQueryWithParse } from "@behindthemusictree/app-kit/transport";
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
-import { usePlayer as usePlayer6 } from "@behindthemusictree/app-kit/player";
+import { usePlayer as usePlayer7 } from "@behindthemusictree/app-kit/player";
 import { useTrackList as useTrackList3 } from "@behindthemusictree/app-kit/genre-tree";
 
 // src/genre-tree/TrackPositionPlayPause.tsx
 import { FaPlay as FaPlay2, FaPause as FaPause2 } from "react-icons/fa";
-import { usePlayer as usePlayer5 } from "@behindthemusictree/app-kit/player";
+import { usePlayer as usePlayer6 } from "@behindthemusictree/app-kit/player";
 import { PlayStates as PlayStates2 } from "@behindthemusictree/app-kit/player";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 function TrackPositionPlayPause({
   position,
   uuid,
   handlePlayPauseClick,
   isSelected = false
 }) {
-  const { playerTrackObject, playbackConfirmedTrackId, playState, isLoading: isPlayerLoading } = usePlayer5();
+  const { playerTrackObject, playbackConfirmedTrackId, playState, isLoading: isPlayerLoading } = usePlayer6();
   const isThisTrack = playerTrackObject?.track.id === uuid;
   const isConfirmedPlayable = playbackConfirmedTrackId === uuid;
   const isAwaitingPlayback = (isSelected || isThisTrack) && !isConfirmedPlayable && !(isThisTrack && playerTrackObject?.loadError) && (!isThisTrack || isPlayerLoading || playState === PlayStates2.LOADING || playState === PlayStates2.PLAYING);
   const isPlaying = isThisTrack && isConfirmedPlayable && playState === PlayStates2.PLAYING;
   const isPaused = isThisTrack && isConfirmedPlayable && playState === PlayStates2.PAUSED;
   const isCurrentTrackActive = isPlaying || isPaused;
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "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__ */ jsx22("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ jsx22("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsx23("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ jsx23("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ jsxs17(
           "span",
           {
             className: "track-position-play-pause__bars",
@@ -1591,18 +1661,18 @@ function TrackPositionPlayPause({
             role: "img",
             "aria-label": isPlaying ? "Playing" : "Paused",
             children: [
-              /* @__PURE__ */ jsx22("span", { className: "track-position-play-pause__bar" }),
-              /* @__PURE__ */ jsx22("span", { className: "track-position-play-pause__bar" }),
-              /* @__PURE__ */ jsx22("span", { className: "track-position-play-pause__bar" })
+              /* @__PURE__ */ jsx23("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ jsx23("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ jsx23("span", { className: "track-position-play-pause__bar" })
             ]
           }
         ) : position }),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "div",
           {
             className: `hidden group-hover:flex items-center justify-center ${isCurrentTrackActive ? "" : "absolute inset-0"}`,
             "aria-hidden": "true",
-            children: isAwaitingPlayback ? /* @__PURE__ */ jsx22("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ jsx22(FaPause2, {}) : /* @__PURE__ */ jsx22(FaPlay2, {})
+            children: isAwaitingPlayback ? /* @__PURE__ */ jsx23("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ jsx23(FaPause2, {}) : /* @__PURE__ */ jsx23(FaPlay2, {})
           }
         )
       ]
@@ -1613,7 +1683,7 @@ function TrackPositionPlayPause({
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
 import { isSong as isSong2, songUnplayableReason as songUnplayableReason2 } from "@behindthemusictree/app-kit/genre-tree";
 import { ArtistNames as ArtistNames2 } from "@behindthemusictree/app-kit/genre-tree";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 function TrackItem({
   track,
   position,
@@ -1621,7 +1691,7 @@ function TrackItem({
   renderActions,
   renderArtistLink
 }) {
-  const { handlePlayPauseAction, playerTrackObject, loadTrackForPlayer } = usePlayer6();
+  const { handlePlayPauseAction, playerTrackObject, loadTrackForPlayer } = usePlayer7();
   const { trackList, selectedTrack, toTrackAtPosition, runtimeUnplayableTrackIds } = useTrackList3();
   const scope = trackList?.origin?.scope ?? null;
   const isCurrentTrack = playerTrackObject?.track.id === track.uuid;
@@ -1636,12 +1706,12 @@ function TrackItem({
       loadTrackForPlayer(track.uuid);
     }
   };
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: `track-item flex h-14 text-[var(--color-text)] ${isUnplayable ? "opacity-50" : "hover:bg-[var(--color-surface-muted)] group"}`,
       children: [
-        isUnplayable ? /* @__PURE__ */ jsx23(
+        isUnplayable ? /* @__PURE__ */ jsx24(
           "div",
           {
             className: "flex items-center justify-center text-lg w-16",
@@ -1649,7 +1719,7 @@ function TrackItem({
             "aria-disabled": "true",
             children: position
           }
-        ) : /* @__PURE__ */ jsx23(
+        ) : /* @__PURE__ */ jsx24(
           TrackPositionPlayPause,
           {
             position,
@@ -1658,12 +1728,12 @@ function TrackItem({
             isSelected: selectedTrack?.uuid === track.uuid
           }
         ),
-        /* @__PURE__ */ jsxs17("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx23("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ jsx23("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: isSong2(track) ? /* @__PURE__ */ jsx23(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }) }),
-          track.artists && track.artists.length > 0 ? /* @__PURE__ */ jsx23("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsx23(ArtistNames2, { artists: track.artists, renderArtistLink }) }) : ""
+        /* @__PURE__ */ jsxs18("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx24("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ jsx24("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: isSong2(track) ? /* @__PURE__ */ jsx24(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }) }),
+          track.artists && track.artists.length > 0 ? /* @__PURE__ */ jsx24("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsx24(ArtistNames2, { artists: track.artists, renderArtistLink }) }) : ""
         ] }),
-        /* @__PURE__ */ jsx23("div", { className: "genre-name-container flex items-center justify-start w-[21.6%] min-w-0 shrink-0", children: track.genre ? /* @__PURE__ */ jsx23("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-xs font-bold", children: track.genre.name }) : "" }),
-        renderDuration && /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("div", { className: "genre-name-container flex items-center justify-start w-[21.6%] min-w-0 shrink-0", children: track.genre ? /* @__PURE__ */ jsx24("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-xs font-bold", children: track.genre.name }) : "" }),
+        renderDuration && /* @__PURE__ */ jsx24(
           "div",
           {
             className: "duration flex text-base w-16 items-center justify-center",
@@ -1671,14 +1741,14 @@ function TrackItem({
             children: renderDuration(track)
           }
         ),
-        renderActions && /* @__PURE__ */ jsx23("div", { className: "edit flex text-base w-6 items-center justify-center mr-2 cursor-pointer", children: renderActions(track) })
+        renderActions && /* @__PURE__ */ jsx24("div", { className: "edit flex text-base w-6 items-center justify-center mr-2 cursor-pointer", children: renderActions(track) })
       ]
     }
   );
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var SongPageSchema2 = PaginatedResponseSchema2(SongDetailedSchema2);
 var SORTS = [
   { ordering: "title", label: "Title" },
@@ -1689,7 +1759,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink }) {
   const [ordering, setOrdering] = useState4("title");
   const { fetch } = useFetchWrapper2(getBackendBaseUrl);
   const { playNewTrackListFromArtist } = useTrackList4();
-  const { playerTrackObject } = usePlayer7();
+  const { playerTrackObject } = usePlayer8();
   const { data, isPending, isError } = useQueryWithParse({
     queryKey: ["referenceSongs", "artist", artist.uuid, ordering, page],
     queryFn: () => fetch(libraryEndpoints2.reference.songs.list(), true, false, void 0, {
@@ -1711,21 +1781,21 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink }) {
     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(Fragment6, { children: [
-    /* @__PURE__ */ jsxs18("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
-      /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx25(PanelSection3, { title: "Songs", children: isPending ? /* @__PURE__ */ jsx25(Skeleton3, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ jsx25("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ jsx25("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ jsxs19(Fragment7, { children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
+      /* @__PURE__ */ jsxs19(
         "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__ */ jsx24(Play2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx25(Play2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
             "Play all"
           ]
         }
       ),
-      /* @__PURE__ */ jsx24("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx25("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ jsx25(
         "button",
         {
           type: "button",
@@ -1740,7 +1810,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink }) {
         sort.ordering
       )) })
     ] }),
-    /* @__PURE__ */ jsx24("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ jsx24("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ jsx25("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ jsx25(
       TrackItem,
       {
         track: song,
@@ -1748,12 +1818,12 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink }) {
         renderArtistLink
       }
     ) }, song.uuid)) }),
-    /* @__PURE__ */ jsx24(Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
+    /* @__PURE__ */ jsx25(Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
   ] }) });
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function useArtistPanel({
   uuid,
   scope,
@@ -1773,26 +1843,26 @@ function useArtistPanel({
       return {
         ...panel,
         title: "Artist",
-        content: /* @__PURE__ */ jsxs19("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
-          /* @__PURE__ */ jsx25(Skeleton4, { className: "h-3 w-16" }),
-          /* @__PURE__ */ jsx25(Skeleton4, { className: "h-4 w-32" }),
-          /* @__PURE__ */ jsx25(Skeleton4, { className: "h-3 w-16" }),
-          /* @__PURE__ */ jsx25(Skeleton4, { className: "h-4 w-24" }),
-          /* @__PURE__ */ jsx25(Skeleton4, { className: "h-16 mt-2.5" }),
-          /* @__PURE__ */ jsx25(Skeleton4, { className: "h-16" })
+        content: /* @__PURE__ */ jsxs20("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
+          /* @__PURE__ */ jsx26(Skeleton4, { className: "h-3 w-16" }),
+          /* @__PURE__ */ jsx26(Skeleton4, { className: "h-4 w-32" }),
+          /* @__PURE__ */ jsx26(Skeleton4, { className: "h-3 w-16" }),
+          /* @__PURE__ */ jsx26(Skeleton4, { className: "h-4 w-24" }),
+          /* @__PURE__ */ jsx26(Skeleton4, { className: "h-16 mt-2.5" }),
+          /* @__PURE__ */ jsx26(Skeleton4, { className: "h-16" })
         ] })
       };
     case "not-found":
       return {
         ...panel,
         title: "Artist not found",
-        content: /* @__PURE__ */ jsx25("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This artist does not exist." })
+        content: /* @__PURE__ */ jsx26("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__ */ jsx25("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
+        content: /* @__PURE__ */ jsx26("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
       };
     case "success": {
       const { artist } = result;
@@ -1801,13 +1871,13 @@ function useArtistPanel({
       return {
         ...panel,
         title: artist.name,
-        content: /* @__PURE__ */ jsxs19(Fragment7, { children: [
-          shareUrl && /* @__PURE__ */ jsx25("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsx25("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: shareTarget && /* @__PURE__ */ jsx25(ShareActionButton, { target: shareTarget, url: shareUrl }) }) }),
-          artist.image && /* @__PURE__ */ jsx25(ArtistPhoto, { image: artist.image, name: artist.name }),
-          /* @__PURE__ */ jsx25(ArtistHeader, { artist }),
-          /* @__PURE__ */ jsx25(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
-          /* @__PURE__ */ jsx25(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
-          artist.tracksCount > 0 && /* @__PURE__ */ jsx25(
+        content: /* @__PURE__ */ jsxs20(Fragment8, { children: [
+          shareUrl && /* @__PURE__ */ jsx26("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsx26("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: shareTarget && /* @__PURE__ */ jsx26(ShareActionButton, { target: shareTarget, url: shareUrl }) }) }),
+          artist.image && /* @__PURE__ */ jsx26(ArtistPhoto, { image: artist.image, name: artist.name }),
+          /* @__PURE__ */ jsx26(ArtistHeader, { artist }),
+          /* @__PURE__ */ jsx26(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
+          /* @__PURE__ */ jsx26(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
+          artist.tracksCount > 0 && /* @__PURE__ */ jsx26(
             ArtistSongs,
             {
               artist: { uuid: artist.uuid, name: artist.name },
@@ -1816,7 +1886,7 @@ function useArtistPanel({
             }
           )
         ] }),
-        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ jsx25(ArtistDiscography, { albums: artist.albums }) : void 0
+        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ jsx26(ArtistDiscography, { albums: artist.albums }) : void 0
       };
     }
   }
@@ -1825,27 +1895,27 @@ function useArtistPanel({
 // src/genre-tree/SizeMetricToggle.tsx
 import { MdMusicNote, MdVisibility } from "react-icons/md";
 import { SegmentedControl } from "@behindthemusictree/ui";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function SizeMetricToggle({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     SegmentedControl,
     {
       "aria-label": "Size nodes by",
       value,
       onChange,
       options: [
-        { value: "songs", label: /* @__PURE__ */ jsx26(MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
-        { value: "views", label: /* @__PURE__ */ jsx26(MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
+        { value: "songs", label: /* @__PURE__ */ jsx27(MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
+        { value: "views", label: /* @__PURE__ */ jsx27(MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
       ]
     }
   );
 }
 
 // src/genre-tree/GenreTreeView.tsx
-import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 var PREVIOUS_BUTTON_CSS = `
 .genre-tree-view .search-overlay .gtv-info-panel-previous { display: none; }
 .genre-tree-view:has(.search-overlay .gtv-info-panel-previous) .genre-search input { padding-left: 2.75rem; }
@@ -1855,27 +1925,6 @@ var PREVIOUS_BUTTON_CSS = `
   .genre-search-previous { animation: genre-tree-view-previous-in 200ms ease-out; }
 }
 `;
-function GenreNodeActionBand({ genrePlaylist, scope, playback, ...bandProps }) {
-  const { isPlaying, setIsPlaying } = usePlayer8();
-  const isCurrentTrackList = playback.playingNodeId === genrePlaylist.uuid;
-  const handlePlayPause = () => {
-    if (isCurrentTrackList) {
-      setIsPlaying(!isPlaying);
-      return;
-    }
-    playback.play(genrePlaylist).catch((error) => {
-      console.error("Failed to load genre playlist tracks:", error);
-    });
-  };
-  return /* @__PURE__ */ jsx27(
-    GenreActionBand,
-    {
-      ...bandProps,
-      onPlayPause: genrePlaylist.tracksCount > 0 ? handlePlayPause : void 0,
-      isPlaying: isCurrentTrackList && isPlaying
-    }
-  );
-}
 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)] [&_.gtv-info-panel--overlay]:[--gtv-info-panel-header-inset:0px]";
 function GenreTreeView({
@@ -1889,6 +1938,7 @@ function GenreTreeView({
   selectedNodeId: controlledSelectedNodeId,
   onSelectedNodeIdChange,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   readOnly = false,
   className: className2,
@@ -1897,7 +1947,6 @@ function GenreTreeView({
   allowWheelRotation: controlledAllowWheelRotation,
   criteriaOverviewSchema,
   renderGenreDetailExtras,
-  controlsOrientation = "horizontal",
   floatingControlsLeading,
   sizeMetric: controlledSizeMetric,
   onSizeMetricChange,
@@ -1967,6 +2016,16 @@ function GenreTreeView({
     criteriaOverviewSchema,
     artistUuid
   });
+  const restoreRevision = viewportRestore?.revision;
+  const [stackedRestoreOwner, setStackedRestoreOwner] = useState5({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
+  let restoreRootUuid = stackedRestoreOwner.rootUuid;
+  if (stackedRestoreOwner.revision !== restoreRevision) {
+    restoreRootUuid = selectedGenrePlaylist?.root.uuid;
+    setStackedRestoreOwner({ revision: restoreRevision, rootUuid: restoreRootUuid });
+  } else if (restoreRootUuid === void 0 && selectedGenrePlaylist) {
+    restoreRootUuid = selectedGenrePlaylist.root.uuid;
+    setStackedRestoreOwner({ revision: restoreRevision, rootUuid: restoreRootUuid });
+  }
   const isGenreUpdating = useIsMutating({ mutationKey: genreUpdateMutationKey }) > 0;
   const { mutate: updateGenre } = useUpdateGenre2(scope, getBackendBaseUrl);
   const busy = deferredSizeMetric !== sizeMetric || isTreeFetching || isGenreUpdating;
@@ -1991,7 +2050,7 @@ function GenreTreeView({
     scope,
     getBackendBaseUrl: artistBaseUrl,
     getShareUrl: getShareUrlRef.current,
-    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx27("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx28("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);
@@ -2013,18 +2072,11 @@ function GenreTreeView({
     setUncontrolledExpanded(next);
     onExpandedChange?.(next);
   };
-  useEffect5(() => {
+  useEffect6(() => {
     setUncontrolledCollapsed(false);
   }, [selectedNodeId, artistUuid]);
   const isDetailHidden = isCollapsed || !hasSelectedGenreNode && !activeOverlayPanel;
-  useEffect5(() => {
-    if (placement !== "regions" || !isDetailHidden) return void 0;
-    const root = document.documentElement;
-    root.style.setProperty("--layout-left-w", "0px");
-    return () => {
-      root.style.removeProperty("--layout-left-w");
-    };
-  }, [placement, isDetailHidden]);
+  useLeftDetailPanelLayout(!isDetailHidden, placement === "regions");
   const detailOverlay = placement === "regions" && activeOverlayPanel?.onExpandedChange ? activeOverlayPanel : void 0;
   const detailExpanded = detailOverlay ? !!detailOverlay.expanded : isExpanded;
   const onDetailExpandedChange = detailOverlay ? detailOverlay.onExpandedChange : changeExpanded;
@@ -2043,7 +2095,7 @@ function GenreTreeView({
   const handlePrevious = () => {
     rootRef.current?.querySelector(".search-overlay .gtv-info-panel-previous")?.click();
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isTreeReady || viewMode !== "pop-core" || !hasSelectedGenreNode || !selectedGenrePlaylist) return;
     const root = rootRef.current;
     const centerChip = root?.querySelector(".gtv-wheel-center-node .gtv-wheel-chip");
@@ -2059,15 +2111,15 @@ function GenreTreeView({
     label: "Artists",
     items: artistSearchResult.artists.map((artist) => ({
       key: artist.uuid,
-      content: /* @__PURE__ */ jsxs20(Fragment8, { children: [
-        /* @__PURE__ */ jsxs20("span", { className: "block truncate font-medium", children: [
+      content: /* @__PURE__ */ jsxs21(Fragment9, { children: [
+        /* @__PURE__ */ jsxs21("span", { className: "block truncate font-medium", children: [
           artist.name,
-          artist.disambiguation && /* @__PURE__ */ jsxs20("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
+          artist.disambiguation && /* @__PURE__ */ jsxs21("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
             " \xB7 ",
             artist.disambiguation
           ] })
         ] }),
-        artist.matchedAlias && /* @__PURE__ */ jsxs20("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
+        artist.matchedAlias && /* @__PURE__ */ jsxs21("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
           "also known as ",
           artist.matchedAlias
         ] })
@@ -2099,7 +2151,7 @@ function GenreTreeView({
     (node, { toolbar, ancestors, family }) => {
       const genrePlaylist = genrePlaylistByNodeId.get(node.id);
       const criteria = genrePlaylist?.criteria;
-      if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ jsxs20(Fragment8, { children: [
+      if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ jsxs21(Fragment9, { children: [
         toolbar,
         family
       ] }), aside: ancestors };
@@ -2119,21 +2171,26 @@ function GenreTreeView({
         (sibling) => sibling.parent?.uuid === parentPlaylist.uuid && sibling.uuid !== genrePlaylist.uuid && sibling.criteria?.side === "pop"
       ) : void 0;
       return {
-        primary: /* @__PURE__ */ jsxs20(Fragment8, { children: [
-          toolbar,
-          /* @__PURE__ */ jsx27(
-            GenreNodeActionBand,
-            {
+        primary: /* @__PURE__ */ jsx28(
+          GenreInfoPanelBody,
+          {
+            toolbar,
+            family,
+            genreUuid,
+            genrePlaylist,
+            wikidataId: criteria.wikidataId,
+            scope,
+            getBackendBaseUrl,
+            playback,
+            band: {
               node,
-              genrePlaylist,
-              scope,
               shareTarget: shareUrl ? shareTarget : void 0,
               shareUrl,
               onZoomIn: zoomInRef.current,
               onAddChild: readOnly ? void 0 : () => handleGenreCreationAction(criteria),
               onRename: readOnly ? void 0 : () => handleGenreRenameAction(criteria),
               onChangeParent: readOnly ? void 0 : () => showPopup(
-                /* @__PURE__ */ jsx27(
+                /* @__PURE__ */ jsx28(
                   ChangeParentPopup,
                   {
                     genrePlaylist: { ...genrePlaylist, criteria },
@@ -2148,19 +2205,9 @@ function GenreTreeView({
               side,
               onToggleSide: canToggleSide ? () => updateGenre({ uuid: genreUuid, data: { side: side === "pop" ? "core" : "pop" } }) : void 0,
               toggleSideDisabledReason: popSibling ? `${popSibling.name} is already the pop side of ${parentPlaylist?.name}` : void 0,
-              additionalActions,
-              playback
-            }
-          ),
-          /* @__PURE__ */ jsx27(
-            GenreDetailExtras,
-            {
-              family,
-              genreUuid,
-              genrePlaylist,
-              wikidataId: criteria.wikidataId,
-              scope,
-              getBackendBaseUrl,
+              additionalActions
+            },
+            extras: {
               criteriaOverviewSchema,
               renderGenreDetailExtras,
               renderArtistLink,
@@ -2170,10 +2217,9 @@ function GenreTreeView({
               renderSongLeading,
               renderSongActions,
               renderTracksToolbar
-            },
-            genreUuid
-          )
-        ] }),
+            }
+          }
+        ),
         aside: ancestors
       };
     },
@@ -2204,7 +2250,7 @@ function GenreTreeView({
   );
   const isRotationControlled = controlledAllowWheelRotation !== void 0;
   const allowWheelRotation = controlledAllowWheelRotation ?? internalAllowWheelRotation;
-  const detailTab = placement === "regions" && (hasSelectedGenreNode || detailOverlay) ? /* @__PURE__ */ jsx27(
+  const detailTab = placement === "regions" && (hasSelectedGenreNode || detailOverlay) ? /* @__PURE__ */ jsx28(
     PanelEdgeTab,
     {
       side: "left",
@@ -2214,8 +2260,8 @@ function GenreTreeView({
   ) : null;
   const renderArtistFilter = () => {
     if (isLoading || !filterArtist) return null;
-    return /* @__PURE__ */ jsxs20("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
-      /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsxs21("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
+      /* @__PURE__ */ jsx28(
         "button",
         {
           type: "button",
@@ -2227,7 +2273,7 @@ function GenreTreeView({
           children: filterArtist.name
         }
       ),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx28(
         "button",
         {
           type: "button",
@@ -2239,8 +2285,8 @@ function GenreTreeView({
       )
     ] });
   };
-  const actions = /* @__PURE__ */ jsxs20(Fragment8, { children: [
-    !isLoading && /* @__PURE__ */ jsx27(
+  const actions = /* @__PURE__ */ jsxs21(Fragment9, { children: [
+    !isLoading && /* @__PURE__ */ jsx28(
       GenreSearch,
       {
         genrePlaylists: visibleGenrePlaylists,
@@ -2252,9 +2298,9 @@ function GenreTreeView({
         extraResults: artistExtraResults
       }
     ),
-    !isLoading && filterArtist && /* @__PURE__ */ jsx27("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
-    /* @__PURE__ */ jsxs20("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__ */ jsx27(
+    !isLoading && filterArtist && /* @__PURE__ */ jsx28("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
+    /* @__PURE__ */ jsxs21("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__ */ jsx28(
         SegmentedControl2,
         {
           "aria-label": "Tree view mode",
@@ -2268,13 +2314,13 @@ function GenreTreeView({
           ]
         }
       ),
-      !isLoading && showDisplayOptions && /* @__PURE__ */ jsx27(
+      !isLoading && showDisplayOptions && /* @__PURE__ */ jsx28(
         "div",
         {
           className: "flex items-center gap-1",
           role: "group",
           "aria-label": "Tree display options",
-          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ jsx27(
+          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ jsx28(
             Button,
             {
               variant: allowWheelRotation ? "default" : "outline",
@@ -2285,7 +2331,7 @@ function GenreTreeView({
           )
         }
       ),
-      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ jsx27(
+      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ jsx28(
         IconTextButton,
         {
           icon: Plus2,
@@ -2295,42 +2341,42 @@ function GenreTreeView({
       )
     ] })
   ] });
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       ref: rootRef,
       className: ["genre-tree-view relative flex flex-col h-full", placement === "regions" && REGIONS_CLASS, className2].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsx27("style", { children: PREVIOUS_BUTTON_CSS }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28("style", { children: PREVIOUS_BUTTON_CSS }),
+        /* @__PURE__ */ jsx28(
           "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__ */ jsx27(
+        !isLoading && filterArtist && /* @__PURE__ */ jsx28(
           "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()
           }
         ),
-        detailTab && /* @__PURE__ */ jsx27(
+        detailTab && /* @__PURE__ */ jsx28(
           "div",
           {
             className: `absolute top-1/2 z-30 -translate-y-1/2 max-md:hidden transition-[opacity,visibility] duration-150 ease-out ${isTreeReady ? "opacity-100" : "pointer-events-none invisible opacity-0"} ${detailExpanded ? "right-[calc(var(--layout-center-right)-var(--layout-edge-tab-w))]" : isCollapsed ? "left-0" : "left-[calc(var(--layout-gutter)+var(--layout-left-w))]"}`,
             children: detailTab
           }
         ),
-        /* @__PURE__ */ jsx27("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ jsxs20("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
-          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ jsx27("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
-          isLoading ? /* @__PURE__ */ jsx27(GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
+        /* @__PURE__ */ jsx28("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ jsxs21("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
+          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ jsx28("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
+          isLoading ? /* @__PURE__ */ jsx28(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__ */ jsx27("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ jsx27(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx27(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx28("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ jsx28(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx28(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx28(
               GenrePlaylistTreeWheel,
               {
                 scope,
@@ -2347,21 +2393,21 @@ function GenreTreeView({
                 selectedNodeId,
                 readOnly,
                 allowWheelRotation,
-                controlsOrientation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ jsx27(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ jsx28(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
+                viewportRestore,
                 onViewportChange,
                 ...infoPanelCuration
               }
             ) }) })
           ) : viewMode === "pop-core" ? (
             // Same as the wheel: the header inset extends its fill behind the floating search bar, Google Maps style.
-            /* @__PURE__ */ jsx27("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden [&_.gtv-info-panel-zoom-in]:hidden", children: /* @__PURE__ */ jsx27(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx27(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx28("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden [&_.gtv-info-panel-zoom-in]:hidden", children: /* @__PURE__ */ jsx28(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx28(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx28(
               GenrePlaylistTreeWheelRadialPopCore,
               {
                 scope,
@@ -2378,20 +2424,20 @@ function GenreTreeView({
                 selectedNodeId,
                 readOnly,
                 allowWheelRotation,
-                controlsOrientation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ jsx27(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ jsx28(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
+                viewportRestore,
                 onViewportChange,
                 ...infoPanelCuration,
                 ...focus
               }
             ) }) })
-          ) : viewMode === "outline" ? /* @__PURE__ */ jsx27("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem)+0.75rem)] [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ jsx27(
+          ) : viewMode === "outline" ? /* @__PURE__ */ jsx28("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem)+0.75rem)] [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ jsx28(
             GenrePlaylistTreeWheelRadialPopCore,
             {
               outline: true,
@@ -2410,13 +2456,13 @@ function GenreTreeView({
               readOnly,
               ...infoPanelCuration
             }
-          ) }) : /* @__PURE__ */ jsx27("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)] [&_.gtv-toolbar]:hidden", children: Object.entries(groupedGenrePlaylistsByRoot).map(
+          ) }) : /* @__PURE__ */ jsx28("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)] [&_.gtv-toolbar]:hidden", children: Object.entries(groupedGenrePlaylistsByRoot).map(
             ([uuid, genrePlaylistTreePerRoot], rootIndex) => {
-              return /* @__PURE__ */ jsx27(
+              return /* @__PURE__ */ jsx28(
                 "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__ */ jsx27("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ jsx27(
+                  children: /* @__PURE__ */ jsx28("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ jsx28(
                     GenrePlaylistTreePerRoot,
                     {
                       scope,
@@ -2434,8 +2480,8 @@ function GenreTreeView({
                       selectedNodeId: uuid === selectedGenrePlaylist?.root.uuid ? selectedNodeId : null,
                       readOnly,
                       wheelZoom: "modifier",
-                      controlsOrientation,
                       defaultViewport: uuid === selectedGenrePlaylist?.root.uuid ? defaultViewport : void 0,
+                      viewportRestore: uuid === selectedGenrePlaylist?.root.uuid && uuid === restoreRootUuid ? viewportRestore : void 0,
                       onViewportChange: uuid === selectedGenrePlaylist?.root.uuid ? onViewportChange : void 0,
                       ...infoPanelCuration,
                       overlayPanel: rootIndex === 0 ? activeOverlayPanel : void 0
@@ -2452,6 +2498,123 @@ function GenreTreeView({
   );
 }
 
+// src/genre-tree/GenreDetailPanel.tsx
+import { useMemo as useMemo8 } from "react";
+import {
+  ACCENT_TEXT_COLOR,
+  getGenreTreeColor as getGenreTreeColor2,
+  InfoPanel,
+  TEXT_COLOR,
+  tintSurface
+} from "@behindthemusictree/genre-tree-view";
+import { Skeleton as Skeleton5 } from "@behindthemusictree/ui";
+import {
+  useFetchGenreDetail
+} from "@behindthemusictree/app-kit/genre-tree";
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+var ITEM_COUNT_LABEL = "Songs";
+var RELATIVE_ITEM_COUNT = 1;
+function toNode(genre, parentId) {
+  return {
+    id: genre.uuid,
+    parentId,
+    name: genre.name,
+    itemCount: RELATIVE_ITEM_COUNT,
+    side: genre.side ?? void 0,
+    wikidataId: genre.wikidataId
+  };
+}
+function GenreDetailPanel({
+  genreUuid,
+  scope,
+  getBackendBaseUrl,
+  onClose,
+  onSelectGenre,
+  onZoomIn,
+  shareUrl,
+  shareTarget,
+  collapsed,
+  expanded,
+  onExpandedChange,
+  extras
+}) {
+  const { data: detail, isPending, isError } = useFetchGenreDetail(genreUuid, scope, getBackendBaseUrl);
+  const playback = useGenrePlaylistPlayback({ scope, genrePlaylists: [] });
+  const view = useMemo8(() => {
+    if (!detail) return null;
+    const rootColor = getGenreTreeColor2(detail.root.wikidataId);
+    const relative = (genre, parentId) => ({
+      node: toNode(genre, parentId),
+      fill: tintSurface(rootColor),
+      textColor: TEXT_COLOR
+    });
+    const ancestors = [...detail.ascendants].sort((a, b) => b.degree - a.degree);
+    return {
+      node: {
+        id: detail.uuid,
+        parentId: detail.parent?.uuid ?? null,
+        name: detail.name,
+        itemCount: detail.tracksCount,
+        wikidataId: detail.wikidataId
+      },
+      fill: rootColor,
+      parentNode: detail.parent ? relative(detail.parent, null) : null,
+      childNodes: detail.children.map((child) => relative(child, detail.uuid)),
+      ancestorNodes: ancestors.map(
+        ({ ascendant }, index) => relative(ascendant, index === 0 ? null : ancestors[index - 1].ascendant.uuid)
+      )
+    };
+  }, [detail]);
+  if (isError) {
+    return /* @__PURE__ */ jsx29("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__ */ jsxs22("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
+      /* @__PURE__ */ jsx29(Skeleton5, { className: "h-6 w-2/3" }),
+      /* @__PURE__ */ jsx29(Skeleton5, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx29(Skeleton5, { className: "h-4 w-3/4" })
+    ] });
+  }
+  const renderBody = (node, sections) => ({
+    primary: /* @__PURE__ */ jsx29(
+      GenreInfoPanelBody,
+      {
+        toolbar: sections.toolbar,
+        family: sections.family,
+        genreUuid: detail.uuid,
+        genrePlaylist: { ...detail.criteriaPlaylist, tracksCount: detail.tracksCount },
+        wikidataId: detail.wikidataId,
+        scope,
+        getBackendBaseUrl,
+        playback,
+        band: { node, onZoomIn, shareUrl, shareTarget: shareUrl ? shareTarget : void 0 },
+        extras
+      }
+    ),
+    aside: null
+  });
+  return /* @__PURE__ */ jsx29(
+    InfoPanel,
+    {
+      node: view.node,
+      fill: view.fill,
+      textColor: ACCENT_TEXT_COLOR,
+      parentNode: view.parentNode,
+      childNodes: view.childNodes,
+      ancestorNodes: view.ancestorNodes,
+      side: "left",
+      onClose,
+      onSelectNode: (nodeId) => onSelectGenre(nodeId),
+      itemCountLabel: ITEM_COUNT_LABEL,
+      renderInfoPanelBody: renderBody,
+      expanded,
+      onExpandedChange,
+      collapsed,
+      hideExpandButton: onExpandedChange === void 0
+    }
+  );
+}
+
 // src/genre-tree/index.ts
 import {
   GenreTreeSkeleton,
@@ -2461,13 +2624,13 @@ 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 useEffect7, useLayoutEffect as useLayoutEffect2, useRef as useRef5 } from "react";
 import { ListMusic } from "lucide-react";
 import { useTrackList as useTrackList5 } from "@behindthemusictree/app-kit/genre-tree";
 import { TrackListOriginType as TrackListOriginType2 } from "@behindthemusictree/app-kit/genre-tree";
 import { useTrackNoun as useTrackNoun6 } from "@behindthemusictree/app-kit/track-noun";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
-var useBrowserLayoutEffect = typeof window === "undefined" ? useEffect6 : useLayoutEffect2;
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+var useBrowserLayoutEffect = typeof window === "undefined" ? useEffect7 : useLayoutEffect2;
 function TrackListSidebar({
   className: className2 = "",
   renderDuration,
@@ -2489,7 +2652,7 @@ function TrackListSidebar({
   const userScrollIntentTimerRef = useRef5(null);
   const loadMoreSentinelRef = useRef5(null);
   const hasMore = !!trackList && trackList.nextPage !== null;
-  useEffect6(() => {
+  useEffect7(() => {
     const sentinel = loadMoreSentinelRef.current;
     if (!hasMore || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
@@ -2509,11 +2672,11 @@ function TrackListSidebar({
     programmaticScrollTopRef.current = null;
     if (trackListRef.current) trackListRef.current.scrollTop = 0;
   }, [trackList?.origin]);
-  useEffect6(() => {
+  useEffect7(() => {
     const list = trackListRef.current;
     if (!isCollapsed && list?.scrollTop === 0) shouldFollowPlaybackRef.current = true;
   }, [isCollapsed]);
-  useEffect6(
+  useEffect7(
     () => () => {
       if (userScrollIntentTimerRef.current !== null) clearTimeout(userScrollIntentTimerRef.current);
     },
@@ -2567,25 +2730,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__ */ jsxs21(
+  return trackList ? /* @__PURE__ */ jsxs23(
     "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__ */ jsxs21("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
-          /* @__PURE__ */ jsxs21("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
-            /* @__PURE__ */ jsxs21("div", { className: "origin flex text-xl", children: [
-              /* @__PURE__ */ jsx28("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
-              /* @__PURE__ */ jsx28("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__ */ jsx28("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
+        /* @__PURE__ */ jsxs23("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
+          /* @__PURE__ */ jsxs23("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
+            /* @__PURE__ */ jsxs23("div", { className: "origin flex text-xl", children: [
+              /* @__PURE__ */ jsx30("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
+              /* @__PURE__ */ jsx30("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__ */ jsx30("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
             ] }),
-            /* @__PURE__ */ jsxs21("div", { className: "info flex items-center text-sm text-[var(--color-text-muted)]", children: [
+            /* @__PURE__ */ jsxs23("div", { className: "info flex items-center text-sm text-[var(--color-text-muted)]", children: [
               trackList.origin.type === TrackListOriginType2.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === TrackListOriginType2.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
               `${trackList.total} ${trackList.total > 1 ? trackNoun.plural : trackNoun.singular}`
             ] })
           ] }),
-          (isCollapsed && onExpand || !isCollapsed && onMinimize) && /* @__PURE__ */ jsx28(
+          (isCollapsed && onExpand || !isCollapsed && onMinimize) && /* @__PURE__ */ jsx30(
             "button",
             {
               type: "button",
@@ -2594,11 +2757,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__ */ jsx28(ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
+              children: /* @__PURE__ */ jsx30(ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
             }
           )
         ] }),
-        !isCollapsed && /* @__PURE__ */ jsxs21(
+        !isCollapsed && /* @__PURE__ */ jsxs23(
           "ul",
           {
             ref: trackListRef,
@@ -2608,7 +2771,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__ */ jsx28("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ jsx28(
+              trackList.tracks.map((track, index) => /* @__PURE__ */ jsx30("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ jsx30(
                 TrackItem,
                 {
                   track,
@@ -2618,7 +2781,7 @@ function TrackListSidebar({
                   renderArtistLink
                 }
               ) }, track.uuid)),
-              hasMore && /* @__PURE__ */ jsx28("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
+              hasMore && /* @__PURE__ */ jsx30("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
             ]
           }
         )
@@ -2628,7 +2791,7 @@ function TrackListSidebar({
 }
 
 // src/genre-tree/PlayerPanel.tsx
-import { useEffect as useEffect7, useState as useState6 } from "react";
+import { useEffect as useEffect8, useState as useState6 } from "react";
 import { twMerge as twMerge2 } from "tailwind-merge";
 import {
   usePlayer as usePlayer10,
@@ -2642,7 +2805,7 @@ import {
 import { Pause as Pause2, Play as Play3, SkipBack, SkipForward, Volume2, VolumeX } from "lucide-react";
 import { formatTime, useTrackList as useTrackList6 } from "@behindthemusictree/app-kit/genre-tree";
 import { PlayStates as PlayStates3, useCurrentTime, usePlayer as usePlayer9 } from "@behindthemusictree/app-kit/player";
-import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 function PlayerControls() {
   const {
     duration,
@@ -2661,15 +2824,15 @@ function PlayerControls() {
   const safeDuration = Number.isFinite(duration) && duration > 0 ? duration : 0;
   const safeCurrentTime = Number.isFinite(currentTime) ? Math.max(0, Math.min(currentTime, safeDuration)) : 0;
   const isPlaying = playState === PlayStates3.PLAYING;
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs24(
     "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__ */ jsxs22("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
-          /* @__PURE__ */ jsx29("span", { "aria-label": "Elapsed time", children: formatTime(safeCurrentTime) }),
-          /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsxs24("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
+          /* @__PURE__ */ jsx31("span", { "aria-label": "Elapsed time", children: formatTime(safeCurrentTime) }),
+          /* @__PURE__ */ jsx31(
             "input",
             {
               "aria-label": "Seek",
@@ -2683,11 +2846,11 @@ function PlayerControls() {
               onChange: (event) => seekTo(Number(event.currentTarget.value))
             }
           ),
-          /* @__PURE__ */ jsx29("span", { "aria-label": "Duration", children: formatTime(safeDuration) })
+          /* @__PURE__ */ jsx31("span", { "aria-label": "Duration", children: formatTime(safeDuration) })
         ] }),
-        /* @__PURE__ */ jsxs22("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
-          /* @__PURE__ */ jsxs22("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
-            /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsxs24("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
+          /* @__PURE__ */ jsxs24("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsx31(
               "button",
               {
                 type: "button",
@@ -2696,10 +2859,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__ */ jsx29(SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx31(SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             ),
-            /* @__PURE__ */ jsx29(
+            /* @__PURE__ */ jsx31(
               "button",
               {
                 type: "button",
@@ -2708,10 +2871,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__ */ jsx29(Pause2, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ jsx29(Play3, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
+                children: isPlaying ? /* @__PURE__ */ jsx31(Pause2, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ jsx31(Play3, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
               }
             ),
-            /* @__PURE__ */ jsx29(
+            /* @__PURE__ */ jsx31(
               "button",
               {
                 type: "button",
@@ -2720,14 +2883,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__ */ jsx29(SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx31(SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs22("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__ */ jsx29(VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ jsx29(Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
-            /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Volume" }),
-            /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsxs24("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__ */ jsx31(VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ jsx31(Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
+            /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "Volume" }),
+            /* @__PURE__ */ jsx31(
               "input",
               {
                 "aria-label": "Volume",
@@ -2749,7 +2912,7 @@ function PlayerControls() {
 }
 
 // src/genre-tree/PlayerPanel.tsx
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 var PANEL_ID = "player-panel";
 var DEFAULT_EXTENDED_WIDTH = "calc(100vw - var(--layout-center-left) - var(--layout-gutter))";
 function PlayerPanel({
@@ -2764,7 +2927,7 @@ function PlayerPanel({
   const { toggleTrackListSidebar, isTrackListSidebarVisible } = useTrackListSidebarVisibility();
   const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = useState6("");
   const loadedTrackTitle = playerTrackObject?.track.title;
-  useEffect7(() => {
+  useEffect8(() => {
     if (loadedTrackTitle) setLastLoadedTrackTitle(loadedTrackTitle);
   }, [loadedTrackTitle]);
   const [uncontrolledExtended, setUncontrolledExtended] = useState6(false);
@@ -2788,7 +2951,7 @@ function PlayerPanel({
     onClick: () => setIsExtendRequested(true),
     expanded: false
   } : null;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       id: PANEL_ID,
@@ -2801,7 +2964,7 @@ function PlayerPanel({
       ),
       style: isExtended ? { width: extendedWidth } : void 0,
       children: [
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx32(
           PanelEdgeTab,
           {
             side: "right",
@@ -2811,7 +2974,7 @@ function PlayerPanel({
             className: "absolute right-full top-1/2 -translate-y-1/2"
           }
         ),
-        /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs25(
           "div",
           {
             className: twMerge2(
@@ -2819,15 +2982,15 @@ function PlayerPanel({
               isExtended ? "flex-row" : "flex-col"
             ),
             children: [
-              /* @__PURE__ */ jsxs23("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
-                /* @__PURE__ */ jsx30("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ jsx30("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
-                /* @__PURE__ */ jsxs23("div", { className: "relative w-full shrink-0", children: [
-                  /* @__PURE__ */ jsx30(PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
-                  playerTrackObject?.loadError && /* @__PURE__ */ jsx30("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
+              /* @__PURE__ */ jsxs25("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
+                /* @__PURE__ */ jsx32("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ jsx32("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
+                /* @__PURE__ */ jsxs25("div", { className: "relative w-full shrink-0", children: [
+                  /* @__PURE__ */ jsx32(PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
+                  playerTrackObject?.loadError && /* @__PURE__ */ jsx32("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
                 ] }),
-                /* @__PURE__ */ jsx30(PlayerControls, {})
+                /* @__PURE__ */ jsx32(PlayerControls, {})
               ] }),
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx32(
                 TrackListSidebar,
                 {
                   layout: "inline",
@@ -2853,11 +3016,11 @@ function PlayerPanel({
 import { v4 as uuidv4 } from "uuid";
 import { AiFillStar, AiOutlineStar } from "react-icons/ai";
 import { FORM_RATING_NULL_VALUE } from "@behindthemusictree/app-kit/genre-tree";
-import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 function Rating({ rating, handleChange }) {
   const instanceId = uuidv4();
-  return /* @__PURE__ */ jsx31("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsxs24("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsxs26("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
+    /* @__PURE__ */ jsx33(
       "input",
       {
         id: `star-${instanceId}-${i}`,
@@ -2869,16 +3032,16 @@ function Rating({ rating, handleChange }) {
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ jsx31("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ jsxs24("div", { className: "flex", children: [
-      /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx33("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ jsxs26("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx33(
         AiOutlineStar,
         {
           className: `w-7 h-7 absolute top-0 left-0 ${rating === FORM_RATING_NULL_VALUE ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
         }
       ),
-      /* @__PURE__ */ jsx31("span", { className: "flex-grow w-8" }),
+      /* @__PURE__ */ jsx33("span", { className: "flex-grow w-8" }),
       " "
-    ] }) : /* @__PURE__ */ jsx31(
+    ] }) : /* @__PURE__ */ jsx33(
       AiFillStar,
       {
         className: `w-7 h-7 absolute top-0 left-0 ${(rating ?? -1) >= i ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
@@ -2888,12 +3051,17 @@ function Rating({ rating, handleChange }) {
 }
 
 export {
+  useGenrePlaylistPlayback,
   GenrePlaylistTreePerRoot,
   GenreSearch,
+  GenreNodeActionBand,
+  GenreInfoPanelBody,
   PanelEdgeTab,
+  useLeftDetailPanelLayout,
   TrackPositionPlayPause,
   TrackItem,
   GenreTreeView,
+  GenreDetailPanel,
   TrackListSidebar,
   PlayerPanel,
   Rating,
@@ -2902,4 +3070,4 @@ export {
   GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
   GenreTreeOutlineSkeleton
 };
-//# sourceMappingURL=chunk-5PQWJRDZ.js.map
+//# sourceMappingURL=chunk-TFLX6C5Q.js.map