@behindthemusictree/app-kit-ui 36.0.0 → 37.1.0

package/dist/genre-tree/index.d.ts

@@ -130,6 +130,7 @@ type SearchBoxProps = {
     onPicked?: (groupKey: string, itemKey: string) => void;
     /** Shows the clear button when set. */
     onClear?: () => void;
+    clearLabel?: string;
     /** An action left of the text, e.g. a Previous button. */
     leading?: ReactNode;
     className?: string;
@@ -137,7 +138,7 @@ type SearchBoxProps = {
     onFocus?: () => void;
 };
 /** A search pill over any number of result groups; picking an item calls that item's `onSelect`. */
-declare function SearchBox({ label, placeholder, value, onValueChange, groups, onPicked, onClear, leading, className, onFocus, }: SearchBoxProps): react.JSX.Element;
+declare function SearchBox({ label, placeholder, value, onValueChange, groups, onPicked, onClear, clearLabel, leading, className, onFocus, }: SearchBoxProps): react.JSX.Element;
 
 declare function useArtistSearchGroup(getBaseUrl: () => string, text: string, onSelect: (artist: ArtistSearchResult) => void, enabled?: boolean): SearchGroup | undefined;
 
@@ -165,6 +166,9 @@ type GenreSearchProps<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>
     onPrevious?: () => void;
     /** Called by the clear button, after it empties the input. */
     onClear?: () => void;
+    /** Forces the clear button on or off; by default it shows while the input has something to clear. */
+    showClear?: boolean;
+    clearLabel?: string;
     placeholder?: string;
     /** Called with what the user types, and with "" on clear or pick; never when `selectedName` refills the input. */
     onQueryChange?: (query: string) => void;
@@ -173,7 +177,7 @@ type GenreSearchProps<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>
     /** Called when the input gains focus. */
     onFocus?: () => void;
 };
