@behindthemusictree/app-kit-ui 30.0.0 → 32.0.0

package/dist/{chunk-2HE2HDFA.js → chunk-QGGVPIXY.js}

@@ -5,13 +5,17 @@ import {
 } from "./chunk-DKQQLLMY.js";
 
 // src/genre-tree/GenreTreeView.tsx
-import { useCallback as useCallback6, useDeferredValue, useEffect as useEffect6, useMemo as useMemo7, useRef as useRef4, useState as useState7 } from "react";
+import { useCallback as useCallback6, useDeferredValue, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef3, useState as useState8 } from "react";
 import { useIsMutating } from "@tanstack/react-query";
 import { Plus as Plus2 } from "lucide-react";
-import { IconTextButton, Button, SegmentedControl as SegmentedControl2 } from "@behindthemusictree/ui";
+import { Maximize2, Minimize2 } from "lucide-react";
+import { IconTextButton, IconButton, Button, SegmentedControl as SegmentedControl2, DetailPanel, useObscuredInset } from "@behindthemusictree/ui";
 import {
+  GenreNodeAncestors,
+  GenreNodeFamily,
   GenreTreeWheelSkeleton,
-  GenreTreeViewSkeleton
+  GenreTreeViewSkeleton,
+  useGenreNodeRelations
 } from "@behindthemusictree/genre-tree-view";
 import {
   useArtistSearch,
@@ -21,6 +25,32 @@ import {
 import { useGenreTreeViewState, useArtist as useArtist2, useUpdateGenre as useUpdateGenre2, genreUpdateMutationKey } from "@behindthemusictree/app-kit/genre-tree";
 import { usePopup as usePopup5 } from "@behindthemusictree/app-kit/popup";
 
+// src/genre-tree/playlist-tree/size-metric.ts
+var hasViewsCount = (genrePlaylists) => genrePlaylists.every((genrePlaylist) => genrePlaylist.viewsCount !== void 0);
+var genrePlaylistSize = (genrePlaylist, metric) => {
+  if (metric === "songs") return genrePlaylist.tracksCount;
+  if (genrePlaylist.viewsCount === void 0) {
+    throw new Error(`Genre playlist ${genrePlaylist.uuid} has no viewsCount to size by views`);
+  }
+  return genrePlaylist.viewsCount;
+};
+
+// src/genre-tree/playlist-tree/toTreeNodes.ts
+function toTreeNodes(genrePlaylists, sizeMetric) {
+  return genrePlaylists.map((genrePlaylist) => ({
+    id: genrePlaylist.uuid,
+    parentId: genrePlaylist.parent?.uuid ?? null,
+    name: genrePlaylist.name,
+    itemCount: genrePlaylistSize(genrePlaylist, sizeMetric),
+    actionable: Boolean(genrePlaylist.criteria),
+    detached: !genrePlaylist.criteria,
+    side: genrePlaylist.criteria?.side ?? void 0,
+    wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
+    umbrella: genrePlaylist.isUmbrella,
+    scene: genrePlaylist.scene ?? void 0
+  }));
+}
+
 // src/genre-tree/playlist-tree/TreePerRoot.tsx
 import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
 import {
@@ -63,7 +93,6 @@ function useGenrePlaylistPlayback({
 }
 
 // src/genre-tree/playlist-tree/TreePerRoot.tsx
-import { capitalize, useTrackNoun } from "@behindthemusictree/app-kit/track-noun";
 import { jsx } from "react/jsx-runtime";
 function GenrePlaylistTreePerRoot({
   scope,
@@ -75,24 +104,19 @@ function GenrePlaylistTreePerRoot({
   additionalActions,
   onNodeClick,
   onNodeHover,
-  renderInfoPanelBody,
   selectedNodeId,
   onSelectedNodeChange,
-  hideInfoPanelClose,
-  hideInfoPanelTitle,
   readOnly = false,
-  showToolbar,
   wheelZoom,
   defaultViewport,
   viewportRestore,
   onViewportChange,
   playback,
-  ...infoPanelCuration
+  ...hostPanel
 }) {
   const { isPlaying, setIsPlaying } = usePlayer();
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists: genrePlaylistTreePerRoot });
   const { playingNodeId, play } = playback ?? defaultPlayback;
-  const trackNoun = useTrackNoun();
   const { showPopup } = usePopup();
   const nodes = useMemo2(
     () => genrePlaylistTreePerRoot.map((genrePlaylist) => ({
@@ -157,7 +181,6 @@ function GenrePlaylistTreePerRoot({
     {
       className: className2,
       nodes,
-      itemCountLabel: `${capitalize(trackNoun.singular)} count`,
       rootColor: getGenreTreeColor(rootUuid),
       playingNodeId,
       playState: isPlaying ? "playing" : "paused",
@@ -168,18 +191,13 @@ function GenrePlaylistTreePerRoot({
       additionalActions,
       onNodeClick,
       onNodeHover,
-      renderInfoPanelBody,
       selectedNodeId,
       onSelectedNodeChange,
-      hideInfoPanelClose,
-      hideInfoPanelTitle,
-      showToolbar,
       wheelZoom,
       defaultViewport,
       viewportRestore,
       onViewportChange,
-      ...infoPanelCuration,
-      readOnly
+      ...hostPanel
     }
   );
 }
@@ -192,19 +210,6 @@ import {
 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);
-var genrePlaylistSize = (genrePlaylist, metric) => {
-  if (metric === "songs") return genrePlaylist.tracksCount;
-  if (genrePlaylist.viewsCount === void 0) {
-    throw new Error(`Genre playlist ${genrePlaylist.uuid} has no viewsCount to size by views`);
-  }
-  return genrePlaylist.viewsCount;
-};
-
-// src/genre-tree/playlist-tree/TreeWheel.tsx
-import { capitalize as capitalize2, useTrackNoun as useTrackNoun2 } from "@behindthemusictree/app-kit/track-noun";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function GenrePlaylistTreeWheel({
   scope,
@@ -215,14 +220,10 @@ function GenrePlaylistTreeWheel({
   additionalActions,
   onNodeClick,
   onNodeHover,
-  renderInfoPanelBody,
   selectedNodeId,
   onSelectedNodeChange,
-  hideInfoPanelClose,
-  hideInfoPanelTitle,
   readOnly = false,
   allowWheelRotation,
-  showToolbar,
   sizeMetric = "songs",
   floatingControlsLeading,
   busy,
@@ -230,12 +231,11 @@ function GenrePlaylistTreeWheel({
   viewportRestore,
   onViewportChange,
   playback,
-  ...infoPanelCuration
+  ...hostPanel
 }) {
   const { isPlaying, setIsPlaying } = usePlayer2();
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists });
   const { playingNodeId, play } = playback ?? defaultPlayback;
-  const trackNoun = useTrackNoun2();
   const { showPopup } = usePopup2();
   const nodes = useMemo3(
     () => genrePlaylists.map((genrePlaylist) => ({
@@ -299,7 +299,6 @@ function GenrePlaylistTreeWheel({
     {
       className: className2,
       nodes,
-      itemCountLabel: sizeMetric === "views" ? "Views" : `${capitalize2(trackNoun.singular)} count`,
       playingNodeId,
       playState: isPlaying ? "playing" : "paused",
       onPlayPause: handlePlayPause,
@@ -309,20 +308,15 @@ function GenrePlaylistTreeWheel({
       additionalActions,
       onNodeClick,
       onNodeHover,
-      renderInfoPanelBody,
       selectedNodeId,
       onSelectedNodeChange,
-      hideInfoPanelClose,
-      hideInfoPanelTitle,
       allowWheelRotation,
-      showToolbar,
       floatingControlsLeading,
       busy,
       defaultViewport,
       viewportRestore,
       onViewportChange,
-      ...infoPanelCuration,
-      readOnly
+      ...hostPanel
     }
   );
 }
@@ -334,7 +328,6 @@ import {
   GenreTreeWheelRadialPopCore
 } from "@behindthemusictree/genre-tree-view";
 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 {
@@ -346,14 +339,10 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     additionalActions,
     onNodeClick,
     onNodeHover,
-    renderInfoPanelBody,
     selectedNodeId,
     onSelectedNodeChange,
-    hideInfoPanelClose,
-    hideInfoPanelTitle,
     readOnly = false,
     allowWheelRotation,
-    showToolbar,
     sizeMetric = "songs",
     floatingControlsLeading,
     busy,
@@ -364,33 +353,14 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     playback
   } = props;
   const focus = props;
-  const infoPanelCuration = {
-    renderDangerZone: props.renderDangerZone,
-    expanded: props.expanded,
-    onExpandedChange: props.onExpandedChange,
-    collapsed: props.collapsed,
-    hideExpandButton: props.hideExpandButton,
-    overlayPanel: props.overlayPanel
+  const hostPanel = {
+    obscuredInset: props.obscuredInset,
+    onNodeStyleResolverChange: props.onNodeStyleResolverChange
   };
   const { isPlaying, setIsPlaying } = usePlayer3();
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists });
   const { playingNodeId, play } = playback ?? defaultPlayback;
-  const trackNoun = useTrackNoun3();
-  const nodes = useMemo4(
-    () => genrePlaylists.map((genrePlaylist) => ({
-      id: genrePlaylist.uuid,
-      parentId: genrePlaylist.parent?.uuid ?? null,
-      name: genrePlaylist.name,
-      itemCount: genrePlaylistSize(genrePlaylist, sizeMetric),
-      actionable: Boolean(genrePlaylist.criteria),
-      detached: !genrePlaylist.criteria,
-      side: genrePlaylist.criteria?.side ?? void 0,
-      wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
-      umbrella: genrePlaylist.isUmbrella,
-      scene: genrePlaylist.scene ?? void 0
-    })),
-    [genrePlaylists, sizeMetric]
-  );
+  const nodes = useMemo4(() => toTreeNodes(genrePlaylists, sizeMetric), [genrePlaylists, sizeMetric]);
   const handlePlayPause = useCallback4(
     (nodeId) => {
       const genrePlaylist = genrePlaylists.find((g) => g.uuid === nodeId);
@@ -431,7 +401,6 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
   const treeProps = {
     className: className2,
     nodes,
-    itemCountLabel: sizeMetric === "views" ? "Views" : `${capitalize3(trackNoun.singular)} count`,
     playingNodeId,
     playState: isPlaying ? "playing" : "paused",
     onPlayPause: handlePlayPause,
@@ -441,14 +410,9 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     additionalActions,
     onNodeClick,
     onNodeHover,
-    renderInfoPanelBody,
     selectedNodeId,
     onSelectedNodeChange,
-    hideInfoPanelClose,
-    hideInfoPanelTitle,
-    showToolbar,
-    ...infoPanelCuration,
-    readOnly
+    ...hostPanel
   };
   return outline ? /* @__PURE__ */ jsx3(GenreTreeOutline, { ...treeProps }) : /* @__PURE__ */ jsx3(
     GenreTreeWheelRadialPopCore,
@@ -568,7 +532,7 @@ function GenreSearch({
         type: "button",
         "aria-label": "Previous",
         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)]",
+        className: "genre-search-previous absolute left-2 top-1/2 z-10 flex items-center justify-center p-1.5 [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] [@media(pointer:coarse)]:min-w-[var(--layout-touch-target)] text-[var(--color-text-muted)] rounded-full -translate-y-1/2 hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-text)]",
         onClick: onPrevious,
         children: /* @__PURE__ */ jsx5(ArrowLeft, { "aria-hidden": "true", className: "w-4 h-4" })
       }
@@ -590,7 +554,7 @@ function GenreSearch({
         onPick: handlePick,
         status,
         loading: loading ? "Searching\u2026" : void 0,
-        inputClassName: "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",
+        inputClassName: `h-[var(--layout-search-h,3rem)] ${onPrevious ? "pl-11" : "pl-6"} pr-20 text-base transition-[padding] duration-200 ease-out motion-reduce:transition-none bg-[var(--color-surface)] border-[var(--color-border)] rounded-full shadow-md`,
         className: "genre-search-results z-40 rounded-xl shadow-md",
         listClassName: "max-h-[min(20rem,50dvh)]",
         optionClassName: "[@media(pointer:coarse)]:min-h-[var(--layout-touch-target)]"
@@ -952,7 +916,7 @@ function GenreActionBand({
 }
 
 // src/genre-tree/GenreDetailExtras.tsx
-import { Skeleton as Skeleton2 } from "@behindthemusictree/ui";
+import { PanelSection as PanelSection2, Skeleton as Skeleton2 } from "@behindthemusictree/ui";
 import { useFetchGenreOverview } from "@behindthemusictree/app-kit/genre-tree";
 
 // src/genre-tree/ClampedText.tsx
@@ -983,11 +947,11 @@ function ClampedText({ children, className: className2 = "" }) {
 }
 
 // src/genre-tree/GenrePlaylistTracks.tsx
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useState as useState5 } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { z } from "zod";
 import { FaPlay, FaPause } from "react-icons/fa";
-import { RingLoader, Skeleton } from "@behindthemusictree/ui";
+import { PanelSection, RingLoader, Skeleton } from "@behindthemusictree/ui";
 import { useSession } from "@behindthemusictree/app-kit/auth";
 import { useFetchWrapper } from "@behindthemusictree/app-kit/transport";
 import { PaginatedResponseSchema } from "@behindthemusictree/app-kit/transport";
@@ -1027,7 +991,7 @@ function MusicBrainzRecordingLink({
 
 // 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 { capitalize, useTrackNoun } 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({
@@ -1061,7 +1025,7 @@ function GenrePlaylistTracks({
   const { session, sessionRestored } = useSession();
   const { playerTrackObject, playState, handlePlayPauseAction } = usePlayer4();
   const { showPopup } = usePopup4();
-  const trackNoun = useTrackNoun4();
+  const trackNoun = useTrackNoun();
   const { uuid } = genrePlaylist;
   const { fetch } = useFetchWrapper(getBackendBaseUrl);
   const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteQuery({
@@ -1082,9 +1046,8 @@ function GenrePlaylistTracks({
     getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
     enabled: scope !== "me" || sessionRestored && !!session?.accessToken
   });
-  const sentinelRef = useRef3(null);
+  const [sentinel, setSentinel] = useState5(null);
   useEffect3(() => {
-    const sentinel = sentinelRef.current;
     if (!hasNextPage || isFetchingNextPage || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
       if (entries.some((entry) => entry.isIntersecting)) {
@@ -1093,7 +1056,7 @@ function GenrePlaylistTracks({
     });
     observer.observe(sentinel);
     return () => observer.disconnect();
-  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage, sentinel]);
   const pages = data?.pages ?? [];
   const tracks = pages.flatMap((page) => page.tracks);
   const total = pages[0]?.total ?? void 0;
@@ -1104,11 +1067,7 @@ function GenrePlaylistTracks({
       showPopup(/* @__PURE__ */ jsx13(InternalErrorPopup, { errorCode: ErrorCode3.CLIENT_UNKNOWN }));
     });
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "gtv-info-panel-children", children: [
-    /* @__PURE__ */ jsxs9("span", { className: "gtv-info-panel-children-title", children: [
-      capitalize4(trackNoun.plural),
-      total !== void 0 && ` (${total})`
-    ] }),
+  return /* @__PURE__ */ jsx13(PanelSection, { title: `${capitalize(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ jsxs9("div", { children: [
     renderTracksToolbar?.(),
     isPending ? /* @__PURE__ */ jsx13(Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ jsxs9("p", { role: "alert", children: [
       "Couldn't load ",
@@ -1171,13 +1130,13 @@ function GenrePlaylistTracks({
           track.uuid
         );
       }),
-      hasNextPage && /* @__PURE__ */ jsx13("li", { ref: sentinelRef, "aria-hidden": "true", className: "h-4" })
+      hasNextPage && /* @__PURE__ */ jsx13("li", { ref: setSentinel, "aria-hidden": "true", className: "h-4" })
     ] })
-  ] });
+  ] }) });
 }
 
 // src/genre-tree/GenreDetailExtras.tsx
-import { useTrackNoun as useTrackNoun5 } from "@behindthemusictree/app-kit/track-noun";
+import { useTrackNoun as useTrackNoun2 } from "@behindthemusictree/app-kit/track-noun";
 import { SiWikidata, SiWikipedia } from "react-icons/si";
 import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function GenreDetailExtras({
@@ -1195,7 +1154,7 @@ function GenreDetailExtras({
   family,
   ...trackSlots
 }) {
-  const trackNoun = useTrackNoun5();
+  const trackNoun = useTrackNoun2();
   const { data: overview, isPending } = useFetchGenreOverview(
     genreUuid,
     scope,
@@ -1204,10 +1163,7 @@ function GenreDetailExtras({
   );
   if (isPending) {
     return /* @__PURE__ */ jsxs10(Fragment6, { children: [
-      /* @__PURE__ */ jsxs10("div", { className: "gtv-info-panel-children", "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: [
-        /* @__PURE__ */ jsx14("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
-        /* @__PURE__ */ jsx14(Skeleton2, { className: "h-4 w-3/4" })
-      ] }),
+      /* @__PURE__ */ jsx14(PanelSection2, { title: "Summary", children: /* @__PURE__ */ jsx14("div", { "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: /* @__PURE__ */ jsx14(Skeleton2, { className: "h-4 w-3/4" }) }) }),
       family
     ] });
   }
@@ -1215,50 +1171,38 @@ function GenreDetailExtras({
   const { summary, summarySourceUrl, essentialSongs } = overview;
   const wikidataUrl = wikidataId ? `https://www.wikidata.org/wiki/${encodeURIComponent(wikidataId)}` : null;
   return /* @__PURE__ */ jsxs10(Fragment6, { children: [
-    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ jsxs10("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ jsx14("span", { className: "gtv-info-panel-children-title", children: "Links" }),
-      /* @__PURE__ */ jsxs10("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs", children: [
-        summarySourceUrl && /* @__PURE__ */ jsxs10(
-          "a",
-          {
-            href: summarySourceUrl,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
-            children: [
-              /* @__PURE__ */ jsx14(SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
-              "Wikipedia"
-            ]
-          }
-        ),
-        wikidataUrl && /* @__PURE__ */ jsxs10(
-          "a",
-          {
-            href: wikidataUrl,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
-            children: [
-              /* @__PURE__ */ jsx14(SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
-              "Wikidata"
-            ]
-          }
-        )
-      ] })
-    ] }),
-    renderSummary ? renderSummary(overview) : /* @__PURE__ */ jsxs10("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ jsx14("span", { className: "gtv-info-panel-children-title", children: "Summary" }),
-      /* @__PURE__ */ jsx14(ClampedText, { className: "mt-1", children: summary ?? "\u2014" }, genreUuid)
-    ] }),
+    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ jsx14(PanelSection2, { title: "Links", children: /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--color-text)]", children: [
+      summarySourceUrl && /* @__PURE__ */ jsxs10(
+        "a",
+        {
+          href: summarySourceUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
+          children: [
+            /* @__PURE__ */ jsx14(SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            "Wikipedia"
+          ]
+        }
+      ),
+      wikidataUrl && /* @__PURE__ */ jsxs10(
+        "a",
+        {
+          href: wikidataUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
+          children: [
+            /* @__PURE__ */ jsx14(SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            "Wikidata"
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx14(PanelSection2, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ jsx14(ClampedText, { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
     family,
     renderGenreDetailExtras?.(overview),
-    renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && /* @__PURE__ */ jsxs10("div", { className: "gtv-info-panel-children text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: [
-      /* @__PURE__ */ jsxs10("span", { className: "gtv-info-panel-children-title", children: [
-        "Essential ",
-        trackNoun.plural
-      ] }),
-      essentialSongs.length > 0 ? /* @__PURE__ */ jsx14("ul", { className: "mt-1 divide-y divide-[var(--color-border)]", children: essentialSongs.map((track) => /* @__PURE__ */ jsx14("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ jsx14("p", { className: "mt-1", children: "\u2014" })
-    ] }),
+    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ jsx14(PanelSection2, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ jsx14("ul", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ jsx14("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ jsx14("p", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: "\u2014" }) }),
     /* @__PURE__ */ jsx14(
       GenrePlaylistTracks,
       {
@@ -1329,69 +1273,13 @@ function GenreInfoPanelBody({
   ] });
 }
 
-// src/genre-tree/PanelEdgeTab.tsx
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { twMerge } from "tailwind-merge";
-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__ */ jsx16(
-    "button",
-    {
-      type: "button",
-      "aria-label": action.label,
-      title: action.label,
-      "aria-controls": controls,
-      "aria-expanded": action.expanded,
-      className: buttonClassName,
-      onClick: action.onClick,
-      children: icon
-    }
-  );
-  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__ */ jsxs12(
-    "div",
-    {
-      className: twMerge(
-        "panel-edge-tab flex w-[var(--layout-edge-tab-w)] flex-col overflow-hidden bg-[var(--color-surface)] shadow-[0_1px_2px_rgba(60,64,67,0.3),0_2px_6px_2px_rgba(60,64,67,0.15)] [clip-path:inset(-0.5rem_-0.5rem_-0.5rem_0)]",
-        isLeft ? "rounded-r-lg" : "rounded-l-lg [clip-path:inset(-0.5rem_0_-0.5rem_-0.5rem)]",
-        className2
-      ),
-      children: [
-        buttons[0],
-        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 useEffect5, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo6 } from "react";
 import {
   getReparentCandidates,
   useUpdateGenre
 } from "@behindthemusictree/app-kit/genre-tree";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function ChangeParentPopup({
   genrePlaylist,
   genrePlaylists,
@@ -1419,19 +1307,19 @@ function ChangeParentPopup({
       }
     );
   };
-  useEffect5(() => {
+  useEffect4(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") onClose();
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
-  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: [
+  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: [
       "Current parent: ",
       genrePlaylist.parent?.name ?? "none"
     ] }),
-    /* @__PURE__ */ jsx17("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx16("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ jsx16(
       GenreSearch,
       {
         genrePlaylists: candidates,
@@ -1439,7 +1327,7 @@ function ChangeParentPopup({
         placeholder: "Search a new parent\u2026"
       }
     ) }),
-    formErrors.length > 0 && /* @__PURE__ */ jsx17("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
+    formErrors.length > 0 && /* @__PURE__ */ jsx16("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
   ] });
 }
 
@@ -1463,7 +1351,7 @@ import {
   SiYoutube
 } from "react-icons/si";
 import { Chip } from "@behindthemusictree/ui";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var LINK_KINDS = {
   official: { label: "Official website", Icon: Globe },
   wikipedia: { label: "Wikipedia", Icon: SiWikipedia2 },
@@ -1500,7 +1388,7 @@ function artistLinks(artist) {
   return links;
 }
 function ArtistLinks({ links }) {
-  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)) });
+  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)) });
 }
 
 // src/genre-tree/artist/formatYears.ts
@@ -1511,7 +1399,7 @@ function formatYears(beginYear, endYear, ended) {
 }
 
 // src/genre-tree/artist/ArtistHeader.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var countryNames = new Intl.DisplayNames(["en"], { type: "region" });
 function ArtistHeader({ artist }) {
   const fields = [];
@@ -1521,35 +1409,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__ */ jsx19(ArtistLinks, { links }) });
+  if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ jsx18(ArtistLinks, { links }) });
   if (fields.length === 0) return null;
-  return /* @__PURE__ */ jsx19(FieldList, { items: fields });
+  return /* @__PURE__ */ jsx18(FieldList, { items: fields });
 }
 
 // src/genre-tree/artist/ArtistPhoto.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function ExternalLink({ href, children }) {
-  return /* @__PURE__ */ jsx20("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
+  return /* @__PURE__ */ jsx19("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
 }
 function ArtistPhoto({ image, name }) {
-  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: [
+  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: [
       "Photo: ",
-      /* @__PURE__ */ jsx20(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
+      /* @__PURE__ */ jsx19(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
       ",",
       " ",
-      image.licenseUrl ? /* @__PURE__ */ jsx20(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
+      image.licenseUrl ? /* @__PURE__ */ jsx19(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
     ] })
   ] });
 }
 
 // src/genre-tree/artist/ArtistMembers.tsx
-import { PanelGroup, PanelSection } from "@behindthemusictree/ui";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { PanelGroup, PanelSection as PanelSection3 } from "@behindthemusictree/ui";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function MembershipList({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
-  return /* @__PURE__ */ jsx21(PanelGroup, { title, children: /* @__PURE__ */ jsx21("ul", { children: memberships.map((membership, index) => {
+  return /* @__PURE__ */ jsx20(PanelGroup, { title, children: /* @__PURE__ */ jsx20("ul", { children: memberships.map((membership, index) => {
     const details = [
       formatYears(membership.beginYear, membership.endYear, membership.ended),
       ...membership.roles
@@ -1557,9 +1445,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__ */ 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: [
+      /* @__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: [
           " \u2014 ",
           detailsText
         ] })
@@ -1570,9 +1458,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__ */ jsxs15(PanelSection, { title, children: [
-    /* @__PURE__ */ jsx21(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs14(PanelSection3, { title, children: [
+    /* @__PURE__ */ jsx20(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
+    /* @__PURE__ */ jsx20(
       MembershipList,
       {
         title: "Past",
@@ -1584,8 +1472,8 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
 }
 
 // src/genre-tree/artist/ArtistDiscography.tsx
-import { PanelGroup as PanelGroup2, PanelSection as PanelSection2 } from "@behindthemusictree/ui";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { PanelGroup as PanelGroup2, PanelSection as PanelSection4 } from "@behindthemusictree/ui";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var GROUPS = ["Albums", "EPs", "Singles", "Live", "Compilations", "Other"];
 var PRIMARY_GROUPS = { album: "Albums", ep: "EPs", single: "Singles" };
 function discographyGroup({ primaryType, secondaryTypes }) {
@@ -1605,21 +1493,21 @@ function byYear(a, b) {
 function ArtistDiscography({ albums }) {
   if (albums.length === 0) return null;
   const sorted = [...albums].sort(byYear);
-  return /* @__PURE__ */ jsx22(PanelSection2, { title: "Discography", children: GROUPS.map((group) => {
+  return /* @__PURE__ */ jsx21(PanelSection4, { title: "Discography", children: GROUPS.map((group) => {
     const groupAlbums = sorted.filter((album) => discographyGroup(album) === group);
     if (groupAlbums.length === 0) return null;
-    return /* @__PURE__ */ 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 })
+    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 })
     ] }, album.uuid)) }) }, group);
   }) });
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { keepPreviousData } from "@tanstack/react-query";
 import { Play as Play2 } from "lucide-react";
-import { Pagination, PanelSection as PanelSection3, Skeleton as Skeleton3 } from "@behindthemusictree/ui";
+import { Pagination, PanelSection as PanelSection5, Skeleton as Skeleton3 } from "@behindthemusictree/ui";
 import { usePlayer as usePlayer8 } from "@behindthemusictree/app-kit/player";
 import {
   SongDetailedSchema as SongDetailedSchema2,
@@ -1637,7 +1525,7 @@ import { useTrackList as useTrackList3 } from "@behindthemusictree/app-kit/genre
 import { FaPlay as FaPlay2, FaPause as FaPause2 } from "react-icons/fa";
 import { usePlayer as usePlayer6 } from "@behindthemusictree/app-kit/player";
 import { PlayStates as PlayStates2 } from "@behindthemusictree/app-kit/player";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function TrackPositionPlayPause({
   position,
   uuid,
@@ -1651,14 +1539,14 @@ function TrackPositionPlayPause({
   const isPlaying = isThisTrack && isConfirmedPlayable && playState === PlayStates2.PLAYING;
   const isPaused = isThisTrack && isConfirmedPlayable && playState === PlayStates2.PAUSED;
   const isCurrentTrackActive = isPlaying || isPaused;
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs16(
     "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__ */ 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(
+        /* @__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(
           "span",
           {
             className: "track-position-play-pause__bars",
@@ -1666,18 +1554,18 @@ function TrackPositionPlayPause({
             role: "img",
             "aria-label": isPlaying ? "Playing" : "Paused",
             children: [
-              /* @__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" })
+              /* @__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" })
             ]
           }
         ) : position }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx22(
           "div",
           {
             className: `hidden group-hover:flex items-center justify-center ${isCurrentTrackActive ? "" : "absolute inset-0"}`,
             "aria-hidden": "true",
-            children: isAwaitingPlayback ? /* @__PURE__ */ jsx23("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ jsx23(FaPause2, {}) : /* @__PURE__ */ jsx23(FaPlay2, {})
+            children: isAwaitingPlayback ? /* @__PURE__ */ jsx22("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ jsx22(FaPause2, {}) : /* @__PURE__ */ jsx22(FaPlay2, {})
           }
         )
       ]
@@ -1688,7 +1576,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 jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 function TrackItem({
   track,
   position,
@@ -1712,12 +1600,12 @@ function TrackItem({
       loadTrackForPlayer(track.uuid);
     }
   };
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: `track-item flex h-14 text-[var(--color-text)] ${isUnplayable ? "opacity-50" : "hover:bg-[var(--color-surface-muted)] group"}`,
       children: [
-        isUnplayable ? /* @__PURE__ */ jsx24(
+        isUnplayable ? /* @__PURE__ */ jsx23(
           "div",
           {
             className: "flex items-center justify-center text-lg w-16",
@@ -1725,7 +1613,7 @@ function TrackItem({
             "aria-disabled": "true",
             children: position
           }
-        ) : /* @__PURE__ */ jsx24(
+        ) : /* @__PURE__ */ jsx23(
           TrackPositionPlayPause,
           {
             position,
@@ -1734,12 +1622,12 @@ function TrackItem({
             isSelected: selectedTrack?.uuid === track.uuid
           }
         ),
-        /* @__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: renderSongLink ? renderSongLink(track) : 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__ */ 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: renderSongLink ? renderSongLink(track) : 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__ */ 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(
+        /* @__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(
           "div",
           {
             className: "duration flex text-base w-16 items-center justify-center",
@@ -1747,22 +1635,22 @@ function TrackItem({
             children: renderDuration(track)
           }
         ),
-        renderActions && /* @__PURE__ */ jsx24("div", { className: "edit flex text-base w-6 items-center justify-center mr-2 cursor-pointer", children: renderActions(track) })
+        renderActions && /* @__PURE__ */ jsx23("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 Fragment8, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var SongPageSchema2 = PaginatedResponseSchema2(SongDetailedSchema2);
 var SORTS = [
   { ordering: "title", label: "Title" },
   { ordering: "-albumYear", label: "Year" }
 ];
 function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLink }) {
-  const [page, setPage] = useState5(1);
-  const [ordering, setOrdering] = useState5("title");
+  const [page, setPage] = useState6(1);
+  const [ordering, setOrdering] = useState6("title");
   const { fetch } = useFetchWrapper2(getBackendBaseUrl);
   const { playNewTrackListFromArtist } = useTrackList4();
   const { playerTrackObject } = usePlayer8();
@@ -1787,21 +1675,21 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
     event.stopPropagation();
     void play(song.uuid);
   };
-  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(Fragment8, { children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
-      /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx24(PanelSection5, { title: "Songs", children: isPending ? /* @__PURE__ */ jsx24(Skeleton3, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ jsx24("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ jsx24("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ jsxs18(Fragment8, { children: [
+    /* @__PURE__ */ jsxs18("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
+      /* @__PURE__ */ jsxs18(
         "button",
         {
           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__ */ jsx25(Play2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx24(Play2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
             "Play all"
           ]
         }
       ),
-      /* @__PURE__ */ jsx25("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx24("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ jsx24(
         "button",
         {
           type: "button",
@@ -1816,7 +1704,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         sort.ordering
       )) })
     ] }),
-    /* @__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(
+    /* @__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(
       TrackItem,
       {
         track: song,
@@ -1825,12 +1713,12 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         renderSongLink
       }
     ) }, song.uuid)) }),
-    /* @__PURE__ */ jsx25(Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
+    /* @__PURE__ */ jsx24(Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
   ] }) });
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 function useArtistPanel({
   uuid,
   scope,
@@ -1851,26 +1739,26 @@ function useArtistPanel({
       return {
         ...panel,
         title: "Artist",
-        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" })
+        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" })
         ] })
       };
     case "not-found":
       return {
         ...panel,
         title: "Artist not found",
-        content: /* @__PURE__ */ jsx26("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This artist does not exist." })
+        content: /* @__PURE__ */ jsx25("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__ */ jsx26("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
+        content: /* @__PURE__ */ jsx25("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this artist." })
       };
     case "success": {
       const { artist } = result;
@@ -1879,13 +1767,13 @@ function useArtistPanel({
       return {
         ...panel,
         title: artist.name,
-        content: /* @__PURE__ */ jsxs20(Fragment9, { 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(
+        content: /* @__PURE__ */ jsxs19(Fragment9, { 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(
             ArtistSongs,
             {
               artist: { uuid: artist.uuid, name: artist.name },
@@ -1895,7 +1783,7 @@ function useArtistPanel({
             }
           )
         ] }),
-        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ jsx26(ArtistDiscography, { albums: artist.albums }) : void 0
+        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ jsx25(ArtistDiscography, { albums: artist.albums }) : void 0
       };
     }
   }
@@ -1908,9 +1796,9 @@ import {
 } from "@behindthemusictree/app-kit/genre-tree";
 
 // src/genre-tree/song/SongPanelContent.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { Pause as Pause2, Play as Play3 } from "lucide-react";
-import { FieldList as FieldList2, PanelSection as PanelSection4, Skeleton as Skeleton5 } from "@behindthemusictree/ui";
+import { FieldList as FieldList2, PanelSection as PanelSection6, Skeleton as Skeleton5 } from "@behindthemusictree/ui";
 import { PlayStates as PlayStates3, usePlayer as usePlayer9 } from "@behindthemusictree/app-kit/player";
 import {
   ArtistNames as ArtistNames3,
@@ -1919,40 +1807,40 @@ import {
   useSongHistory,
   useTrackList as useTrackList5
 } from "@behindthemusictree/app-kit/genre-tree";
-import { Fragment as Fragment10, jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 var numberFormat = new Intl.NumberFormat("en");
 var dateFormat = new Intl.DateTimeFormat("en", { dateStyle: "medium" });
 var externalLink = "text-[var(--color-primary)] hover:underline focus-visible:underline";
 function SongHistory({ uuid, getBackendBaseUrl }) {
-  const [open, setOpen] = useState6(false);
+  const [open, setOpen] = useState7(false);
   const history = useSongHistory(uuid, getBackendBaseUrl, open);
   let body = null;
-  if (history.status === "loading") body = /* @__PURE__ */ jsx27(Skeleton5, { className: "h-10", "aria-busy": "true" });
-  else if (history.status === "error") body = /* @__PURE__ */ jsx27("p", { className: "text-red-600", children: "Could not load the history." });
+  if (history.status === "loading") body = /* @__PURE__ */ jsx26(Skeleton5, { className: "h-10", "aria-busy": "true" });
+  else if (history.status === "error") body = /* @__PURE__ */ jsx26("p", { className: "text-red-600", children: "Could not load the history." });
   else if (history.status === "success")
-    body = history.entries.length === 0 ? /* @__PURE__ */ jsx27("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ jsx27("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ jsxs21("li", { className: "py-1.5 text-sm", children: [
-      /* @__PURE__ */ jsx27("span", { className: "font-medium", children: entry.action }),
-      entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ jsxs21("span", { className: "text-[var(--color-text-muted)]", children: [
+    body = history.entries.length === 0 ? /* @__PURE__ */ jsx26("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ jsx26("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ jsxs20("li", { className: "py-1.5 text-sm", children: [
+      /* @__PURE__ */ jsx26("span", { className: "font-medium", children: entry.action }),
+      entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ jsxs20("span", { className: "text-[var(--color-text-muted)]", children: [
         " ",
         "\u2014 ",
         entry.oldValue ?? "none",
         " \u2192 ",
         entry.newValue ?? "none"
       ] }) : null,
-      /* @__PURE__ */ jsxs21("span", { className: "block text-xs text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ jsxs20("span", { className: "block text-xs text-[var(--color-text-muted)]", children: [
         entry.actorPseudo ?? "Anonymous",
         " \xB7 ",
         dateFormat.format(new Date(entry.createdOn))
       ] })
     ] }, entry.uuid)) });
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs20(
     "details",
     {
       onToggle: (event) => setOpen(event.currentTarget.open),
       className: "px-6 pb-2.5 mt-2.5 border-t border-[var(--color-border)]",
       children: [
-        /* @__PURE__ */ jsx27("summary", { className: "mt-2.5 cursor-pointer text-[0.6875rem] font-semibold uppercase text-[var(--color-text-muted)]", children: "History" }),
-        /* @__PURE__ */ jsx27("div", { className: "mt-1.5", children: body })
+        /* @__PURE__ */ jsx26("summary", { className: "mt-2.5 cursor-pointer text-[0.6875rem] font-semibold uppercase text-[var(--color-text-muted)]", children: "History" }),
+        /* @__PURE__ */ jsx26("div", { className: "mt-1.5", children: body })
       ]
     }
   );
@@ -1978,13 +1866,13 @@ function SongPanelContent({
     const path = genrePath.length > 0 ? genrePath : null;
     fields.push({
       label: "Genre",
-      value: path ? /* @__PURE__ */ jsx27("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ jsxs21("span", { children: [
-        index > 0 && /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", children: "\u203A " }),
-        /* @__PURE__ */ jsx27("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
+      value: path ? /* @__PURE__ */ jsx26("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ jsxs20("span", { children: [
+        index > 0 && /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", children: "\u203A " }),
+        /* @__PURE__ */ jsx26("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
       ] }, genrePlaylist.uuid)) }) : song.genre.name
     });
   } else {
-    fields.push({ label: "Genre", value: /* @__PURE__ */ jsx27("span", { className: "text-[var(--color-text-muted)]", children: "No genre" }) });
+    fields.push({ label: "Genre", value: /* @__PURE__ */ jsx26("span", { className: "text-[var(--color-text-muted)]", children: "No genre" }) });
   }
   if (song.firstReleaseYear) fields.push({ label: "First released", value: song.firstReleaseYear });
   const viewCount = song.youtubeVideo?.viewCount;
@@ -1994,11 +1882,11 @@ function SongPanelContent({
   const links = [];
   if (musicBrainzUrl)
     links.push(
-      /* @__PURE__ */ jsx27("a", { href: musicBrainzUrl, target: "_blank", rel: "noopener noreferrer", className: externalLink, children: "MusicBrainz" }, "mb")
+      /* @__PURE__ */ jsx26("a", { href: musicBrainzUrl, target: "_blank", rel: "noopener noreferrer", className: externalLink, children: "MusicBrainz" }, "mb")
     );
   if (song.youtubeVideo)
     links.push(
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx26(
         "a",
         {
           href: `https://www.youtube.com/watch?v=${encodeURIComponent(song.youtubeVideo.id)}`,
@@ -2013,33 +1901,33 @@ function SongPanelContent({
   if (links.length > 0)
     fields.push({
       label: "Links",
-      value: /* @__PURE__ */ jsx27("span", { className: "flex gap-3", children: links })
+      value: /* @__PURE__ */ jsx26("span", { className: "flex gap-3", children: links })
     });
-  return /* @__PURE__ */ jsxs21(Fragment10, { children: [
-    /* @__PURE__ */ jsx27("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
-      unplayableReason ? /* @__PURE__ */ jsx27("p", { className: "flex items-center px-2.5 text-sm text-[var(--color-text-muted)]", children: unplayableReason }) : /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs20(Fragment10, { children: [
+    /* @__PURE__ */ jsx26("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
+      unplayableReason ? /* @__PURE__ */ jsx26("p", { className: "flex items-center px-2.5 text-sm text-[var(--color-text-muted)]", children: unplayableReason }) : /* @__PURE__ */ jsxs20(
         "button",
         {
           type: "button",
           onClick: () => isCurrent ? handlePlayPauseAction() : playNewTrackListFromTrackUuid(song, scope),
           className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none",
           children: [
-            /* @__PURE__ */ jsx27("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: isPlaying ? /* @__PURE__ */ jsx27(Pause2, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ jsx27(Play3, { "aria-hidden": "true", className: "w-5 h-5" }) }),
+            /* @__PURE__ */ jsx26("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: isPlaying ? /* @__PURE__ */ jsx26(Pause2, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ jsx26(Play3, { "aria-hidden": "true", className: "w-5 h-5" }) }),
             isPlaying ? "Pause" : "Play"
           ]
         }
       ),
-      shareUrl && /* @__PURE__ */ jsx27(ShareActionButton, { target: shareTarget, url: shareUrl })
+      shareUrl && /* @__PURE__ */ jsx26(ShareActionButton, { target: shareTarget, url: shareUrl })
     ] }) }),
-    song.artists && song.artists.length > 0 && /* @__PURE__ */ jsx27("p", { className: "px-6 pt-2.5 text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsx27(ArtistNames3, { artists: song.artists, renderArtistLink }) }),
-    /* @__PURE__ */ jsx27(FieldList2, { items: fields }),
-    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ jsx27(PanelSection4, { title: "Essential in", children: /* @__PURE__ */ jsx27("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ jsx27("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
-    /* @__PURE__ */ jsx27(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
+    song.artists && song.artists.length > 0 && /* @__PURE__ */ jsx26("p", { className: "px-6 pt-2.5 text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsx26(ArtistNames3, { artists: song.artists, renderArtistLink }) }),
+    /* @__PURE__ */ jsx26(FieldList2, { items: fields }),
+    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ jsx26(PanelSection6, { title: "Essential in", children: /* @__PURE__ */ jsx26("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ jsx26("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
+    /* @__PURE__ */ jsx26(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
   ] });
 }
 
 // src/genre-tree/song/useSongPanel.tsx
-import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 function useSongPanel({
   uuid,
   scope,
@@ -2061,24 +1949,24 @@ function useSongPanel({
       return {
         ...panel,
         title: "Song",
-        content: /* @__PURE__ */ jsxs22("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
-          /* @__PURE__ */ jsx28(Skeleton6, { className: "h-3 w-16" }),
-          /* @__PURE__ */ jsx28(Skeleton6, { className: "h-4 w-32" }),
-          /* @__PURE__ */ jsx28(Skeleton6, { className: "h-3 w-16" }),
-          /* @__PURE__ */ jsx28(Skeleton6, { className: "h-4 w-24" })
+        content: /* @__PURE__ */ jsxs21("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
+          /* @__PURE__ */ jsx27(Skeleton6, { className: "h-3 w-16" }),
+          /* @__PURE__ */ jsx27(Skeleton6, { className: "h-4 w-32" }),
+          /* @__PURE__ */ jsx27(Skeleton6, { className: "h-3 w-16" }),
+          /* @__PURE__ */ jsx27(Skeleton6, { className: "h-4 w-24" })
         ] })
       };
     case "not-found":
       return {
         ...panel,
         title: "Song not found",
-        content: /* @__PURE__ */ jsx28("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This song does not exist." })
+        content: /* @__PURE__ */ jsx27("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This song does not exist." })
       };
     case "error":
       return {
         ...panel,
         title: "Song",
-        content: /* @__PURE__ */ jsx28("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this song." })
+        content: /* @__PURE__ */ jsx27("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this song." })
       };
     case "success": {
       const { song } = result;
@@ -2086,7 +1974,7 @@ function useSongPanel({
       return {
         ...panel,
         title: song.title,
-        content: /* @__PURE__ */ jsx28(
+        content: /* @__PURE__ */ jsx27(
           SongPanelContent,
           {
             song,
@@ -2106,12 +1994,12 @@ function useSongPanel({
 // src/genre-tree/SizeMetricToggle.tsx
 import { MdMusicNote, MdVisibility } from "react-icons/md";
 import { SegmentedControl } from "@behindthemusictree/ui";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function SizeMetricToggle({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx28(
     SegmentedControl,
     {
       variant: "floating",
@@ -2119,26 +2007,19 @@ function SizeMetricToggle({
       value,
       onChange,
       options: [
-        { value: "songs", label: /* @__PURE__ */ jsx29(MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
-        { value: "views", label: /* @__PURE__ */ jsx29(MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
+        { value: "songs", label: /* @__PURE__ */ jsx28(MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
+        { value: "views", label: /* @__PURE__ */ jsx28(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 Fragment11, jsx as jsx30, jsxs as jsxs23 } 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; }
-.genre-tree-view:has(.search-overlay .gtv-info-panel-previous) .genre-search-previous { display: flex; }
-@keyframes genre-tree-view-previous-in { from { opacity: 0; transform: translate(-0.5rem, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
-@media (prefers-reduced-motion: no-preference) {
-  .genre-search-previous { animation: genre-tree-view-previous-in 200ms ease-out; }
-}
-`;
+import { Fragment as Fragment11, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 var NO_POP_ROOT_TITLE = "This genre tree has no 'Mainstream Pop' root yet";
-var REGIONS_CLASS = "[--gtv-center-left:var(--layout-center-left)] [--gtv-center-right:var(--layout-center-right)] [--gtv-center-top:var(--layout-band-top)] [&_.gtv-info-panel--overlay]:[--gtv-info-panel-header-inset:0px]";
+var REGIONS_CLASS = "[--gtv-center-left:var(--layout-center-left)] [--gtv-center-right:var(--layout-center-right)] [--gtv-center-top:var(--layout-band-top)]";
+var noop = () => {
+};
 function GenreTreeView({
   scope,
   handleGenreCreationAction,
@@ -2192,19 +2073,19 @@ function GenreTreeView({
   placement = "default",
   ...focus
 }) {
-  const getShareUrlRef = useRef4(getShareUrl);
+  const getShareUrlRef = useRef3(getShareUrl);
   getShareUrlRef.current = getShareUrl;
-  const [internalArtistUuid, setInternalArtistUuid] = useState7(null);
+  const [internalArtistUuid, setInternalArtistUuid] = useState8(null);
   const isArtistControlled = controlledArtistUuid !== void 0;
   const artistUuid = isArtistControlled ? controlledArtistUuid : internalArtistUuid;
-  const [internalSongUuid, setInternalSongUuid] = useState7(null);
+  const [internalSongUuid, setInternalSongUuid] = useState8(null);
   const isSongControlled = controlledSongUuid !== void 0;
   const songUuid = isSongControlled ? controlledSongUuid : internalSongUuid;
   const changeSong = (uuid) => {
     if (!isSongControlled) setInternalSongUuid(uuid);
     onSongUuidChange?.(uuid);
   };
-  const [internalSizeMetric, setInternalSizeMetric] = useState7("songs");
+  const [internalSizeMetric, setInternalSizeMetric] = useState8("songs");
   const sizeMetric = controlledSizeMetric ?? internalSizeMetric;
   const deferredSizeMetric = useDeferredValue(sizeMetric);
   const changeSizeMetric = (metric) => {
@@ -2243,7 +2124,7 @@ function GenreTreeView({
     artistUuid
   });
   const restoreRevision = viewportRestore?.revision;
-  const [stackedRestoreOwner, setStackedRestoreOwner] = useState7({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
+  const [stackedRestoreOwner, setStackedRestoreOwner] = useState8({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
   let restoreRootUuid = stackedRestoreOwner.rootUuid;
   if (stackedRestoreOwner.revision !== restoreRevision) {
     restoreRootUuid = selectedGenrePlaylist?.root.uuid;
@@ -2274,14 +2155,14 @@ function GenreTreeView({
     if (selectedNodeId !== null) clearSelection();
     changeSong(uuid);
   };
-  const openSongRef = useRef4(openSong);
+  const openSongRef = useRef3(openSong);
   openSongRef.current = openSong;
   const resolvedRenderSongLink = useCallback6(
-    (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ jsx30("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
+    (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ jsx29("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
     [renderSongLink]
   );
-  const [expandedSongUuid, setExpandedSongUuid] = useState7(null);
-  const [expandedArtistUuid, setExpandedArtistUuid] = useState7(null);
+  const [expandedSongUuid, setExpandedSongUuid] = useState8(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = useState8(null);
   const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
   const songBaseUrl = getBackendBaseUrl;
   const artistPanel = useArtistPanel({
@@ -2289,7 +2170,7 @@ function GenreTreeView({
     scope,
     getBackendBaseUrl: artistBaseUrl,
     getShareUrl: getShareUrlRef.current,
-    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx30("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx29("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);
@@ -2298,7 +2179,7 @@ function GenreTreeView({
     renderSongLink: resolvedRenderSongLink,
     onClose: () => changeArtist(null)
   });
-  const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx30("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
+  const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx29("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
   const getGenrePath = (genre) => {
     const path = [];
     let current = visibleGenrePlaylists.find((playlist) => playlist.criteria?.uuid === genre.uuid);
@@ -2330,9 +2211,8 @@ function GenreTreeView({
   const builtInSongPanel = overlayPanel || hasSelectedGenreNode ? void 0 : songPanel;
   const builtInArtistPanel = overlayPanel || hasSelectedGenreNode || builtInSongPanel ? void 0 : artistPanel;
   const builtInPanel = builtInSongPanel ?? builtInArtistPanel;
-  const activeOverlayPanel = overlayPanel ?? (builtInPanel && { ...builtInPanel, hideTitle: true, hideClose: true });
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState7(false);
-  const [uncontrolledExpanded, setUncontrolledExpanded] = useState7(false);
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState8(false);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState8(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
   const isExpanded = expanded ?? uncontrolledExpanded;
   const changeCollapsed = (next) => {
@@ -2343,55 +2223,56 @@ function GenreTreeView({
     setUncontrolledExpanded(next);
     onExpandedChange?.(next);
   };
-  useEffect6(() => {
+  useEffect5(() => {
     setUncontrolledCollapsed(false);
   }, [selectedNodeId, artistUuid, songUuid]);
-  const isDetailHidden = isCollapsed || !hasSelectedGenreNode && !activeOverlayPanel;
-  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;
-  const infoPanelCuration = {
-    renderDangerZone,
-    expanded: placement === "regions" ? isExpanded : expanded,
-    onExpandedChange: placement === "regions" ? changeExpanded : onExpandedChange,
-    collapsed: placement === "regions" ? isCollapsed : void 0,
-    hideExpandButton: placement === "regions" ? true : void 0,
-    overlayPanel: detailOverlay ? { ...detailOverlay, collapsed: isCollapsed, hideExpandButton: true } : activeOverlayPanel
-  };
-  const [isWheelRevealed, setIsWheelRevealed] = useState7(false);
+  const [isWheelRevealed, setIsWheelRevealed] = useState8(false);
   const usesHandoff = viewMode === "wheel" || viewMode === "pop-core";
   const isTreeReady = !isLoading && (!usesHandoff || isWheelRevealed);
-  const rootRef = useRef4(null);
-  const handlePrevious = () => {
-    rootRef.current?.querySelector(".search-overlay .gtv-info-panel-previous")?.click();
-  };
-  useEffect6(() => {
-    if (!isTreeReady || viewMode !== "pop-core" || !hasSelectedGenreNode || !selectedGenrePlaylist) return;
-    const root = rootRef.current;
-    const centerChip = root?.querySelector(".gtv-wheel-center-node .gtv-wheel-chip");
-    if (!centerChip || centerChip.getAttribute("aria-label") !== selectedGenrePlaylist.name) return;
-    const panelTitle = root?.querySelector(".gtv-info-panel-title");
-    if (panelTitle?.textContent?.trim().startsWith(selectedGenrePlaylist.name)) return;
-    centerChip.click();
-  }, [hasSelectedGenreNode, isTreeReady, selectedGenrePlaylist, viewMode]);
+  const [resolveStyle, setResolveStyle] = useState8(null);
+  const handleNodeStyleResolverChange = useCallback6(
+    (resolver) => setResolveStyle(() => resolver),
+    []
+  );
+  const panelRef = useRef3(null);
+  const obscuredInset = useObscuredInset(panelRef);
+  const hostPanel = { obscuredInset, onNodeStyleResolverChange: handleNodeStyleResolverChange };
+  const nodeMetric = isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric;
+  const treeNodes = useMemo7(() => toTreeNodes(visibleGenrePlaylists, nodeMetric), [visibleGenrePlaylists, nodeMetric]);
+  const relations = useGenreNodeRelations(
+    treeNodes,
+    !overlayPanel && hasSelectedGenreNode ? selectedNodeId : null,
+    resolveStyle
+  );
+  const [selectionHistory, setSelectionHistory] = useState8({
+    current: selectedNodeId,
+    previous: null
+  });
+  if (selectionHistory.current !== selectedNodeId) {
+    setSelectionHistory({
+      current: selectedNodeId,
+      previous: selectionHistory.current ?? selectionHistory.previous
+    });
+  }
+  const previousPlaylist = selectionHistory.previous !== null && selectionHistory.previous !== selectedNodeId ? genrePlaylistByNodeId.get(selectionHistory.previous) : void 0;
+  const handlePrevious = previousPlaylist && visibleGenrePlaylists.includes(previousPlaylist) ? () => handleGenreSearchSelect(previousPlaylist) : void 0;
   const { showPopup, hidePopup } = usePopup5();
-  const [searchText, setSearchText] = useState7("");
+  const [searchText, setSearchText] = useState8("");
   const artistSearchResult = useArtistSearch(artistBaseUrl, artistSearch ? searchText : "");
   const artistGroup = artistSearch ? {
     key: "artists",
     label: "Artists",
     items: artistSearchResult.artists.map((artist) => ({
       key: artist.uuid,
-      content: /* @__PURE__ */ jsxs23(Fragment11, { children: [
-        /* @__PURE__ */ jsxs23("span", { className: "block truncate font-medium", children: [
+      content: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+        /* @__PURE__ */ jsxs22("span", { className: "block truncate font-medium", children: [
           artist.name,
-          artist.disambiguation && /* @__PURE__ */ jsxs23("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
+          artist.disambiguation && /* @__PURE__ */ jsxs22("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
             " \xB7 ",
             artist.disambiguation
           ] })
         ] }),
-        artist.matchedAlias && /* @__PURE__ */ jsxs23("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
+        artist.matchedAlias && /* @__PURE__ */ jsxs22("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
           "also known as ",
           artist.matchedAlias
         ] })
@@ -2410,9 +2291,9 @@ function GenreTreeView({
     label: "Songs",
     items: songSearchResult.songs.map((song) => ({
       key: song.uuid,
-      content: /* @__PURE__ */ jsxs23("span", { className: isSongSearchResultPlayable(song) ? void 0 : "opacity-60", children: [
-        /* @__PURE__ */ jsx30("span", { className: "block truncate font-medium", children: song.title }),
-        /* @__PURE__ */ jsx30("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [song.artists.map((artist) => artist.name).join(", "), song.genre?.name ?? "No genre"].filter(Boolean).join(" \xB7 ") })
+      content: /* @__PURE__ */ jsxs22("span", { className: isSongSearchResultPlayable(song) ? void 0 : "opacity-60", children: [
+        /* @__PURE__ */ jsx29("span", { className: "block truncate font-medium", children: song.title }),
+        /* @__PURE__ */ jsx29("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [song.artists.map((artist) => artist.name).join(", "), song.genre?.name ?? "No genre"].filter(Boolean).join(" \xB7 ") })
       ] }),
       onSelect: () => {
         openSong(song.uuid);
@@ -2438,36 +2319,49 @@ function GenreTreeView({
   const handleGenreSearchZoomIn = () => {
     if (selectedUuid) focus.onFocusGenreChange?.(selectedUuid, "zoom-in");
   };
-  const zoomInRef = useRef4(void 0);
+  const zoomInRef = useRef3(void 0);
   zoomInRef.current = canZoomIn ? handleGenreSearchZoomIn : void 0;
-  const renderInfoPanelBody = useCallback6(
-    (node, { toolbar, ancestors, family }) => {
-      const genrePlaylist = genrePlaylistByNodeId.get(node.id);
-      const criteria = genrePlaylist?.criteria;
-      if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ jsxs23(Fragment11, { children: [
-        toolbar,
-        family
-      ] }), aside: ancestors };
-      const genreUuid = criteria.uuid;
-      const parentPlaylist = visibleGenrePlaylists.find(({ uuid }) => uuid === genrePlaylist.parent?.uuid);
-      const canToggleSide = !readOnly && parentPlaylist !== void 0 && parentPlaylist.parent === null;
-      const side = criteria.side ?? "core";
-      const shareTarget = {
-        kind: "genre",
-        genrePlaylistUuid: genrePlaylist.uuid,
-        name: criteria.name,
-        scope,
-        artistUuid
-      };
-      const shareUrl = getShareUrlRef.current?.(shareTarget) ?? void 0;
-      const popSibling = canToggleSide && side === "core" ? visibleGenrePlaylists.find(
-        (sibling) => sibling.parent?.uuid === parentPlaylist.uuid && sibling.uuid !== genrePlaylist.uuid && sibling.criteria?.side === "pop"
-      ) : void 0;
-      return {
-        primary: /* @__PURE__ */ jsx30(
+  const selectGenreFromPanel = (nodeId) => {
+    const genrePlaylist = genrePlaylistByNodeId.get(nodeId);
+    if (genrePlaylist) handleGenreSearchSelect(genrePlaylist);
+  };
+  const renderGenreBody = (relation) => {
+    const { node } = relation;
+    const family = /* @__PURE__ */ jsx29(
+      GenreNodeFamily,
+      {
+        node,
+        fill: relation.fill,
+        textColor: relation.textColor,
+        parentNode: relation.parentNode,
+        childNodes: relation.childNodes,
+        onSelectNode: selectGenreFromPanel
+      }
+    );
+    const ancestors = /* @__PURE__ */ jsx29(GenreNodeAncestors, { ancestorNodes: relation.ancestorNodes, onSelectNode: selectGenreFromPanel });
+    const genrePlaylist = genrePlaylistByNodeId.get(node.id);
+    const criteria = genrePlaylist?.criteria;
+    if (!genrePlaylist || !criteria) return { primary: family, aside: ancestors };
+    const genreUuid = criteria.uuid;
+    const parentPlaylist = visibleGenrePlaylists.find(({ uuid }) => uuid === genrePlaylist.parent?.uuid);
+    const canToggleSide = !readOnly && parentPlaylist !== void 0 && parentPlaylist.parent === null;
+    const side = criteria.side ?? "core";
+    const shareTarget = {
+      kind: "genre",
+      genrePlaylistUuid: genrePlaylist.uuid,
+      name: criteria.name,
+      scope,
+      artistUuid
+    };
+    const shareUrl = getShareUrlRef.current?.(shareTarget) ?? void 0;
+    const popSibling = canToggleSide && side === "core" ? visibleGenrePlaylists.find(
+      (sibling) => sibling.parent?.uuid === parentPlaylist.uuid && sibling.uuid !== genrePlaylist.uuid && sibling.criteria?.side === "pop"
+    ) : void 0;
+    return {
+      primary: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+        /* @__PURE__ */ jsx29(
           GenreInfoPanelBody,
           {
-            toolbar,
             family,
             genreUuid,
             genrePlaylist,
@@ -2483,7 +2377,7 @@ function GenreTreeView({
               onAddChild: readOnly ? void 0 : () => handleGenreCreationAction(criteria),
               onRename: readOnly ? void 0 : () => handleGenreRenameAction(criteria),
               onChangeParent: readOnly ? void 0 : () => showPopup(
-                /* @__PURE__ */ jsx30(
+                /* @__PURE__ */ jsx29(
                   ChangeParentPopup,
                   {
                     genrePlaylist: { ...genrePlaylist, criteria },
@@ -2514,49 +2408,65 @@ function GenreTreeView({
             }
           }
         ),
-        aside: ancestors
-      };
-    },
-    [
-      genrePlaylistByNodeId,
-      additionalActions,
-      readOnly,
-      handleGenreCreationAction,
-      handleGenreRenameAction,
-      showPopup,
-      hidePopup,
-      onParentChanged,
-      visibleGenrePlaylists,
-      updateGenre,
-      playback,
-      filterArtist,
-      scope,
-      getBackendBaseUrl,
-      criteriaOverviewSchema,
-      renderGenreDetailExtras,
-      renderArtistLink,
-      resolvedRenderSongLink,
-      renderSummary,
-      renderEssentialTracks,
-      renderSongLeading,
-      renderSongActions,
-      renderTracksToolbar
-    ]
-  );
+        renderDangerZone?.(node)
+      ] }),
+      aside: ancestors
+    };
+  };
   const isRotationControlled = controlledAllowWheelRotation !== void 0;
   const allowWheelRotation = controlledAllowWheelRotation ?? internalAllowWheelRotation;
-  const detailTab = placement === "regions" && (hasSelectedGenreNode || detailOverlay) ? /* @__PURE__ */ jsx30(
-    PanelEdgeTab,
+  let activePanel = null;
+  if (overlayPanel) {
+    activePanel = {
+      title: overlayPanel.title,
+      content: overlayPanel.content,
+      aside: overlayPanel.extraContent,
+      expanded: overlayPanel.expanded ?? false,
+      onExpandedChange: overlayPanel.onExpandedChange,
+      onClose: overlayPanel.onClose,
+      compact: false
+    };
+  } else if (relations) {
+    const { primary, aside } = renderGenreBody(relations);
+    activePanel = {
+      title: relations.node.name,
+      content: primary,
+      aside,
+      expanded: isExpanded,
+      onExpandedChange: changeExpanded,
+      onClose: clearSelection,
+      compact: true,
+      headerAccent: { background: relations.fill, color: relations.textColor }
+    };
+  } else if (builtInPanel) {
+    activePanel = {
+      title: builtInPanel.title,
+      content: builtInPanel.content,
+      aside: builtInPanel.extraContent,
+      expanded: builtInPanel.expanded,
+      onExpandedChange: builtInPanel.onExpandedChange,
+      onClose: builtInPanel.onClose,
+      compact: true
+    };
+  }
+  const isPanelShown = isTreeReady && activePanel !== null;
+  const detailTab = placement === "regions" && activePanel?.onExpandedChange ? {
+    edge: activePanel.expanded ? { label: "Shrink panel", onClick: () => activePanel.onExpandedChange?.(false) } : isCollapsed ? null : { label: "Hide panel", onClick: () => changeCollapsed(true) },
+    center: activePanel.expanded ? null : isCollapsed ? { label: "Show panel", onClick: () => changeCollapsed(false) } : activePanel.onExpandedChange ? { label: "Extend panel", onClick: () => activePanel.onExpandedChange?.(true) } : null
+  } : void 0;
+  const expandButton = placement === "default" && activePanel?.onExpandedChange ? /* @__PURE__ */ jsx29(
+    IconButton,
     {
-      side: "left",
-      edge: detailExpanded ? { label: "Shrink panel", onClick: () => onDetailExpandedChange?.(false) } : isCollapsed ? null : { label: "Hide panel", onClick: () => changeCollapsed(true) },
-      center: detailExpanded ? null : isCollapsed ? { label: "Show panel", onClick: () => changeCollapsed(false) } : onDetailExpandedChange ? { label: "Extend panel", onClick: () => onDetailExpandedChange(true) } : null
+      "aria-label": activePanel.expanded ? "Shrink panel" : "Extend panel",
+      style: activePanel.headerAccent && { color: "inherit" },
+      onClick: () => activePanel.onExpandedChange?.(!activePanel.expanded),
+      children: activePanel.expanded ? /* @__PURE__ */ jsx29(Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx29(Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
     }
   ) : null;
   const renderArtistFilter = () => {
     if (isLoading || !filterArtist) return null;
-    return /* @__PURE__ */ jsxs23("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
-      /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsxs22("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
+      /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -2568,7 +2478,7 @@ function GenreTreeView({
           children: filterArtist.name
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -2580,22 +2490,22 @@ function GenreTreeView({
       )
     ] });
   };
-  const actions = /* @__PURE__ */ jsxs23(Fragment11, { children: [
-    !isLoading && /* @__PURE__ */ jsx30(
+  const actions = /* @__PURE__ */ jsxs22(Fragment11, { children: [
+    !isLoading && /* @__PURE__ */ jsx29(
       GenreSearch,
       {
         genrePlaylists: visibleGenrePlaylists,
         onSelect: handleGenreSearchSelect,
-        selectedName: selectedGenrePlaylist?.name ?? builtInPanel?.title ?? null,
+        selectedName: selectedGenrePlaylist?.name ?? (typeof builtInPanel?.title === "string" ? builtInPanel.title : null),
         onClear: builtInSongPanel ? () => changeSong(null) : builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
         onPrevious: handlePrevious,
         onQueryChange: artistSearch || songSearch ? setSearchText : void 0,
         extraGroups
       }
     ),
-    !isLoading && filterArtist && /* @__PURE__ */ jsx30("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
-    /* @__PURE__ */ jsxs23("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__ */ jsx30(
+    !isLoading && filterArtist && /* @__PURE__ */ jsx29("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
+    /* @__PURE__ */ jsxs22("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__ */ jsx29(
         SegmentedControl2,
         {
           "aria-label": "Tree view mode",
@@ -2609,13 +2519,13 @@ function GenreTreeView({
           ]
         }
       ),
-      !isLoading && showDisplayOptions && /* @__PURE__ */ jsx30(
+      !isLoading && showDisplayOptions && /* @__PURE__ */ jsx29(
         "div",
         {
           className: "flex items-center gap-1",
           role: "group",
           "aria-label": "Tree display options",
-          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ jsx30(
+          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ jsx29(
             Button,
             {
               variant: allowWheelRotation ? "default" : "outline",
@@ -2626,7 +2536,7 @@ function GenreTreeView({
           )
         }
       ),
-      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ jsx30(
+      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ jsx29(
         IconTextButton,
         {
           icon: Plus2,
@@ -2636,42 +2546,34 @@ function GenreTreeView({
       )
     ] })
   ] });
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
-      ref: rootRef,
+      "data-left-panel": isPanelShown && !isCollapsed ? void 0 : "hidden",
       className: ["genre-tree-view relative flex flex-col h-full", placement === "regions" && REGIONS_CLASS, className2].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsx30("style", { children: PREVIOUS_BUTTON_CSS }),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx29(
           "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__ */ jsx30(
+        !isLoading && filterArtist && /* @__PURE__ */ jsx29(
           "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__ */ jsx30(
-          "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__ */ jsx30("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ jsxs23("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
-          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ jsx30("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
-          isLoading ? /* @__PURE__ */ jsx30(GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
+        /* @__PURE__ */ jsx29("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ jsxs22("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
+          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ jsx29("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
+          isLoading ? /* @__PURE__ */ jsx29(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__ */ jsx30("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__ */ jsx30(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx30(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx29("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ jsx29(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx29(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx29(
               GenrePlaylistTreeWheel,
               {
                 scope,
@@ -2680,29 +2582,26 @@ function GenreTreeView({
                 handleGenreRenameAction,
                 additionalActions,
                 onSelectedNodeChange: handleSelectedNodeChange,
-                hideInfoPanelClose: true,
-                hideInfoPanelTitle: true,
                 onNodeHover: handleNodeHover,
-                renderInfoPanelBody,
+                ...hostPanel,
                 playback,
                 selectedNodeId,
                 readOnly,
                 allowWheelRotation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ jsx30(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ jsx29(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
                 viewportRestore,
-                onViewportChange,
-                ...infoPanelCuration
+                onViewportChange
               }
             ) }) })
           ) : viewMode === "pop-core" ? (
             // Same as the wheel: the header inset extends its fill behind the floating search bar, Google Maps style.
-            /* @__PURE__ */ jsx30("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__ */ jsx30(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx30(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx29("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ jsx29(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ jsx29(GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ jsx29(
               GenrePlaylistTreeWheelRadialPopCore,
               {
                 scope,
@@ -2711,28 +2610,25 @@ function GenreTreeView({
                 handleGenreRenameAction,
                 additionalActions,
                 onSelectedNodeChange: handleSelectedNodeChange,
-                hideInfoPanelClose: true,
-                hideInfoPanelTitle: true,
                 onNodeHover: handleNodeHover,
-                renderInfoPanelBody,
+                ...hostPanel,
                 playback,
                 selectedNodeId,
                 readOnly,
                 allowWheelRotation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ jsx30(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ jsx29(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
                 viewportRestore,
                 onViewportChange,
-                ...infoPanelCuration,
                 ...focus
               }
             ) }) })
-          ) : viewMode === "outline" ? /* @__PURE__ */ jsx30("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__ */ jsx30(
+          ) : viewMode === "outline" ? /* @__PURE__ */ jsx29("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative", children: /* @__PURE__ */ jsx29(
             GenrePlaylistTreeWheelRadialPopCore,
             {
               outline: true,
@@ -2742,22 +2638,19 @@ function GenreTreeView({
               handleGenreRenameAction,
               additionalActions,
               onSelectedNodeChange: handleSelectedNodeChange,
-              hideInfoPanelClose: true,
-              hideInfoPanelTitle: true,
               onNodeHover: handleNodeHover,
-              renderInfoPanelBody,
+              ...hostPanel,
               playback,
               selectedNodeId,
-              readOnly,
-              ...infoPanelCuration
+              readOnly
             }
-          ) }) : /* @__PURE__ */ jsx30("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__ */ jsx30(
+          ) }) : /* @__PURE__ */ jsx29("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)]", children: Object.entries(groupedGenrePlaylistsByRoot).map(
+            ([uuid, genrePlaylistTreePerRoot]) => {
+              return /* @__PURE__ */ jsx29(
                 "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__ */ jsx30("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ jsx30(
+                  children: /* @__PURE__ */ jsx29("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ jsx29(
                     GenrePlaylistTreePerRoot,
                     {
                       scope,
@@ -2767,26 +2660,45 @@ function GenreTreeView({
                       handleGenreRenameAction,
                       additionalActions,
                       onSelectedNodeChange: handleSelectedNodeChange,
-                      hideInfoPanelClose: true,
-                      hideInfoPanelTitle: true,
                       onNodeHover: handleNodeHover,
-                      renderInfoPanelBody,
+                      ...hostPanel,
                       playback,
                       selectedNodeId: uuid === selectedGenrePlaylist?.root.uuid ? selectedNodeId : null,
                       readOnly,
                       wheelZoom: "modifier",
                       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
+                      onViewportChange: uuid === selectedGenrePlaylist?.root.uuid ? onViewportChange : void 0
                     }
                   ) })
                 },
                 uuid
               );
             }
-          ) })
+          ) }),
+          /* @__PURE__ */ jsx29(
+            DetailPanel,
+            {
+              ref: panelRef,
+              side: "left",
+              title: activePanel?.title ?? "",
+              hideTitle: activePanel?.compact,
+              hideClose: activePanel?.compact,
+              headerAccent: activePanel?.headerAccent,
+              headerActions: expandButton,
+              onClose: activePanel?.onClose ?? noop,
+              collapsed: isCollapsed || !isTreeReady || !activePanel,
+              expanded: activePanel?.expanded,
+              onExpandedChange: activePanel?.onExpandedChange,
+              aside: activePanel?.aside,
+              edgeTab: detailTab,
+              headerClassName: activePanel?.compact ? "pt-[calc(var(--layout-search-h)+var(--layout-panel-inset)+0.5rem)]" : void 0,
+              children: activePanel?.aside && !activePanel.expanded ? /* @__PURE__ */ jsxs22(Fragment11, { children: [
+                activePanel.content,
+                activePanel.aside
+              ] }) : activePanel?.content
+            }
+          )
         ] }) })
       ]
     }
@@ -2797,17 +2709,18 @@ function GenreTreeView({
 import { useMemo as useMemo8 } from "react";
 import {
   ACCENT_TEXT_COLOR,
+  GenreNodeAncestors as GenreNodeAncestors2,
+  GenreNodeFamily as GenreNodeFamily2,
   getGenreTreeColor as getGenreTreeColor2,
-  InfoPanel,
   TEXT_COLOR,
   tintSurface
 } from "@behindthemusictree/genre-tree-view";
-import { Skeleton as Skeleton7 } from "@behindthemusictree/ui";
+import { DetailPanel as DetailPanel2, IconButton as IconButton2, Skeleton as Skeleton7 } from "@behindthemusictree/ui";
+import { Maximize2 as Maximize22, Minimize2 as Minimize22 } from "lucide-react";
 import {
   useFetchGenreDetail
 } from "@behindthemusictree/app-kit/genre-tree";
-import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
-var ITEM_COUNT_LABEL = "Songs";
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var RELATIVE_ITEM_COUNT = 1;
 function toNode(genre, parentId) {
   return {
@@ -2831,6 +2744,7 @@ function GenreDetailPanel({
   collapsed,
   expanded,
   onExpandedChange,
+  edgeTab,
   extras
 }) {
   const { data: detail, isPending, isError } = useFetchGenreDetail(genreUuid, scope, getBackendBaseUrl);
@@ -2843,7 +2757,7 @@ function GenreDetailPanel({
       fill: tintSurface(rootColor),
       textColor: TEXT_COLOR
     });
-    const ancestors = [...detail.ascendants].sort((a, b) => b.degree - a.degree);
+    const ancestors2 = [...detail.ascendants].sort((a, b) => b.degree - a.degree);
     return {
       node: {
         id: detail.uuid,
@@ -2855,57 +2769,72 @@ function GenreDetailPanel({
       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)
+      ancestorNodes: ancestors2.map(
+        ({ ascendant }, index) => relative(ascendant, index === 0 ? null : ancestors2[index - 1].ascendant.uuid)
       )
     };
   }, [detail]);
   if (isError) {
-    return /* @__PURE__ */ jsx31("div", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." });
+    return /* @__PURE__ */ jsx30("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__ */ jsxs24("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
-      /* @__PURE__ */ jsx31(Skeleton7, { className: "h-6 w-2/3" }),
-      /* @__PURE__ */ jsx31(Skeleton7, { className: "h-4 w-full" }),
-      /* @__PURE__ */ jsx31(Skeleton7, { className: "h-4 w-3/4" })
+    return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
+      /* @__PURE__ */ jsx30(Skeleton7, { className: "h-6 w-2/3" }),
+      /* @__PURE__ */ jsx30(Skeleton7, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx30(Skeleton7, { className: "h-4 w-3/4" })
     ] });
   }
-  const renderBody = (node, sections) => ({
-    primary: /* @__PURE__ */ jsx31(
-      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__ */ jsx31(
-    InfoPanel,
+  const selectGenre = (nodeId) => onSelectGenre(nodeId);
+  const family = /* @__PURE__ */ jsx30(
+    GenreNodeFamily2,
     {
       node: view.node,
       fill: view.fill,
       textColor: ACCENT_TEXT_COLOR,
       parentNode: view.parentNode,
       childNodes: view.childNodes,
-      ancestorNodes: view.ancestorNodes,
+      onSelectNode: selectGenre
+    }
+  );
+  const ancestors = /* @__PURE__ */ jsx30(GenreNodeAncestors2, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
+  return /* @__PURE__ */ jsxs23(
+    DetailPanel2,
+    {
       side: "left",
+      title: view.node.name,
+      headerAccent: { background: view.fill, color: ACCENT_TEXT_COLOR },
+      headerActions: onExpandedChange ? /* @__PURE__ */ jsx30(
+        IconButton2,
+        {
+          "aria-label": expanded ? "Shrink panel" : "Extend panel",
+          style: { color: "inherit" },
+          onClick: () => onExpandedChange(!expanded),
+          children: expanded ? /* @__PURE__ */ jsx30(Minimize22, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx30(Maximize22, { "aria-hidden": "true", className: "h-4 w-4" })
+        }
+      ) : void 0,
       onClose,
-      onSelectNode: (nodeId) => onSelectGenre(nodeId),
-      itemCountLabel: ITEM_COUNT_LABEL,
-      renderInfoPanelBody: renderBody,
+      collapsed,
       expanded,
       onExpandedChange,
-      collapsed,
-      hideExpandButton: onExpandedChange === void 0
+      edgeTab,
+      aside: ancestors,
+      children: [
+        /* @__PURE__ */ jsx30(
+          GenreInfoPanelBody,
+          {
+            family,
+            genreUuid: detail.uuid,
+            genrePlaylist: { ...detail.criteriaPlaylist, tracksCount: detail.tracksCount },
+            wikidataId: detail.wikidataId,
+            scope,
+            getBackendBaseUrl,
+            playback,
+            band: { node: view.node, onZoomIn, shareUrl, shareTarget: shareUrl ? shareTarget : void 0 },
+            extras
+          }
+        ),
+        !expanded && ancestors
+      ]
     }
   );
 }
@@ -2919,13 +2848,13 @@ import {
 } from "@behindthemusictree/genre-tree-view";
 
 // src/genre-tree/track-list-sidebar/TrackListSidebar.tsx
-import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect2, useRef as useRef5 } from "react";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useRef as useRef4 } from "react";
 import { ListMusic } from "lucide-react";
 import { useTrackList as useTrackList6 } from "@behindthemusictree/app-kit/genre-tree";
 import { TrackListOriginType as TrackListOriginType2 } from "@behindthemusictree/app-kit/genre-tree";
-import { useTrackNoun as useTrackNoun6 } from "@behindthemusictree/app-kit/track-noun";
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
-var useBrowserLayoutEffect = typeof window === "undefined" ? useEffect7 : useLayoutEffect2;
+import { useTrackNoun as useTrackNoun3 } from "@behindthemusictree/app-kit/track-noun";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+var useBrowserLayoutEffect = typeof window === "undefined" ? useEffect6 : useLayoutEffect2;
 function TrackListSidebar({
   className: className2 = "",
   renderDuration,
@@ -2938,17 +2867,17 @@ function TrackListSidebar({
   renderSongLink
 }) {
   const { trackList, loadMore, autoAdvanceScrollRequest } = useTrackList6();
-  const trackNoun = useTrackNoun6();
-  const trackListRef = useRef5(null);
-  const previousOriginRef = useRef5(trackList?.origin ?? null);
-  const handledAutoAdvanceRequestIdRef = useRef5(null);
-  const shouldFollowPlaybackRef = useRef5(true);
-  const programmaticScrollTopRef = useRef5(null);
-  const userScrollIntentRef = useRef5(false);
-  const userScrollIntentTimerRef = useRef5(null);
-  const loadMoreSentinelRef = useRef5(null);
+  const trackNoun = useTrackNoun3();
+  const trackListRef = useRef4(null);
+  const previousOriginRef = useRef4(trackList?.origin ?? null);
+  const handledAutoAdvanceRequestIdRef = useRef4(null);
+  const shouldFollowPlaybackRef = useRef4(true);
+  const programmaticScrollTopRef = useRef4(null);
+  const userScrollIntentRef = useRef4(false);
+  const userScrollIntentTimerRef = useRef4(null);
+  const loadMoreSentinelRef = useRef4(null);
   const hasMore = !!trackList && trackList.nextPage !== null;
-  useEffect7(() => {
+  useEffect6(() => {
     const sentinel = loadMoreSentinelRef.current;
     if (!hasMore || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
@@ -2968,11 +2897,11 @@ function TrackListSidebar({
     programmaticScrollTopRef.current = null;
     if (trackListRef.current) trackListRef.current.scrollTop = 0;
   }, [trackList?.origin]);
-  useEffect7(() => {
+  useEffect6(() => {
     const list = trackListRef.current;
     if (!isCollapsed && list?.scrollTop === 0) shouldFollowPlaybackRef.current = true;
   }, [isCollapsed]);
-  useEffect7(
+  useEffect6(
     () => () => {
       if (userScrollIntentTimerRef.current !== null) clearTimeout(userScrollIntentTimerRef.current);
     },
@@ -3026,25 +2955,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__ */ jsxs25(
+  return trackList ? /* @__PURE__ */ jsxs24(
     "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__ */ jsxs25("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
-          /* @__PURE__ */ jsxs25("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
-            /* @__PURE__ */ jsxs25("div", { className: "origin flex text-xl", children: [
-              /* @__PURE__ */ jsx32("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
-              /* @__PURE__ */ jsx32("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__ */ jsx32("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
+        /* @__PURE__ */ jsxs24("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
+          /* @__PURE__ */ jsxs24("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
+            /* @__PURE__ */ jsxs24("div", { className: "origin flex text-xl", children: [
+              /* @__PURE__ */ jsx31("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
+              /* @__PURE__ */ jsx31("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__ */ jsx31("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
             ] }),
-            /* @__PURE__ */ jsxs25("div", { className: "info flex items-center text-sm text-[var(--color-text-muted)]", children: [
+            /* @__PURE__ */ jsxs24("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__ */ jsx32(
+          (isCollapsed && onExpand || !isCollapsed && onMinimize) && /* @__PURE__ */ jsx31(
             "button",
             {
               type: "button",
@@ -3053,11 +2982,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__ */ jsx32(ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
+              children: /* @__PURE__ */ jsx31(ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
             }
           )
         ] }),
-        !isCollapsed && /* @__PURE__ */ jsxs25(
+        !isCollapsed && /* @__PURE__ */ jsxs24(
           "ul",
           {
             ref: trackListRef,
@@ -3067,7 +2996,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__ */ jsx32("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ jsx32(
+              trackList.tracks.map((track, index) => /* @__PURE__ */ jsx31("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ jsx31(
                 TrackItem,
                 {
                   track,
@@ -3078,7 +3007,7 @@ function TrackListSidebar({
                   renderSongLink
                 }
               ) }, track.uuid)),
-              hasMore && /* @__PURE__ */ jsx32("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
+              hasMore && /* @__PURE__ */ jsx31("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
             ]
           }
         )
@@ -3088,8 +3017,8 @@ function TrackListSidebar({
 }
 
 // src/genre-tree/PlayerPanel.tsx
-import { useEffect as useEffect8, useState as useState8 } from "react";
-import { twMerge as twMerge2 } from "tailwind-merge";
+import { useEffect as useEffect7, useState as useState9 } from "react";
+import { twMerge } from "tailwind-merge";
 import {
   usePlayer as usePlayer11,
   PlayerVideoSurface
@@ -3097,12 +3026,13 @@ import {
 import {
   useTrackListSidebarVisibility
 } from "@behindthemusictree/app-kit/genre-tree";
+import { PanelEdgeTab } from "@behindthemusictree/ui";
 
 // src/genre-tree/PlayerControls.tsx
 import { Pause as Pause3, Play as Play4, SkipBack, SkipForward, Volume2, VolumeX } from "lucide-react";
 import { formatTime, useTrackList as useTrackList7 } from "@behindthemusictree/app-kit/genre-tree";
 import { PlayStates as PlayStates4, useCurrentTime, usePlayer as usePlayer10 } from "@behindthemusictree/app-kit/player";
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 function PlayerControls() {
   const {
     duration,
@@ -3121,15 +3051,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 === PlayStates4.PLAYING;
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     "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__ */ jsxs26("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
-          /* @__PURE__ */ jsx33("span", { "aria-label": "Elapsed time", children: formatTime(safeCurrentTime) }),
-          /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsxs25("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
+          /* @__PURE__ */ jsx32("span", { "aria-label": "Elapsed time", children: formatTime(safeCurrentTime) }),
+          /* @__PURE__ */ jsx32(
             "input",
             {
               "aria-label": "Seek",
@@ -3143,11 +3073,11 @@ function PlayerControls() {
               onChange: (event) => seekTo(Number(event.currentTarget.value))
             }
           ),
-          /* @__PURE__ */ jsx33("span", { "aria-label": "Duration", children: formatTime(safeDuration) })
+          /* @__PURE__ */ jsx32("span", { "aria-label": "Duration", children: formatTime(safeDuration) })
         ] }),
-        /* @__PURE__ */ jsxs26("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
-          /* @__PURE__ */ jsxs26("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
-            /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsxs25("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
+          /* @__PURE__ */ jsxs25("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsx32(
               "button",
               {
                 type: "button",
@@ -3156,10 +3086,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__ */ jsx33(SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx32(SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             ),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx32(
               "button",
               {
                 type: "button",
@@ -3168,10 +3098,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__ */ jsx33(Pause3, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ jsx33(Play4, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
+                children: isPlaying ? /* @__PURE__ */ jsx32(Pause3, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ jsx32(Play4, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
               }
             ),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx32(
               "button",
               {
                 type: "button",
@@ -3180,14 +3110,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__ */ jsx33(SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx32(SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs26("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__ */ jsx33(VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ jsx33(Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
-            /* @__PURE__ */ jsx33("span", { className: "sr-only", children: "Volume" }),
-            /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsxs25("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__ */ jsx32(VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ jsx32(Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
+            /* @__PURE__ */ jsx32("span", { className: "sr-only", children: "Volume" }),
+            /* @__PURE__ */ jsx32(
               "input",
               {
                 "aria-label": "Volume",
@@ -3209,7 +3139,7 @@ function PlayerControls() {
 }
 
 // src/genre-tree/PlayerPanel.tsx
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 var PANEL_ID = "player-panel";
 var DEFAULT_EXTENDED_WIDTH = "calc(100vw - var(--layout-center-left) - var(--layout-gutter))";
 function PlayerPanel({
@@ -3223,12 +3153,12 @@ function PlayerPanel({
 }) {
   const { playerTrackObject } = usePlayer11();
   const { toggleTrackListSidebar, isTrackListSidebarVisible } = useTrackListSidebarVisibility();
-  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = useState8("");
+  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = useState9("");
   const loadedTrackTitle = playerTrackObject?.track.title;
-  useEffect8(() => {
+  useEffect7(() => {
     if (loadedTrackTitle) setLastLoadedTrackTitle(loadedTrackTitle);
   }, [loadedTrackTitle]);
-  const [uncontrolledExtended, setUncontrolledExtended] = useState8(false);
+  const [uncontrolledExtended, setUncontrolledExtended] = useState9(false);
   const isExtendRequested = expanded ?? uncontrolledExtended;
   const setIsExtendRequested = (next) => {
     setUncontrolledExtended(next);
@@ -3249,11 +3179,11 @@ function PlayerPanel({
     onClick: () => setIsExtendRequested(true),
     expanded: false
   } : null;
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       id: PANEL_ID,
-      className: twMerge2(
+      className: twMerge(
         "fixed right-[var(--layout-gutter)] top-[var(--layout-band-top)] z-40 max-h-[calc(100vh-var(--layout-band-top)-3.5rem)]",
         !isExtended && "w-[var(--layout-right-w)]",
         isTrackListSidebarVisible && "h-[calc(100vh-var(--layout-band-top)-3.5rem)]",
@@ -3262,7 +3192,7 @@ function PlayerPanel({
       ),
       style: isExtended ? { width: extendedWidth } : void 0,
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx33(
           PanelEdgeTab,
           {
             side: "right",
@@ -3272,30 +3202,30 @@ function PlayerPanel({
             className: "absolute right-full top-1/2 -translate-y-1/2"
           }
         ),
-        /* @__PURE__ */ jsxs27(
+        /* @__PURE__ */ jsxs26(
           "div",
           {
-            className: twMerge2(
+            className: twMerge(
               "flex h-full max-h-[inherit] overflow-hidden rounded-[var(--radius-panel,1rem)] bg-zinc-950 text-zinc-100 shadow-[0_1px_2px_rgba(0,0,0,0.5),0_2px_6px_2px_rgba(0,0,0,0.3)]",
               isExtended ? "flex-row" : "flex-col"
             ),
             children: [
-              /* @__PURE__ */ jsxs27("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
-                /* @__PURE__ */ jsx34("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ jsx34("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
-                /* @__PURE__ */ jsxs27("div", { className: "relative w-full shrink-0", children: [
-                  /* @__PURE__ */ jsx34(PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
-                  playerTrackObject?.loadError && /* @__PURE__ */ jsx34("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
+              /* @__PURE__ */ jsxs26("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
+                /* @__PURE__ */ jsx33("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ jsx33("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
+                /* @__PURE__ */ jsxs26("div", { className: "relative w-full shrink-0", children: [
+                  /* @__PURE__ */ jsx33(PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
+                  playerTrackObject?.loadError && /* @__PURE__ */ jsx33("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
                 ] }),
-                /* @__PURE__ */ jsx34(PlayerControls, {})
+                /* @__PURE__ */ jsx33(PlayerControls, {})
               ] }),
-              /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx33(
                 TrackListSidebar,
                 {
                   layout: "inline",
                   isCollapsed: !isTrackListSidebarVisible,
                   onExpand: toggleTrackListSidebar,
                   onMinimize: hideSongList,
-                  className: twMerge2(
+                  className: twMerge(
                     "min-h-0 min-w-0 flex-1",
                     isExtended && "border-l border-zinc-800"
                   ),
@@ -3315,11 +3245,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 jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 function Rating({ rating, handleChange }) {
   const instanceId = uuidv4();
-  return /* @__PURE__ */ jsx35("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsxs28("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
-    /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx34("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsxs27("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
+    /* @__PURE__ */ jsx34(
       "input",
       {
         id: `star-${instanceId}-${i}`,
@@ -3331,16 +3261,16 @@ function Rating({ rating, handleChange }) {
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ jsx35("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ jsxs28("div", { className: "flex", children: [
-      /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx34("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ jsxs27("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx34(
         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__ */ jsx35("span", { className: "flex-grow w-8" }),
+      /* @__PURE__ */ jsx34("span", { className: "flex-grow w-8" }),
       " "
-    ] }) : /* @__PURE__ */ jsx35(
+    ] }) : /* @__PURE__ */ jsx34(
       AiFillStar,
       {
         className: `w-7 h-7 absolute top-0 left-0 ${(rating ?? -1) >= i ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
@@ -3355,8 +3285,6 @@ export {
   GenreSearch,
   GenreNodeActionBand,
   GenreInfoPanelBody,
-  PanelEdgeTab,
-  useLeftDetailPanelLayout,
   TrackPositionPlayPause,
   TrackItem,
   GenreTreeView,
@@ -3369,4 +3297,4 @@ export {
   GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
   GenreTreeOutlineSkeleton
 };
-//# sourceMappingURL=chunk-2HE2HDFA.js.map
+//# sourceMappingURL=chunk-QGGVPIXY.js.map