@behindthemusictree/app-kit-ui 40.0.0 → 40.1.0

package/dist/genre-tree/index.cjs

@@ -50,8 +50,8 @@ module.exports = __toCommonJS(genre_tree_exports);
 // src/genre-tree/GenreTreeView.tsx
 var import_react19 = require("react");
 var import_react_query3 = require("@tanstack/react-query");
+var import_lucide_react13 = require("lucide-react");
 var import_lucide_react14 = require("lucide-react");
-var import_lucide_react15 = require("lucide-react");
 var import_ui21 = require("@behindthemusictree/ui");
 var import_genre_tree_view5 = require("@behindthemusictree/genre-tree-view");
 var import_genre_tree30 = require("@behindthemusictree/app-kit/genre-tree");
@@ -85,6 +85,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
 var import_genre_tree3 = require("@behindthemusictree/app-kit/genre-tree");
 var import_react3 = require("react");
@@ -1745,7 +1760,7 @@ function useGenreDetailContent({
   trailing,
   genrePlaylist: hostPlaylist,
   expanded,
-  treeRelations
+  treeStyles
 }) {
   const { data: detail, isPending, isError } = (0, import_genre_tree20.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists: [], artist: extras?.artist });
@@ -1753,19 +1768,12 @@ function useGenreDetailContent({
   const view = (0, import_react15.useMemo)(() => {
     if (!detail) return null;
     const rootColor = (0, import_genre_tree_view4.getGenreTreeColor)(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: (0, import_genre_tree_view4.tintSurface)(rootColor), textColor: import_genre_tree_view4.TEXT_COLOR }
+      ...treeStyles?.get(genre.uuid) ?? { fill: (0, import_genre_tree_view4.tintSurface)(rootColor), textColor: import_genre_tree_view4.TEXT_COLOR }
     });
     const ancestors2 = [...detail.ascendants].sort((a, b) => b.degree - a.degree);
-    const own = treeStyles.get(detail.uuid) ?? { fill: rootColor, textColor: (0, import_genre_tree_view4.getTextColorOnFill)(rootColor) };
+    const own = treeStyles?.get(detail.uuid) ?? { fill: rootColor, textColor: (0, import_genre_tree_view4.getTextColorOnFill)(rootColor) };
     return {
       node: {
         id: detail.uuid,
@@ -1782,7 +1790,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",
@@ -2140,7 +2148,6 @@ function ArtistDiscography({ albums }) {
 // src/genre-tree/artist/ArtistSongs.tsx
 var import_react17 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
-var import_lucide_react12 = require("lucide-react");
 var import_ui16 = require("@behindthemusictree/ui");
 var import_player11 = require("@behindthemusictree/app-kit/player");
 var import_genre_tree26 = require("@behindthemusictree/app-kit/genre-tree");
@@ -2305,34 +2312,20 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
     void play(song.uuid);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui16.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui16.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-        "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__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react12.Play, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
-            "Play all"
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-caption", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-        "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__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-wrap items-center justify-end gap-2 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-caption", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      "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__ */ (0, import_jsx_runtime40.jsx)("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       TrackItem,
       {
@@ -2430,7 +2423,7 @@ var import_genre_tree29 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/song/SongPanelContent.tsx
 var import_react18 = require("react");
-var import_lucide_react13 = require("lucide-react");
+var import_lucide_react12 = require("lucide-react");
 var import_ui18 = require("@behindthemusictree/ui");
 var import_player12 = require("@behindthemusictree/app-kit/player");
 var import_genre_tree28 = require("@behindthemusictree/app-kit/genre-tree");
@@ -2523,7 +2516,7 @@ function SongPanelContent(props) {
       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         import_ui18.ActionButton,
         {
-          icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react13.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react13.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
+          icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react12.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react12.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
           label: isPlaying ? "Pause" : "Play",
           disabled: !!unplayableReason,
           title: unplayableReason ?? void 0,
@@ -2895,6 +2888,7 @@ function GenreTreeView({
     !overlayPanel && hasSelectedGenreNode ? selectedNodeId : null,
     resolveStyle
   );
+  const treeStyles = (0, import_react19.useMemo)(() => toGenreNodeStyles(relations, visibleGenrePlaylists), [relations, visibleGenrePlaylists]);
   const [selectionHistory, setSelectionHistory] = (0, import_react19.useState)({ current: selectedGenreUuid, previous: null });
   if (selectionHistory.current !== selectedGenreUuid) {
     setSelectionHistory({ current: selectedGenreUuid, previous: selectionHistory.current ?? selectionHistory.previous });
@@ -2940,7 +2934,7 @@ function GenreTreeView({
       selectGenre(uuid);
     },
     expanded: isExpanded,
-    treeRelations: relations,
+    treeStyles,
     playback,
     genrePlaylist: selectedGenrePlaylist,
     band: {
@@ -3018,7 +3012,7 @@ function GenreTreeView({
       "aria-label": activePanel.expanded ? "Shrink panel" : "Extend panel",
       style: activePanel.headerAccent && { color: "inherit" },
       onClick: () => activePanel.onExpandedChange?.(!activePanel.expanded),
-      children: activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react15.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react15.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
+      children: activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react14.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react14.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
     }
   ) : null;
   const renderArtistFilter = () => {
@@ -3118,7 +3112,7 @@ function GenreTreeView({
       !isLoading && !isError && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         import_ui21.IconTextButton,
         {
-          icon: import_lucide_react14.Plus,
+          icon: import_lucide_react13.Plus,
           text: "Add root",
           onClick: () => handleGenreCreationAction(null)
         }
@@ -3295,7 +3289,7 @@ var import_genre_tree_view6 = require("@behindthemusictree/genre-tree-view");
 
 // src/genre-tree/track-list-sidebar/TrackListSidebar.tsx
 var import_react20 = require("react");
-var import_lucide_react16 = require("lucide-react");
+var import_lucide_react15 = require("lucide-react");
 var import_genre_tree31 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree32 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun3 = require("@behindthemusictree/app-kit/track-noun");
@@ -3428,7 +3422,7 @@ 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__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react16.ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react15.ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
             }
           )
         ] }),
@@ -3470,7 +3464,7 @@ var import_genre_tree34 = require("@behindthemusictree/app-kit/genre-tree");
 var import_ui22 = require("@behindthemusictree/ui");
 
 // src/genre-tree/PlayerControls.tsx
-var import_lucide_react17 = require("lucide-react");
+var import_lucide_react16 = require("lucide-react");
 var import_genre_tree33 = require("@behindthemusictree/app-kit/genre-tree");
 var import_player13 = require("@behindthemusictree/app-kit/player");
 var import_jsx_runtime47 = require("react/jsx-runtime");
@@ -3527,7 +3521,7 @@ 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__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react17.SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react16.SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
@@ -3539,7 +3533,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__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react17.Pause, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react17.Play, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
+                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react16.Pause, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react16.Play, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
@@ -3551,12 +3545,12 @@ 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__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react17.SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react16.SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("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__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react17.VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react17.Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
+            volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react16.VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react16.Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sr-only", children: "Volume" }),
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               "input",