-declare function GenreSearch<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>({ genrePlaylists, onSelect, selectedName, onClear, onPrevious, placeholder, onQueryChange, extraGroups, onFocus, }: GenreSearchProps<T>): react.JSX.Element;
+declare function GenreSearch<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>({ genrePlaylists, onSelect, selectedName, onClear, showClear, clearLabel, onPrevious, placeholder, onQueryChange, extraGroups, onFocus, }: GenreSearchProps<T>): react.JSX.Element;
 
 interface GenreSearchGroupsProps {
     query: string;
@@ -393,9 +397,10 @@ type GenreDetailPanelProps<O extends CriteriaOverview> = {
     /** Tab on the panel's inner edge, for hosts that hide and show the panel. */
     edgeTab?: ComponentProps<typeof DetailPanel>["edgeTab"];
     extras?: GenreInfoPanelBodyProps<O>["extras"];
-    headerClassName?: ComponentProps<typeof DetailPanel>["headerClassName"];
+    /** The host's search field shows this genre's name and closes the panel. */
+    titleInSearch?: boolean;
 };
-declare function GenreDetailPanel<O extends CriteriaOverview>({ genreUuid, scope, getBackendBaseUrl, onClose, onSelectGenre, onZoomIn, shareUrl, shareTarget, collapsed, expanded, onExpandedChange, edgeTab, extras, headerClassName, }: GenreDetailPanelProps<O>): react.JSX.Element;
+declare function GenreDetailPanel<O extends CriteriaOverview>({ genreUuid, scope, getBackendBaseUrl, onClose, onSelectGenre, onZoomIn, shareUrl, shareTarget, collapsed, expanded, onExpandedChange, edgeTab, extras, titleInSearch, }: GenreDetailPanelProps<O>): react.JSX.Element;
 
 type GenrePlaylistTreePerRootProps<T extends TrackBase> = {
     scope: Scope;
@@ -483,4 +488,56 @@ interface RatingProps {
 }
 declare function Rating({ rating, handleChange }: RatingProps): react.JSX.Element;
 
-export { type ArtistSearchProps, GenreDetailPanel, type GenreDetailPanelProps, type GenreDetailSlots, type GenreFocusProps, GenreInfoPanelBody, type GenreInfoPanelBodyProps, GenreNodeActionBand, type GenrePlaylistPlayback, type GenrePlaylistTracksSlots, GenrePlaylistTreePerRoot, type GenrePlaylistTreePerRootProps, GenreSearch, type GenreSearchExtraGroup, type GenreSearchGroupsProps, type GenreSearchProps, type GenreTreeShareTarget, GenreTreeView, type GenreTreeViewProps, type GetGenreTreeShareUrl, type ParentChange, type PlayableGenrePlaylist, PlayerPanel, type PlayerPanelProps, Rating, type RatingProps, SEARCH_FAILED_STATUS, SearchBox, type SearchBoxProps, type SearchGroup, type SearchGroupItem, TrackItem, type TrackItemProps, TrackListSidebar, type TrackListSidebarProps, TrackPositionPlayPause, type TrackPositionPlayPauseProps, type UseGenrePlaylistPlaybackOptions, type UseGenreRemoteSearchGroupOptions, searchStatus, useArtistSearchGroup, useGenrePlaylistPlayback, useGenreRemoteSearchGroup, useSongSearchGroup };
+/** How the song's genre is opened: through the loaded tree's playlists, or by the genre alone for a host without a tree. */
+type SongGenreNavigation = {
+    /** Root-to-leaf playlists of a genre in the loaded tree; empty when the tree doesn't hold it. */
+    getGenrePath: (genre: CriteriaMinimum) => CriteriaPlaylistSimple[];
+    onSelectGenrePlaylist: (genrePlaylist: CriteriaPlaylistSimple) => void;
+    onSelectGenre?: never;
+} | {
+    onSelectGenre: (genre: CriteriaMinimum) => void;
+    getGenrePath?: never;
+    onSelectGenrePlaylist?: never;
+};
+
+interface EntityPanelState {
+    uuid: string | null;
+    expanded: boolean;
+    onExpandedChange: (expanded: boolean) => void;
+    onClose: () => void;
+}
+type EntityPanelOptions = {
+    scope: Scope;
+    getBackendBaseUrl: () => string;
+    /** Artist requests go here when the host serves them from elsewhere; defaults to `getBackendBaseUrl`. */
+    getArtistBackendBaseUrl?: () => string;
+    getShareUrl?: GetGenreTreeShareUrl;
+    renderArtistLink: RenderArtistLink;
+    renderSongLink: RenderSongLink;
+    song: EntityPanelState;
+    artist: EntityPanelState;
+} & SongGenreNavigation;
+/** The song or artist detail overlay panel; a song takes precedence over an artist, undefined when neither is set. */
+declare function useEntityPanel({ scope, getBackendBaseUrl, getArtistBackendBaseUrl, getShareUrl, renderArtistLink, renderSongLink, song, artist, ...navigation }: EntityPanelOptions): OverlayPanel | undefined;
+
+type EntityDetailPanelProps = {
+    scope: Scope;
+    getBackendBaseUrl: () => string;
+    getArtistBackendBaseUrl?: () => string;
+    getShareUrl?: GetGenreTreeShareUrl;
+    songUuid: string | null;
+    onSongUuidChange: (uuid: string | null) => void;
+    artistUuid: string | null;
+    onArtistUuidChange: (uuid: string | null) => void;
+    /** Names render as buttons that open the artist by default. */
+    renderArtistLink?: RenderArtistLink;
+    /** Titles render as buttons that open the song by default. */
+    renderSongLink?: RenderSongLink;
+    collapsed?: boolean;
+    edgeTab?: ComponentProps<typeof DetailPanel>["edgeTab"];
+} & SongGenreNavigation;
+/** The song or artist detail in the shared left DetailPanel, for a host that has no genre tree. Renders nothing
+ * while neither is set; a song takes precedence over an artist. */
+declare function EntityDetailPanel({ scope, getBackendBaseUrl, getArtistBackendBaseUrl, getShareUrl, songUuid, onSongUuidChange, artistUuid, onArtistUuidChange, renderArtistLink, renderSongLink, collapsed, edgeTab, ...navigation }: EntityDetailPanelProps): react.JSX.Element | null;
+
+export { type ArtistSearchProps, EntityDetailPanel, type EntityDetailPanelProps, type EntityPanelOptions, type EntityPanelState, GenreDetailPanel, type GenreDetailPanelProps, type GenreDetailSlots, type GenreFocusProps, GenreInfoPanelBody, type GenreInfoPanelBodyProps, GenreNodeActionBand, type GenrePlaylistPlayback, type GenrePlaylistTracksSlots, GenrePlaylistTreePerRoot, type GenrePlaylistTreePerRootProps, GenreSearch, type GenreSearchExtraGroup, type GenreSearchGroupsProps, type GenreSearchProps, type GenreTreeShareTarget, GenreTreeView, type GenreTreeViewProps, type GetGenreTreeShareUrl, type ParentChange, type PlayableGenrePlaylist, PlayerPanel, type PlayerPanelProps, Rating, type RatingProps, SEARCH_FAILED_STATUS, SearchBox, type SearchBoxProps, type SearchGroup, type SearchGroupItem, type SongGenreNavigation, TrackItem, type TrackItemProps, TrackListSidebar, type TrackListSidebarProps, TrackPositionPlayPause, type TrackPositionPlayPauseProps, type UseGenrePlaylistPlaybackOptions, type UseGenreRemoteSearchGroupOptions, searchStatus, useArtistSearchGroup, useEntityPanel, useGenrePlaylistPlayback, useGenreRemoteSearchGroup, useSongSearchGroup };

package/dist/genre-tree/index.js

@@ -1,4 +1,5 @@
 import {
+  EntityDetailPanel,
   GenreDetailPanel,
   GenreInfoPanelBody,
   GenreNodeActionBand,
@@ -18,12 +19,14 @@ import {
   TrackPositionPlayPause,
   searchStatus,
   useArtistSearchGroup,
+  useEntityPanel,
   useGenrePlaylistPlayback,
   useGenreRemoteSearchGroup,
   useSongSearchGroup
-} from "../chunk-RTXLUHJY.js";
+} from "../chunk-57OI426Y.js";
 import "../chunk-DKQQLLMY.js";
 export {
+  EntityDetailPanel,
   GenreDetailPanel,
   GenreInfoPanelBody,
   GenreNodeActionBand,
@@ -43,6 +46,7 @@ export {
   TrackPositionPlayPause,
   searchStatus,
   useArtistSearchGroup,
+  useEntityPanel,
   useGenrePlaylistPlayback,
   useGenreRemoteSearchGroup,
   useSongSearchGroup

package/dist/index.cjs

@@ -24,6 +24,7 @@ __export(src_exports, {
   AuthErrorPopup: () => AuthErrorPopup,
   AuthPopup: () => AuthPopup,
   BasePopup: () => BasePopup,
+  EntityDetailPanel: () => EntityDetailPanel,
   GenreDetailPanel: () => GenreDetailPanel,
   GenreInfoPanelBody: () => GenreInfoPanelBody,
   GenreNodeActionBand: () => GenreNodeActionBand,
@@ -50,6 +51,7 @@ __export(src_exports, {
   TrackUploadPopup: () => TrackUploadPopup,
   searchStatus: () => searchStatus,
   useArtistSearchGroup: () => useArtistSearchGroup,
+  useEntityPanel: () => useEntityPanel,
   useGenrePlaylistPlayback: () => useGenrePlaylistPlayback,
   useGenreRemoteSearchGroup: () => useGenreRemoteSearchGroup,
   useSongSearchGroup: () => useSongSearchGroup
@@ -1047,6 +1049,7 @@ function SearchBox({
   groups,
   onPicked,
   onClear,
+  clearLabel,
   leading,
   className: className2,
   onFocus
@@ -1078,6 +1081,7 @@ function SearchBox({
       status,
       loading,
       onClear,
+      clearLabel,
       leading,
       inputClassName: "focus-visible:ring-0"
     }
@@ -1173,6 +1177,8 @@ function GenreSearch({
   onSelect,
   selectedName = null,
   onClear,
+  showClear,
+  clearLabel,
   onPrevious,
   placeholder,
   onQueryChange,
@@ -1220,7 +1226,8 @@ function GenreSearch({
         if (groupKey !== "genres") setQuery("");
         onQueryChange?.("");
       },
-      onClear: canClear ? () => {
+      clearLabel,
+      onClear: showClear ?? canClear ? () => {
         clear();
         onQueryChange?.("");
       } : void 0,
@@ -2057,10 +2064,12 @@ function useGenreDetailContent({
     };
   }, [detail, scope]);
   if (isError) return {
+    name: null,
     title: "Genre unavailable",
     content: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." })
   };
   if (isPending || !detail || !view) return {
+    name: null,
     title: "Loading genre\u2026",
     content: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui10.Skeleton, { className: "h-6 w-2/3" }),
@@ -2082,6 +2091,7 @@ function useGenreDetailContent({
   );
   const ancestors = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
   return {
+    name: detail.name,
     title: detail.name,
     headerAccent: { background: view.fill, color: import_genre_tree_view4.ACCENT_TEXT_COLOR },
     aside: expanded ? ancestors : void 0,
@@ -2123,7 +2133,7 @@ function GenreDetailPanel({
   onExpandedChange,
   edgeTab,
   extras,
-  headerClassName
+  titleInSearch
 }) {
   const panel = useGenreDetailContent({
     genreUuid,
@@ -2146,7 +2156,7 @@ function GenreDetailPanel({
       onExpandedChange,
       edgeTab,
       aside: panel.aside,
-      headerClassName,
+      titleInSearch,
       headerActions: onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui10.IconButton, { "aria-label": expanded ? "Shrink panel" : "Extend panel", onClick: () => onExpandedChange(!expanded), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react12.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react12.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" }) }) : void 0,
       children: panel.content
     }
@@ -2700,15 +2710,8 @@ function SongHistory({ uuid, getBackendBaseUrl }) {
     }
   );
 }
-function SongPanelContent({
-  song,
-  scope,
-  getBackendBaseUrl,
-  shareUrl,
-  renderArtistLink,
-  genrePath,
-  onSelectGenre
-}) {
+function SongPanelContent(props) {
+  const { song, scope, getBackendBaseUrl, shareUrl, renderArtistLink } = props;
   const { playNewTrackListFromTrackUuid } = (0, import_genre_tree26.useTrackList)();
   const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player11.usePlayer)();
   const unplayableReason = (0, import_genre_tree26.songUnplayableReason)(song);
@@ -2718,12 +2721,14 @@ function SongPanelContent({
   const musicBrainzUrl = (0, import_genre_tree26.musicBrainzRecordingUrl)(song);
   const fields = [];
   if (song.genre) {
-    const path = genrePath.length > 0 ? genrePath : null;
+    const path = props.genrePath && props.genrePath.length > 0 ? props.genrePath : null;
+    const { onSelectGenre } = props;
+    const genre = song.genre;
     fields.push({
       label: "Genre",
-      value: path ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { children: [
+      value: onSelectGenre ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", onClick: () => onSelectGenre(genre), className: "hover:underline", children: genre.name }) : path ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { children: [
         index > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { "aria-hidden": "true", children: "\u203A " }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", onClick: () => props.onSelectGenrePlaylist?.(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
       ] }, genrePlaylist.uuid)) }) : song.genre.name
     });
   } else {
@@ -2789,11 +2794,10 @@ function useSongPanel({
   getBackendBaseUrl,
   getShareUrl,
   renderArtistLink,
-  getGenrePath,
-  onSelectGenre,
   expanded,
   onExpandedChange,
-  onClose
+  onClose,
+  ...navigation
 }) {
   const result = (0, import_genre_tree27.useSong)(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
@@ -2837,8 +2841,10 @@ function useSongPanel({
             getBackendBaseUrl,
             shareUrl: shareUrl ?? void 0,
             renderArtistLink,
-            genrePath: song.genre ? getGenrePath(song.genre) : [],
-            onSelectGenre
+            ...navigation.getGenrePath ? {
+              genrePath: song.genre ? navigation.getGenrePath(song.genre) : [],
+              onSelectGenrePlaylist: navigation.onSelectGenrePlaylist
+            } : { onSelectGenre: navigation.onSelectGenre }
           }
         )
       };
@@ -2846,6 +2852,37 @@ function useSongPanel({
   }
 }
 
+// src/genre-tree/useEntityPanel.tsx
+function useEntityPanel({
+  scope,
+  getBackendBaseUrl,
+  getArtistBackendBaseUrl,
+  getShareUrl,
+  renderArtistLink,
+  renderSongLink,
+  song,
+  artist,
+  ...navigation
+}) {
+  const songPanel = useSongPanel({
+    ...song,
+    scope,
+    getBackendBaseUrl,
+    getShareUrl,
+    renderArtistLink,
+    ...navigation
+  });
+  const artistPanel = useArtistPanel({
+    ...artist,
+    scope,
+    getBackendBaseUrl: getArtistBackendBaseUrl ?? getBackendBaseUrl,
+    getShareUrl,
+    renderArtistLink,
+    renderSongLink
+  });
+  return songPanel ?? artistPanel;
+}
+
 // src/genre-tree/SizeMetricToggle.tsx
 var import_md2 = require("react-icons/md");
 var import_ui19 = require("@behindthemusictree/ui");
@@ -3028,20 +3065,6 @@ function GenreTreeView({
   const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react18.useState)(null);
   const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
   const songBaseUrl = getBackendBaseUrl;
-  const artistPanel = useArtistPanel({
-    uuid: artistUuid,
-    scope,
-    getBackendBaseUrl: artistBaseUrl,
-    getShareUrl: getShareUrlRef.current,
-    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
-    expanded: controlledArtistExpanded ?? (artistUuid !== null && expandedArtistUuid === artistUuid),
-    onExpandedChange: (on) => {
-      if (controlledArtistExpanded === void 0) setExpandedArtistUuid(on ? artistUuid : null);
-      onArtistExpandedChange?.(on);
-    },
-    renderSongLink: resolvedRenderSongLink,
-    onClose: () => changeArtist(null)
-  });
   const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
   const getGenrePath = (genre) => {
     const path = [];
@@ -3053,27 +3076,38 @@ function GenreTreeView({
     }
     return path;
   };
-  const songPanel = useSongPanel({
-    uuid: songUuid,
+  const entityPanel = useEntityPanel({
     scope,
     getBackendBaseUrl: songBaseUrl,
+    getArtistBackendBaseUrl: artistBaseUrl,
     getShareUrl: getShareUrlRef.current,
     renderArtistLink: resolvedRenderArtistLink,
+    renderSongLink: resolvedRenderSongLink,
+    song: {
+      uuid: songUuid,
+      expanded: controlledSongExpanded ?? (songUuid !== null && expandedSongUuid === songUuid),
+      onExpandedChange: (on) => {
+        if (controlledSongExpanded === void 0) setExpandedSongUuid(on ? songUuid : null);
+        onSongExpandedChange?.(on);
+      },
+      onClose: () => changeSong(null)
+    },
+    artist: {
+      uuid: artistUuid,
+      expanded: controlledArtistExpanded ?? (artistUuid !== null && expandedArtistUuid === artistUuid),
+      onExpandedChange: (on) => {
+        if (controlledArtistExpanded === void 0) setExpandedArtistUuid(on ? artistUuid : null);
+        onArtistExpandedChange?.(on);
+      },
+      onClose: () => changeArtist(null)
+    },
     getGenrePath,
-    onSelectGenre: (genrePlaylist2) => {
+    onSelectGenrePlaylist: (genrePlaylist2) => {
       changeSong(null);
       selectGenrePlaylist(genrePlaylist2);
-    },
-    expanded: controlledSongExpanded ?? (songUuid !== null && expandedSongUuid === songUuid),
-    onExpandedChange: (on) => {
-      if (controlledSongExpanded === void 0) setExpandedSongUuid(on ? songUuid : null);
-      onSongExpandedChange?.(on);
-    },
-    onClose: () => changeSong(null)
+    }
   });
-  const builtInSongPanel = overlayPanel || selectedGenreUuid !== null ? void 0 : songPanel;
-  const builtInArtistPanel = overlayPanel || selectedGenreUuid !== null || builtInSongPanel ? void 0 : artistPanel;
-  const builtInPanel = builtInSongPanel ?? builtInArtistPanel;
+  const builtInPanel = overlayPanel || selectedGenreUuid !== null ? void 0 : entityPanel;
   const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react18.useState)(false);
   const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react18.useState)(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
@@ -3122,7 +3156,6 @@ function GenreTreeView({
     if (node !== null && songUuid !== null) changeSong(null);
     selectNode(node);
   };
-  const handleGenreSearchClear = clearSelection;
   const handleGenreSearchSelect = (genrePlaylist2) => {
     reopenPanel();
     if (songUuid !== null) changeSong(null);
@@ -3205,7 +3238,7 @@ function GenreTreeView({
       expanded: overlayPanel.expanded ?? false,
       onExpandedChange: overlayPanel.onExpandedChange,
       onClose: overlayPanel.onClose,
-      compact: false
+      titleInSearch: false
     };
   } else if (selectedGenreUuid) {
     activePanel = {
@@ -3215,7 +3248,7 @@ function GenreTreeView({
       expanded: isExpanded,
       onExpandedChange: changeExpanded,
       onClose: clearSelection,
-      compact: false,
+      titleInSearch: true,
       headerAccent: relations ? { background: relations.fill, color: relations.textColor } : genreContent.headerAccent
     };
   } else if (builtInPanel) {
@@ -3226,7 +3259,7 @@ function GenreTreeView({
       expanded: builtInPanel.expanded,
       onExpandedChange: builtInPanel.onExpandedChange,
       onClose: builtInPanel.onClose,
-      compact: true
+      titleInSearch: true
     };
   }
   const isPanelShown = activePanel !== null && (selectedGenreUuid !== null || isTreeReady);
@@ -3294,8 +3327,10 @@ function GenreTreeView({
           if (songUuid) changeSong(null);
           selectGenre(uuid);
         },
-        selectedName: (selectedGenreUuid ? genreContent.title : null) ?? (typeof builtInPanel?.title === "string" ? builtInPanel.title : null),
-        onClear: builtInSongPanel ? () => changeSong(null) : builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
+        selectedName: selectedGenreUuid ? genreContent.name : typeof builtInPanel?.title === "string" ? builtInPanel.title : null,
+        onClear: activePanel?.onClose,
+        showClear: activePanel?.titleInSearch ?? false,
+        clearLabel: "Close panel",
         onPrevious: handlePrevious,
         onQueryChange: onSearchQueryChange,
         onFocus: onSearchFocus,
@@ -3485,8 +3520,7 @@ function GenreTreeView({
               ref: panelRef,
               side: "left",
               title: activePanel?.title ?? "",
-              hideTitle: activePanel?.compact,
-              hideClose: activePanel?.compact,
+              titleInSearch: activePanel?.titleInSearch,
               headerAccent: activePanel?.headerAccent,
               headerActions: expandButton,
               onClose: activePanel?.onClose ?? noop,
@@ -3495,7 +3529,7 @@ function GenreTreeView({
               onExpandedChange: activePanel?.onExpandedChange,
               aside: activePanel?.aside,
               edgeTab: detailTab,
-              headerClassName: "pt-[calc(var(--layout-search-h)+var(--layout-panel-inset)+0.5rem)]",
+              headerClassName: activePanel?.titleInSearch ? void 0 : "pt-[calc(var(--layout-search-h)+var(--layout-panel-inset)+0.5rem)]",
               children: activePanel?.aside && !activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
                 activePanel.content,
                 activePanel.aside
@@ -3942,12 +3976,76 @@ function Rating({ rating, handleChange }) {
     ) })
   ] }, i)) });
 }
+
+// src/genre-tree/EntityDetailPanel.tsx
+var import_react21 = require("react");
+var import_ui22 = require("@behindthemusictree/ui");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+function EntityDetailPanel({
+  scope,
+  getBackendBaseUrl,
+  getArtistBackendBaseUrl,
+  getShareUrl,
+  songUuid,
+  onSongUuidChange,
+  artistUuid,
+  onArtistUuidChange,
+  renderArtistLink,
+  renderSongLink,
+  collapsed,
+  edgeTab,
+  ...navigation
+}) {
+  const [expandedSongUuid, setExpandedSongUuid] = (0, import_react21.useState)(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react21.useState)(null);
+  const panel = useEntityPanel({
+    scope,
+    getBackendBaseUrl,
+    getArtistBackendBaseUrl,
+    getShareUrl,
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("button", { type: "button", onClick: () => onArtistUuidChange(artist.uuid), className: "hover:underline", children: artist.name })),
+    renderSongLink: renderSongLink ?? ((song) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("button", { type: "button", onClick: () => onSongUuidChange(song.uuid), className: "hover:underline", children: song.title })),
+    song: {
+      uuid: songUuid,
+      expanded: songUuid !== null && expandedSongUuid === songUuid,
+      onExpandedChange: (on) => setExpandedSongUuid(on ? songUuid : null),
+      onClose: () => onSongUuidChange(null)
+    },
+    artist: {
+      uuid: artistUuid,
+      expanded: artistUuid !== null && expandedArtistUuid === artistUuid,
+      onExpandedChange: (on) => setExpandedArtistUuid(on ? artistUuid : null),
+      onClose: () => onArtistUuidChange(null)
+    },
+    ...navigation
+  });
+  if (!panel) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    import_ui22.DetailPanel,
+    {
+      side: "left",
+      title: panel.title,
+      titleInSearch: true,
+      onClose: panel.onClose,
+      collapsed,
+      expanded: panel.expanded,
+      onExpandedChange: panel.onExpandedChange,
+      aside: panel.extraContent,
+      edgeTab,
+      children: panel.extraContent && !panel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+        panel.content,
+        panel.extraContent
+      ] }) : panel.content
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AuthCallbackHandler,
   AuthErrorPopup,
   AuthPopup,
   BasePopup,
+  EntityDetailPanel,
   GenreDetailPanel,
   GenreInfoPanelBody,
   GenreNodeActionBand,
@@ -3974,6 +4072,7 @@ function Rating({ rating, handleChange }) {
   TrackUploadPopup,
   searchStatus,
   useArtistSearchGroup,
+  useEntityPanel,
   useGenrePlaylistPlayback,
   useGenreRemoteSearchGroup,
   useSongSearchGroup