@behindthemusictree/app-kit-ui 40.0.0 → 40.1.0

package/dist/{chunk-I2TEOHVG.js → chunk-DPYUE6WD.js}

@@ -46,6 +46,21 @@ function toTreeNodes(genrePlaylists, sizeMetric, focusUuids) {
   }));
 }
 
+// src/genre-tree/playlist-tree/toGenreNodeStyles.ts
+function toGenreNodeStyles(relations, genrePlaylists) {
+  const styles = /* @__PURE__ */ new Map();
+  if (!relations) return styles;
+  const genreUuidByPlaylistUuid = new Map(
+    genrePlaylists.flatMap((genrePlaylist) => genrePlaylist.criteria ? [[genrePlaylist.uuid, genrePlaylist.criteria.uuid]] : [])
+  );
+  const drawn = [relations, relations.parentNode, ...relations.childNodes, ...relations.ancestorNodes];
+  for (const entry of drawn) {
+    const genreUuid = entry && genreUuidByPlaylistUuid.get(entry.node.id);
+    if (entry && genreUuid) styles.set(genreUuid, { fill: entry.fill, textColor: entry.textColor });
+  }
+  return styles;
+}
+
 // src/genre-tree/playlist-tree/TreePerRoot.tsx
 import { genrePlaylistTrackCount as genrePlaylistTrackCount2 } from "@behindthemusictree/app-kit/genre-tree";
 import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
