@behindthemusictree/app-kit-ui 42.0.1 → 43.0.0

package/dist/genre-tree/index.cjs

@@ -52,7 +52,7 @@ 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_ui21 = require("@behindthemusictree/ui");
+var import_ui22 = require("@behindthemusictree/ui");
 var import_genre_tree_view5 = require("@behindthemusictree/genre-tree-view");
 var import_genre_tree30 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree31 = require("@behindthemusictree/app-kit/genre-tree");
@@ -1848,7 +1848,16 @@ function useGenreDetailContent({
       onSelectNode: selectGenre
     }
   );
-  const ancestors = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
+  const ancestors = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_genre_tree_view4.GenreNodeAncestors,
+    {
+      node: view.node,
+      fill: view.fill,
+      textColor: view.textColor,
+      ancestorNodes: view.ancestorNodes,
+      onSelectNode: selectGenre
+    }
+  );
   return {
     name: detail.name,
     title: detail.name,
@@ -1924,6 +1933,7 @@ function GenreDetailPanel({
 // src/genre-tree/ChangeParentPopup.tsx
 var import_react16 = require("react");
 var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
+var import_ui11 = require("@behindthemusictree/ui");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function ChangeParentPopup({
   genrePlaylist,
@@ -1938,20 +1948,22 @@ function ChangeParentPopup({
     () => (0, import_genre_tree21.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
     [genrePlaylists, genrePlaylist.uuid]
   );
-  const handleSelect = (newParent) => {
+  const [confirmingRoot, setConfirmingRoot] = (0, import_react16.useState)(false);
+  const handleMove = (to) => {
     const genre = genrePlaylist.criteria.uuid;
     const parentPlaylistUuid = genrePlaylist.parent?.uuid;
     const from = parentPlaylistUuid ? genrePlaylists.find(({ uuid }) => uuid === parentPlaylistUuid)?.criteria?.uuid ?? null : null;
     mutate(
-      { uuid: genre, data: { parent: newParent.criteria.uuid } },
+      { uuid: genre, data: { parent: to } },
       {
         onSuccess: () => {
           onClose();
-          onParentChanged?.({ genre, from, to: newParent.criteria.uuid });
+          onParentChanged?.({ genre, from, to });
         }
       }
     );
   };
+  const handleSelect = (newParent) => handleMove(newParent.criteria.uuid);
   (0, import_react16.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -1964,6 +1976,18 @@ function ChangeParentPopup({
       "Current parent: ",
       genrePlaylist.parent?.name ?? "none"
     ] }),
+    genrePlaylist.parent && (confirmingRoot ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mb-3 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { className: "mb-2", children: [
+        genrePlaylist.name,
+        " and its descendants will no longer be under ",
+        genrePlaylist.parent.name,
+        "."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(PopupButtons, { alignment: "left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui11.Button, { disabled: isPending, onClick: () => handleMove(null), children: "Confirm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui11.Button, { variant: "secondary", disabled: isPending, onClick: () => setConfirmingRoot(false), children: "Back" })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui11.Button, { variant: "secondary", onClick: () => setConfirmingRoot(true), children: "Make root" }) })),
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       GenreSearch,
       {
@@ -1977,12 +2001,12 @@ function ChangeParentPopup({
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-var import_ui17 = require("@behindthemusictree/ui");
+var import_ui18 = require("@behindthemusictree/ui");
 var import_genre_tree27 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/artist/ArtistActionBand.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_ui11 = require("@behindthemusictree/ui");
+var import_ui12 = require("@behindthemusictree/ui");
 var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
 var import_player7 = require("@behindthemusictree/app-kit/player");
 var import_jsx_runtime33 = require("react/jsx-runtime");
@@ -2001,9 +2025,9 @@ function ArtistActionBand({ artist, share }) {
       console.error("Failed to load artist tracks:", error);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui11.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_ui11.ActionBand, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui12.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_ui12.ActionBand, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_ui11.ActionButton,
+      import_ui12.ActionButton,
       {
         icon: playing ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react10.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react10.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
         label: playing ? "Pause" : "Play",
@@ -2018,12 +2042,12 @@ function ArtistActionBand({ artist, share }) {
 }
 
 // src/genre-tree/artist/ArtistHeader.tsx
-var import_ui13 = require("@behindthemusictree/ui");
+var import_ui14 = require("@behindthemusictree/ui");
 
 // src/genre-tree/artist/ArtistLinks.tsx
 var import_lucide_react11 = require("lucide-react");
 var import_si3 = require("react-icons/si");
-var import_ui12 = require("@behindthemusictree/ui");
+var import_ui13 = require("@behindthemusictree/ui");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var LINK_KINDS = {
   official: { label: "Official website", Icon: import_lucide_react11.Globe },
@@ -2061,7 +2085,7 @@ function artistLinks(artist) {
   return links;
 }
 function ArtistLinks({ links }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui12.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui13.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
 }
 
 // src/genre-tree/artist/formatYears.ts
@@ -2110,7 +2134,7 @@ function ArtistHeader({
   const links = artistLinks(artist);
   if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArtistLinks, { links }) });
   if (fields.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui13.FieldList, { items: fields });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui14.FieldList, { items: fields });
 }
 
 // src/genre-tree/artist/ArtistPhoto.tsx
@@ -2120,11 +2144,11 @@ function ArtistPhoto({ image, name }) {
 }
 
 // src/genre-tree/artist/ArtistMembers.tsx
-var import_ui14 = require("@behindthemusictree/ui");
+var import_ui15 = require("@behindthemusictree/ui");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function MembershipList({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { children: memberships.map((membership, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui15.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { children: memberships.map((membership, index) => {
     const details = [
       formatYears(membership.beginYear, membership.endYear, membership.ended),
       ...membership.roles
@@ -2145,7 +2169,7 @@ function MembershipList({ title, memberships, renderArtistLink }) {
 function ArtistMembers({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
   const isCurrent = (membership) => !membership.ended && membership.endYear === null;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_ui14.PanelSection, { title, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_ui15.PanelSection, { title, children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       MembershipList,
@@ -2159,7 +2183,7 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
 }
 
 // src/genre-tree/artist/ArtistDiscography.tsx
-var import_ui15 = require("@behindthemusictree/ui");
+var import_ui16 = require("@behindthemusictree/ui");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var GROUPS = ["Albums", "EPs", "Singles", "Live", "Compilations", "Other"];
 var PRIMARY_GROUPS = { album: "Albums", ep: "EPs", single: "Singles" };
@@ -2180,10 +2204,10 @@ function byYear(a, b) {
 function ArtistDiscography({ albums }) {
   if (albums.length === 0) return null;
   const sorted = [...albums].sort(byYear);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui15.PanelSection, { title: "Discography", children: GROUPS.map((group) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui16.PanelSection, { title: "Discography", children: GROUPS.map((group) => {
     const groupAlbums = sorted.filter((album) => discographyGroup(album) === group);
     if (groupAlbums.length === 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui15.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui16.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
     ] }, album.uuid)) }) }, group);
@@ -2193,7 +2217,7 @@ function ArtistDiscography({ albums }) {
 // src/genre-tree/artist/ArtistSongs.tsx
 var import_react17 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
-var import_ui16 = require("@behindthemusictree/ui");
+var import_ui17 = require("@behindthemusictree/ui");
 var import_player11 = require("@behindthemusictree/app-kit/player");
 var import_genre_tree26 = require("@behindthemusictree/app-kit/genre-tree");
 var import_transport6 = require("@behindthemusictree/app-kit/transport");
@@ -2356,7 +2380,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
     event.stopPropagation();
     void play(song.uuid);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui16.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui16.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui17.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui17.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-wrap items-center justify-end gap-2 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-caption", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "button",
       {
@@ -2380,7 +2404,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         renderSongLink
       }
     ) }, song.uuid)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui16.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui17.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
   ] }) });
 }
 
@@ -2408,12 +2432,12 @@ function useArtistPanel({
         ...panel,
         title: "Artist",
         content: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui17.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui17.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui17.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui17.Skeleton, { className: "h-4 w-24" }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui17.Skeleton, { className: "h-16 mt-2.5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui17.Skeleton, { className: "h-16" })
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui18.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui18.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui18.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui18.Skeleton, { className: "h-4 w-24" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui18.Skeleton, { className: "h-16 mt-2.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui18.Skeleton, { className: "h-16" })
         ] })
       };
     case "not-found":
@@ -2464,13 +2488,13 @@ function useArtistPanel({
 }
 
 // src/genre-tree/song/useSongPanel.tsx
-var import_ui19 = require("@behindthemusictree/ui");
+var import_ui20 = require("@behindthemusictree/ui");
 var import_genre_tree29 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/song/SongPanelContent.tsx
 var import_react18 = require("react");
 var import_lucide_react12 = require("lucide-react");
-var import_ui18 = require("@behindthemusictree/ui");
+var import_ui19 = require("@behindthemusictree/ui");
 var import_player12 = require("@behindthemusictree/app-kit/player");
 var import_genre_tree28 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime43 = require("react/jsx-runtime");
@@ -2481,7 +2505,7 @@ function SongHistory({ uuid, getBackendBaseUrl }) {
   const [open, setOpen] = (0, import_react18.useState)(false);
   const history = (0, import_genre_tree28.useSongHistory)(uuid, getBackendBaseUrl, open);
   let body = null;
-  if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui18.Skeleton, { className: "h-10", "aria-busy": "true" });
+  if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui19.Skeleton, { className: "h-10", "aria-busy": "true" });
   else if (history.status === "error") body = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "text-red-600", children: "Could not load the history." });
   else if (history.status === "success")
     body = history.entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("li", { className: "py-1.5 text-body", children: [
@@ -2499,8 +2523,8 @@ function SongHistory({ uuid, getBackendBaseUrl }) {
         dateFormat.format(new Date(entry.createdOn))
       ] })
     ] }, entry.uuid)) });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui18.PanelBleed, { padded: true, className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("details", { onToggle: (event) => setOpen(event.currentTarget.open), className: "pb-2.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("summary", { className: `mt-2.5 cursor-pointer ${import_ui18.PANEL_LABEL_CLASS}`, children: "History" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui19.PanelBleed, { padded: true, className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("details", { onToggle: (event) => setOpen(event.currentTarget.open), className: "pb-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("summary", { className: `mt-2.5 cursor-pointer ${import_ui19.PANEL_LABEL_CLASS}`, children: "History" }),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mt-1.5", children: body })
   ] }) });
 }
@@ -2558,9 +2582,9 @@ function SongPanelContent(props) {
       value: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "flex gap-3", children: links })
     });
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui18.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_ui18.ActionBand, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui19.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_ui19.ActionBand, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        import_ui18.ActionButton,
+        import_ui19.ActionButton,
         {
           icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
           label: isPlaying ? "Pause" : "Play",
@@ -2572,8 +2596,8 @@ function SongPanelContent(props) {
       shareUrl && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
     ] }) }),
     song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_genre_tree28.ArtistNames, { artists: song.artists, renderArtistLink }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui18.FieldList, { items: fields }),
