@behindthemusictree/app-kit-ui 36.0.0 → 37.1.0

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

@@ -483,6 +483,7 @@ function SearchBox({
   groups,
   onPicked,
   onClear,
+  clearLabel,
   leading,
   className: className2,
   onFocus
@@ -514,6 +515,7 @@ function SearchBox({
       status,
       loading,
       onClear,
+      clearLabel,
       leading,
       inputClassName: "focus-visible:ring-0"
     }
@@ -614,6 +616,8 @@ function GenreSearch({
   onSelect,
   selectedName = null,
   onClear,
+  showClear,
+  clearLabel,
   onPrevious,
   placeholder,
   onQueryChange,
@@ -661,7 +665,8 @@ function GenreSearch({
         if (groupKey !== "genres") setQuery("");
         onQueryChange?.("");
       },
-      onClear: canClear ? () => {
+      clearLabel,
+      onClear: showClear ?? canClear ? () => {
         clear();
         onQueryChange?.("");
       } : void 0,
@@ -1516,10 +1521,12 @@ function useGenreDetailContent({
     };
   }, [detail, scope]);
   if (isError) return {
+    name: null,
     title: "Genre unavailable",
     content: /* @__PURE__ */ jsx20("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__ */ jsxs15("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
       /* @__PURE__ */ jsx20(Skeleton3, { className: "h-6 w-2/3" }),
@@ -1541,6 +1548,7 @@ function useGenreDetailContent({
   );
   const ancestors = /* @__PURE__ */ jsx20(GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
   return {
+    name: detail.name,
     title: detail.name,
     headerAccent: { background: view.fill, color: ACCENT_TEXT_COLOR },
     aside: expanded ? ancestors : void 0,
@@ -1582,7 +1590,7 @@ function GenreDetailPanel({
   onExpandedChange,
   edgeTab,
   extras,
-  headerClassName
+  titleInSearch
 }) {
   const panel = useGenreDetailContent({
     genreUuid,
@@ -1605,7 +1613,7 @@ function GenreDetailPanel({
       onExpandedChange,
       edgeTab,
       aside: panel.aside,
-      headerClassName,
+      titleInSearch,
       headerActions: onExpandedChange ? /* @__PURE__ */ jsx20(IconButton, { "aria-label": expanded ? "Shrink panel" : "Extend panel", onClick: () => onExpandedChange(!expanded), children: expanded ? /* @__PURE__ */ jsx20(Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx20(Maximize2, { "aria-hidden": "true", className: "h-4 w-4" }) }) : void 0,
       children: panel.content
     }
@@ -2184,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);
@@ -2202,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 {
@@ -2273,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 };
@@ -2321,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 }
           }
         )
       };
@@ -2330,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";
@@ -2512,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 = [];
@@ -2537,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;
@@ -2606,7 +2638,6 @@ function GenreTreeView({
     if (node !== null && songUuid !== null) changeSong(null);
     selectNode(node);
   };
-  const handleGenreSearchClear = clearSelection;
   const handleGenreSearchSelect = (genrePlaylist2) => {
     reopenPanel();
     if (songUuid !== null) changeSong(null);
@@ -2689,7 +2720,7 @@ function GenreTreeView({
       expanded: overlayPanel.expanded ?? false,
       onExpandedChange: overlayPanel.onExpandedChange,
       onClose: overlayPanel.onClose,
-      compact: false
+      titleInSearch: false
     };
   } else if (selectedGenreUuid) {
     activePanel = {
@@ -2699,7 +2730,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) {
@@ -2710,7 +2741,7 @@ function GenreTreeView({
       expanded: builtInPanel.expanded,
       onExpandedChange: builtInPanel.onExpandedChange,
       onClose: builtInPanel.onClose,
-      compact: true
+      titleInSearch: true
     };
   }
   const isPanelShown = activePanel !== null && (selectedGenreUuid !== null || isTreeReady);
@@ -2778,8 +2809,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,
@@ -2969,8 +3002,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,
@@ -2979,7 +3011,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__ */ jsxs26(Fragment14, { children: [
                 activePanel.content,
                 activePanel.aside
@@ -3437,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,
@@ -3452,13 +3547,15 @@ export {
   GenreDetailPanel,
   TrackPositionPlayPause,
   TrackItem,
+  useEntityPanel,
   GenreTreeView,
   TrackListSidebar,
   PlayerPanel,
   Rating,
+  EntityDetailPanel,
   GenreTreeSkeleton,
   GenreTreeWheelSkeleton2 as GenreTreeWheelSkeleton,
   GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
   GenreTreeOutlineSkeleton
 };
-//# sourceMappingURL=chunk-RTXLUHJY.js.map
+//# sourceMappingURL=chunk-57OI426Y.js.map