@@ -1503,7 +1518,7 @@ function useGenreDetailContent({
   trailing,
   genrePlaylist: hostPlaylist,
   expanded,
-  treeRelations
+  treeStyles
 }) {
   const { data: detail, isPending, isError } = useFetchGenreDetail(genreUuid, scope, getBackendBaseUrl);
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists: [], artist: extras?.artist });
@@ -1511,19 +1526,12 @@ function useGenreDetailContent({
   const view = useMemo6(() => {
     if (!detail) return null;
     const rootColor = getGenreTreeColor2(detail.root.wikidataId);
-    const treeStyles = /* @__PURE__ */ new Map();
-    if (treeRelations) {
-      const drawn = [treeRelations, treeRelations.parentNode, ...treeRelations.childNodes, ...treeRelations.ancestorNodes];
-      for (const entry of drawn) {
-        if (entry) treeStyles.set(entry.node.id, { fill: entry.fill, textColor: entry.textColor });
-      }
-    }
     const relative = (genre, parentId) => ({
       node: toNode(genre, parentId),
-      ...treeStyles.get(genre.uuid) ?? { fill: tintSurface(rootColor), textColor: TEXT_COLOR }
+      ...treeStyles?.get(genre.uuid) ?? { fill: tintSurface(rootColor), textColor: TEXT_COLOR }
     });
     const ancestors2 = [...detail.ascendants].sort((a, b) => b.degree - a.degree);
-    const own = treeStyles.get(detail.uuid) ?? { fill: rootColor, textColor: getTextColorOnFill(rootColor) };
+    const own = treeStyles?.get(detail.uuid) ?? { fill: rootColor, textColor: getTextColorOnFill(rootColor) };
     return {
       node: {
         id: detail.uuid,
@@ -1540,7 +1548,7 @@ function useGenreDetailContent({
         ({ ascendant }, index) => relative(ascendant, index === 0 ? null : ancestors2[index - 1].ascendant.uuid)
       )
     };
-  }, [detail, scope, treeRelations]);
+  }, [detail, scope, treeStyles]);
   if (isError) return {
     name: null,
     title: "Genre unavailable",
@@ -1910,7 +1918,6 @@ function ArtistDiscography({ albums }) {
 // src/genre-tree/artist/ArtistSongs.tsx
 import { useState as useState8 } from "react";
 import { keepPreviousData } from "@tanstack/react-query";
-import { Play as Play3 } from "lucide-react";
 import { Pagination, PanelSection as PanelSection5, Skeleton as Skeleton4 } from "@behindthemusictree/ui";
 import { usePlayer as usePlayer9 } from "@behindthemusictree/app-kit/player";
 import {
@@ -2080,34 +2087,20 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
     void play(song.uuid);
   };
   return /* @__PURE__ */ jsx34(PanelSection5, { title: "Songs", children: isPending ? /* @__PURE__ */ jsx34(Skeleton4, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ jsx34("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ jsx34("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ jsxs23(Fragment12, { children: [
-    /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
-      /* @__PURE__ */ jsxs23(
-        "button",
-        {
-          type: "button",
-          onClick: () => void play(),
-          className: "flex w-fit items-center gap-1.5 px-3 py-1 text-caption font-medium bg-gray-900 text-white rounded-full hover:bg-gray-700",
-          children: [
-            /* @__PURE__ */ jsx34(Play3, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
-            "Play all"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx34("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-caption", children: SORTS.map((sort) => /* @__PURE__ */ jsx34(
-        "button",
-        {
-          type: "button",
-          "aria-pressed": ordering === sort.ordering,
-          onClick: () => {
-            setOrdering(sort.ordering);
-            setPage(1);
-          },
-          className: "px-2.5 py-0.5 text-[var(--color-text)] rounded-full hover:bg-[var(--color-surface-muted)] aria-pressed:bg-gray-900 aria-pressed:text-white",
-          children: sort.label
+    /* @__PURE__ */ jsx34("div", { className: "flex flex-wrap items-center justify-end gap-2 mb-2", children: /* @__PURE__ */ jsx34("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-caption", children: SORTS.map((sort) => /* @__PURE__ */ jsx34(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": ordering === sort.ordering,
+        onClick: () => {
+          setOrdering(sort.ordering);
+          setPage(1);
         },
-        sort.ordering
-      )) })
-    ] }),
+        className: "px-2.5 py-0.5 text-[var(--color-text)] rounded-full hover:bg-[var(--color-surface-muted)] aria-pressed:bg-gray-900 aria-pressed:text-white",
+        children: sort.label
+      },
+      sort.ordering
+    )) }) }),
     /* @__PURE__ */ jsx34("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ jsx34("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ jsx34(
       TrackItem,
       {
@@ -2207,7 +2200,7 @@ import {
 
 // src/genre-tree/song/SongPanelContent.tsx
 import { useState as useState9 } from "react";
-import { Pause as Pause3, Play as Play4 } from "lucide-react";
+import { Pause as Pause3, Play as Play3 } from "lucide-react";
 import { ActionBand as ActionBand3, ActionButton as ActionButton5, FieldList as FieldList2, PANEL_LABEL_CLASS, PanelBleed as PanelBleed3, PanelSection as PanelSection6, Skeleton as Skeleton6 } from "@behindthemusictree/ui";
 import { PlayStates as PlayStates3, usePlayer as usePlayer10 } from "@behindthemusictree/app-kit/player";
 import {
@@ -2306,7 +2299,7 @@ function SongPanelContent(props) {
       /* @__PURE__ */ jsx36(
         ActionButton5,
         {
-          icon: isPlaying ? /* @__PURE__ */ jsx36(Pause3, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ jsx36(Play4, { "aria-hidden": "true", className: "w-5 h-5" }),
+          icon: isPlaying ? /* @__PURE__ */ jsx36(Pause3, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ jsx36(Play3, { "aria-hidden": "true", className: "w-5 h-5" }),
           label: isPlaying ? "Pause" : "Play",
           disabled: !!unplayableReason,
           title: unplayableReason ?? void 0,
@@ -2678,6 +2671,7 @@ function GenreTreeView({
     !overlayPanel && hasSelectedGenreNode ? selectedNodeId : null,
     resolveStyle
   );
+  const treeStyles = useMemo8(() => toGenreNodeStyles(relations, visibleGenrePlaylists), [relations, visibleGenrePlaylists]);
   const [selectionHistory, setSelectionHistory] = useState10({ current: selectedGenreUuid, previous: null });
   if (selectionHistory.current !== selectedGenreUuid) {
     setSelectionHistory({ current: selectedGenreUuid, previous: selectionHistory.current ?? selectionHistory.previous });
@@ -2723,7 +2717,7 @@ function GenreTreeView({
       selectGenre(uuid);
     },
     expanded: isExpanded,
-    treeRelations: relations,
+    treeStyles,
     playback,
     genrePlaylist: selectedGenrePlaylist,
     band: {
@@ -3263,7 +3257,7 @@ import {
 import { PanelEdgeTab } from "@behindthemusictree/ui";
 
 // src/genre-tree/PlayerControls.tsx
-import { Pause as Pause4, Play as Play5, SkipBack, SkipForward, Volume2, VolumeX } from "lucide-react";
+import { Pause as Pause4, Play as Play4, SkipBack, SkipForward, Volume2, VolumeX } from "lucide-react";
 import { formatTime, useTrackList as useTrackList8 } from "@behindthemusictree/app-kit/genre-tree";
 import { PlayStates as PlayStates4, useCurrentTime, usePlayer as usePlayer11 } from "@behindthemusictree/app-kit/player";
 import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
@@ -3332,7 +3326,7 @@ 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__ */ jsx41(Pause4, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ jsx41(Play5, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
+                children: isPlaying ? /* @__PURE__ */ jsx41(Pause4, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ jsx41(Play4, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
               }
             ),
             /* @__PURE__ */ jsx41(
@@ -3607,4 +3601,4 @@ export {
   GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
   GenreTreeOutlineSkeleton
 };
-//# sourceMappingURL=chunk-I2TEOHVG.js.map
+//# sourceMappingURL=chunk-DPYUE6WD.js.map