@behindthemusictree/app-kit-ui 37.0.0 → 37.1.0

package/dist/{chunk-FTYMRCJS.js → chunk-57OI426Y.js}

@@ -2192,15 +2192,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 } = useTrackList5();
   const { playerTrackObject, playState, handlePlayPauseAction } = usePlayer9();
   const unplayableReason = songUnplayableReason4(song);
@@ -2210,12 +2203,14 @@ function SongPanelContent({
   const musicBrainzUrl = musicBrainzRecordingUrl2(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__ */ jsx31("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ jsxs24("span", { children: [
+      value: onSelectGenre ? /* @__PURE__ */ jsx31("button", { type: "button", onClick: () => onSelectGenre(genre), className: "hover:underline", children: genre.name }) : path ? /* @__PURE__ */ jsx31("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ jsxs24("span", { children: [
         index > 0 && /* @__PURE__ */ jsx31("span", { "aria-hidden": "true", children: "\u203A " }),
-        /* @__PURE__ */ jsx31("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
+        /* @__PURE__ */ jsx31("button", { type: "button", onClick: () => props.onSelectGenrePlaylist?.(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
       ] }, genrePlaylist.uuid)) }) : song.genre.name
     });
   } else {
@@ -2281,11 +2276,10 @@ function useSongPanel({
   getBackendBaseUrl,
   getShareUrl,
   renderArtistLink,
-  getGenrePath,
-  onSelectGenre,
   expanded,
   onExpandedChange,
-  onClose
+  onClose,
+  ...navigation
 }) {
   const result = useSong(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
@@ -2329,8 +2323,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 }
           }
         )
       };
@@ -2338,6 +2334,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
 import { MdMusicNote, MdVisibility } from "react-icons/md";
 import { SegmentedControl } from "@behindthemusictree/ui";
@@ -2520,20 +2547,6 @@ function GenreTreeView({
   const [expandedArtistUuid, setExpandedArtistUuid] = useState9(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__ */ jsx34("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__ */ jsx34("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
   const getGenrePath = (genre) => {
     const path = [];
@@ -2545,27 +2558,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] = useState9(false);
   const [uncontrolledExpanded, setUncontrolledExpanded] = useState9(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
@@ -3445,6 +3469,69 @@ function Rating({ rating, handleChange }) {
   ] }, i)) });
 }
 
+// src/genre-tree/EntityDetailPanel.tsx
+import { useState as useState11 } from "react";
+import { DetailPanel as DetailPanel3 } from "@behindthemusictree/ui";
+import { Fragment as Fragment15, jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+function EntityDetailPanel({
+  scope,
+  getBackendBaseUrl,
+  getArtistBackendBaseUrl,
+  getShareUrl,
+  songUuid,
+  onSongUuidChange,
+  artistUuid,
+  onArtistUuidChange,
+  renderArtistLink,
+  renderSongLink,
+  collapsed,
+  edgeTab,
+  ...navigation
+}) {
+  const [expandedSongUuid, setExpandedSongUuid] = useState11(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = useState11(null);
+  const panel = useEntityPanel({
+    scope,
+    getBackendBaseUrl,
+    getArtistBackendBaseUrl,
+    getShareUrl,
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx39("button", { type: "button", onClick: () => onArtistUuidChange(artist.uuid), className: "hover:underline", children: artist.name })),
+    renderSongLink: renderSongLink ?? ((song) => /* @__PURE__ */ jsx39("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__ */ jsx39(
+    DetailPanel3,
+    {
+      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__ */ jsxs31(Fragment15, { children: [
+        panel.content,
+        panel.extraContent
+      ] }) : panel.content
+    }
+  );
+}
+
 export {
   useGenrePlaylistPlayback,
   GenrePlaylistTreePerRoot,
@@ -3460,13 +3547,15 @@ export {
   GenreDetailPanel,
   TrackPositionPlayPause,
   TrackItem,
+  useEntityPanel,
   GenreTreeView,
   TrackListSidebar,
   PlayerPanel,
   Rating,
+  EntityDetailPanel,
   GenreTreeSkeleton,
   GenreTreeWheelSkeleton2 as GenreTreeWheelSkeleton,
   GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
   GenreTreeOutlineSkeleton
 };
-//# sourceMappingURL=chunk-FTYMRCJS.js.map
+//# sourceMappingURL=chunk-57OI426Y.js.map