-    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui18.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui19.FieldList, { items: fields }),
+    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui19.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
   ] });
 }
@@ -2601,10 +2625,10 @@ function useSongPanel({
         ...panel,
         title: "Song",
         content: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui19.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui19.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui19.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui19.Skeleton, { className: "h-4 w-24" })
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui20.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui20.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui20.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui20.Skeleton, { className: "h-4 w-24" })
         ] })
       };
     case "not-found":
@@ -2679,14 +2703,14 @@ function useEntityPanel({
 
 // src/genre-tree/SizeMetricToggle.tsx
 var import_md = require("react-icons/md");
-var import_ui20 = require("@behindthemusictree/ui");
+var import_ui21 = require("@behindthemusictree/ui");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function SizeMetricToggle({
   value,
   onChange
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    import_ui20.SegmentedControl,
+    import_ui21.SegmentedControl,
     {
       variant: "floating",
       "aria-label": "Size nodes by",
@@ -2929,7 +2953,7 @@ function GenreTreeView({
     []
   );
   const panelRef = (0, import_react19.useRef)(null);
-  const obscuredInset = (0, import_ui21.useObscuredInset)(panelRef);
+  const obscuredInset = (0, import_ui22.useObscuredInset)(panelRef);
   const hostPanel = { obscuredInset, onNodeStyleResolverChange: handleNodeStyleResolverChange };
   const nodeMetric = isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric;
   const treeNodes = (0, import_react19.useMemo)(() => toTreeNodes(visibleGenrePlaylists, nodeMetric, focusUuids), [visibleGenrePlaylists, nodeMetric, focusUuids]);
@@ -3058,7 +3082,7 @@ function GenreTreeView({
     center: activePanel.expanded ? null : isCollapsed ? { label: "Show panel", onClick: () => changeCollapsed(false) } : activePanel.onExpandedChange ? { label: "Extend panel", onClick: () => activePanel.onExpandedChange?.(true) } : null
   } : void 0;
   const expandButton = placement === "default" && activePanel?.onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-    import_ui21.IconButton,
+    import_ui22.IconButton,
     {
       "aria-label": activePanel.expanded ? "Shrink panel" : "Extend panel",
       style: activePanel.headerAccent && { color: "inherit" },
@@ -3130,7 +3154,7 @@ function GenreTreeView({
     !isLoading && !isError && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
     /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "contents max-md:flex max-md:w-full max-md:items-center max-md:gap-2 max-md:overflow-x-auto max-md:[scrollbar-width:none] max-md:[&>*]:shrink-0", children: [
       !isLoading && !isError && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-        import_ui21.SegmentedControl,
+        import_ui22.SegmentedControl,
         {
           "aria-label": "Tree view mode",
           value: viewMode,
@@ -3150,7 +3174,7 @@ function GenreTreeView({
           role: "group",
           "aria-label": "Tree display options",
           children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            import_ui21.Button,
+            import_ui22.Button,
             {
               variant: allowWheelRotation ? "default" : "outline",
               size: "sm",
@@ -3161,7 +3185,7 @@ function GenreTreeView({
         }
       ),
       !isLoading && !isError && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-        import_ui21.IconTextButton,
+        import_ui22.IconTextButton,
         {
           icon: import_lucide_react13.Plus,
           text: "Add root",
@@ -3309,7 +3333,7 @@ function GenreTreeView({
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            import_ui21.DetailPanel,
+            import_ui22.DetailPanel,
             {
               ref: panelRef,
               side: "left",
@@ -3509,10 +3533,11 @@ function TrackListSidebar({
 
 // src/genre-tree/PlayerPanel.tsx
 var import_react21 = require("react");
+var import_lucide_react17 = require("lucide-react");
 var import_tailwind_merge = require("tailwind-merge");
 var import_player14 = require("@behindthemusictree/app-kit/player");
 var import_genre_tree35 = require("@behindthemusictree/app-kit/genre-tree");
-var import_ui22 = require("@behindthemusictree/ui");
+var import_ui23 = require("@behindthemusictree/ui");
 
 // src/genre-tree/PlayerControls.tsx
 var import_lucide_react16 = require("lucide-react");
@@ -3637,7 +3662,7 @@ function PlayerPanel({
   renderArtistLink,
   renderSongLink
 }) {
-  const { playerTrackObject, retryPlayback } = (0, import_player14.usePlayer)();
+  const { playerTrackObject, retryPlayback, stop } = (0, import_player14.usePlayer)();
   const { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree35.useTrackListSidebarVisibility)();
   const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = (0, import_react21.useState)("");
   const loadedTrackTitle = playerTrackObject?.track.title;
@@ -3679,7 +3704,7 @@ function PlayerPanel({
       style: isExtended ? { width: extendedWidth } : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_ui22.PanelEdgeTab,
+          import_ui23.PanelEdgeTab,
           {
             side: "right",
             edge: tabEdge,
@@ -3697,7 +3722,10 @@ function PlayerPanel({
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }),
+                  playerTrackObject && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui23.IconButton, { "aria-label": "Close player", onClick: stop, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react17.X, { "aria-hidden": "true", className: "h-4 w-4" }) })
+                ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "relative w-full shrink-0", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_player14.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
                   playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
@@ -3772,7 +3800,7 @@ function Rating({ rating, handleChange }) {
 
 // src/genre-tree/EntityDetailPanel.tsx
 var import_react22 = require("react");
-var import_ui23 = require("@behindthemusictree/ui");
+var import_ui24 = require("@behindthemusictree/ui");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function EntityDetailPanel({
   scope,
@@ -3816,7 +3844,7 @@ function EntityDetailPanel({
   });
   if (!panel) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    import_ui23.DetailPanel,
+    import_ui24.DetailPanel,
     {
       side: "left",
       title: panel.title,