@behindthemusictree/app-kit-ui 42.0.2 → 43.0.0

package/dist/genre-tree/index.d.ts

@@ -199,7 +199,7 @@ interface GenreSearchGroupsProps {
 type ParentChange = {
     genre: GenreUuid;
     from: GenreUuid | null;
-    to: GenreUuid;
+    to: GenreUuid | null;
 };
 
 /** Identifies the detail-panel entity whose current host route should be shared. */
@@ -245,7 +245,7 @@ type GenreTreeViewProps<O extends CriteriaOverview = CriteriaOverview> = {
     handleGenreCreationAction: (parent: CriteriaMinimum | null) => void;
     handleGenreRenameAction: (genre: CriteriaMinimum) => void;
     getBackendBaseUrl: () => string;
-    /** Called after the Parent popup moved a genre; `from` and `to` are genre (criteria) uuids, `from` null for a root genre. */
+    /** Called after the Parent popup moved a genre; `from` and `to` are genre (criteria) uuids, `from` null for a root genre, `to` null when the genre was made a root. */
     onParentChanged?: (change: ParentChange) => void;
     additionalActions?: (node: GenreTreeNode) => GenreTreeAction[];
     /** Controlled view mode. When provided, the internal Stacked/Wheel toggle is not rendered — the consumer owns that UI. */
@@ -466,8 +466,6 @@ interface PlayerPanelProps {
     className?: string;
     /** Hidden via CSS, never unmounted, so the video keeps playing while the host hides the panel. */
     isVisible?: boolean;
-    /** @deprecated The player no longer closes; its header action minimizes to video-only mode. */
-    onClose?: () => void;
     /** Controlled extended state; uncontrolled when omitted. */
     expanded?: boolean;
     onExpandedChange?: (expanded: boolean) => void;

package/dist/genre-tree/index.js

@@ -23,7 +23,7 @@ import {
   useGenrePlaylistPlayback,
   useGenreRemoteSearchGroup,
   useSongSearchGroup
-} from "../chunk-PVYUC2PN.js";
+} from "../chunk-UTUU463Q.js";
 import "../chunk-2GH7CSCE.js";
 export {
   EntityDetailPanel,

package/dist/index.cjs

@@ -593,7 +593,7 @@ var import_react19 = require("react");
 var import_react_query3 = require("@tanstack/react-query");
 var import_lucide_react17 = require("lucide-react");
 var import_lucide_react18 = require("lucide-react");
-var import_ui24 = require("@behindthemusictree/ui");
+var import_ui25 = 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");
@@ -2146,7 +2146,16 @@ function useGenreDetailContent({
       onSelectNode: selectGenre
     }
   );
-  const ancestors = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
+  const ancestors = /* @__PURE__ */ (0, import_jsx_runtime37.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,
@@ -2222,6 +2231,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_ui14 = require("@behindthemusictree/ui");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function ChangeParentPopup({
   genrePlaylist,
@@ -2236,20 +2246,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();
@@ -2262,6 +2274,18 @@ function ChangeParentPopup({
       "Current parent: ",
       genrePlaylist.parent?.name ?? "none"
     ] }),
+    genrePlaylist.parent && (confirmingRoot ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mb-3 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { className: "mb-2", children: [
+        genrePlaylist.name,
+        " and its descendants will no longer be under ",
+        genrePlaylist.parent.name,
+        "."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(PopupButtons, { alignment: "left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui14.Button, { disabled: isPending, onClick: () => handleMove(null), children: "Confirm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui14.Button, { variant: "secondary", disabled: isPending, onClick: () => setConfirmingRoot(false), children: "Back" })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui14.Button, { variant: "secondary", onClick: () => setConfirmingRoot(true), children: "Make root" }) })),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       GenreSearch,
       {
@@ -2275,12 +2299,12 @@ function ChangeParentPopup({
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-var import_ui20 = require("@behindthemusictree/ui");
+var import_ui21 = require("@behindthemusictree/ui");
 var import_genre_tree27 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/artist/ArtistActionBand.tsx
 var import_lucide_react14 = require("lucide-react");
-var import_ui14 = require("@behindthemusictree/ui");
+var import_ui15 = require("@behindthemusictree/ui");
 var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
 var import_player7 = require("@behindthemusictree/app-kit/player");
 var import_jsx_runtime39 = require("react/jsx-runtime");
@@ -2299,9 +2323,9 @@ function ArtistActionBand({ artist, share }) {
       console.error("Failed to load artist tracks:", error);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui14.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_ui14.ActionBand, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui15.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_ui15.ActionBand, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      import_ui14.ActionButton,
+      import_ui15.ActionButton,
       {
         icon: playing ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react14.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react14.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
         label: playing ? "Pause" : "Play",
@@ -2316,12 +2340,12 @@ function ArtistActionBand({ artist, share }) {
 }
 
 // src/genre-tree/artist/ArtistHeader.tsx
-var import_ui16 = require("@behindthemusictree/ui");
+var import_ui17 = require("@behindthemusictree/ui");
 
 // src/genre-tree/artist/ArtistLinks.tsx
 var import_lucide_react15 = require("lucide-react");
 var import_si3 = require("react-icons/si");
-var import_ui15 = require("@behindthemusictree/ui");
+var import_ui16 = require("@behindthemusictree/ui");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var LINK_KINDS = {
   official: { label: "Official website", Icon: import_lucide_react15.Globe },
@@ -2359,7 +2383,7 @@ function artistLinks(artist) {
   return links;
 }
 function ArtistLinks({ links }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui15.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui16.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
 }
 
 // src/genre-tree/artist/formatYears.ts
@@ -2408,7 +2432,7 @@ function ArtistHeader({
   const links = artistLinks(artist);
   if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArtistLinks, { links }) });
   if (fields.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui16.FieldList, { items: fields });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui17.FieldList, { items: fields });
 }
 
 // src/genre-tree/artist/ArtistPhoto.tsx
@@ -2418,11 +2442,11 @@ function ArtistPhoto({ image, name }) {
 }
 
 // src/genre-tree/artist/ArtistMembers.tsx
-var import_ui17 = require("@behindthemusictree/ui");
+var import_ui18 = require("@behindthemusictree/ui");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function MembershipList({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui17.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { children: memberships.map((membership, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui18.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { children: memberships.map((membership, index) => {
     const details = [
       formatYears(membership.beginYear, membership.endYear, membership.ended),
       ...membership.roles
@@ -2443,7 +2467,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_runtime43.jsxs)(import_ui17.PanelSection, { title, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_ui18.PanelSection, { title, children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       MembershipList,
@@ -2457,7 +2481,7 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
 }
 
 // src/genre-tree/artist/ArtistDiscography.tsx
-var import_ui18 = require("@behindthemusictree/ui");
+var import_ui19 = require("@behindthemusictree/ui");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var GROUPS = ["Albums", "EPs", "Singles", "Live", "Compilations", "Other"];
 var PRIMARY_GROUPS = { album: "Albums", ep: "EPs", single: "Singles" };
@@ -2478,10 +2502,10 @@ function byYear(a, b) {
 function ArtistDiscography({ albums }) {
   if (albums.length === 0) return null;
   const sorted = [...albums].sort(byYear);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui18.PanelSection, { title: "Discography", children: GROUPS.map((group) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui19.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_runtime44.jsx)(import_ui18.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ui19.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
     ] }, album.uuid)) }) }, group);
@@ -2491,7 +2515,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_ui19 = require("@behindthemusictree/ui");
+var import_ui20 = require("@behindthemusictree/ui");
 var import_player11 = require("@behindthemusictree/app-kit/player");
 var import_genre_tree26 = require("@behindthemusictree/app-kit/genre-tree");
 var import_transport8 = require("@behindthemusictree/app-kit/transport");
@@ -2654,7 +2678,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
     event.stopPropagation();
     void play(song.uuid);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui19.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui19.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui20.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui20.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-wrap items-center justify-end gap-2 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-caption", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "button",
       {
@@ -2678,7 +2702,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         renderSongLink
       }
     ) }, song.uuid)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui19.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui20.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
   ] }) });
 }
 
@@ -2706,12 +2730,12 @@ function useArtistPanel({
         ...panel,
         title: "Artist",
         content: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui20.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui20.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui20.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui20.Skeleton, { className: "h-4 w-24" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui20.Skeleton, { className: "h-16 mt-2.5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui20.Skeleton, { className: "h-16" })
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui21.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui21.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui21.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui21.Skeleton, { className: "h-4 w-24" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui21.Skeleton, { className: "h-16 mt-2.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui21.Skeleton, { className: "h-16" })
         ] })
       };
     case "not-found":
@@ -2762,13 +2786,13 @@ function useArtistPanel({
 }
 
 // src/genre-tree/song/useSongPanel.tsx
-var import_ui22 = require("@behindthemusictree/ui");
+var import_ui23 = 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_react16 = require("lucide-react");
-var import_ui21 = require("@behindthemusictree/ui");
+var import_ui22 = require("@behindthemusictree/ui");
 var import_player12 = require("@behindthemusictree/app-kit/player");
 var import_genre_tree28 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime49 = require("react/jsx-runtime");
@@ -2779,7 +2803,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_runtime49.jsx)(import_ui21.Skeleton, { className: "h-10", "aria-busy": "true" });
+  if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui22.Skeleton, { className: "h-10", "aria-busy": "true" });
   else if (history.status === "error") body = /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("li", { className: "py-1.5 text-body", children: [
@@ -2797,8 +2821,8 @@ function SongHistory({ uuid, getBackendBaseUrl }) {
         dateFormat.format(new Date(entry.createdOn))
       ] })
     ] }, entry.uuid)) });
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui21.PanelBleed, { padded: true, className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("details", { onToggle: (event) => setOpen(event.currentTarget.open), className: "pb-2.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("summary", { className: `mt-2.5 cursor-pointer ${import_ui21.PANEL_LABEL_CLASS}`, children: "History" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui22.PanelBleed, { padded: true, className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("details", { onToggle: (event) => setOpen(event.currentTarget.open), className: "pb-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("summary", { className: `mt-2.5 cursor-pointer ${import_ui22.PANEL_LABEL_CLASS}`, children: "History" }),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mt-1.5", children: body })
   ] }) });
 }
@@ -2856,9 +2880,9 @@ function SongPanelContent(props) {
       value: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "flex gap-3", children: links })
     });
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui21.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_ui21.ActionBand, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui22.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_ui22.ActionBand, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-        import_ui21.ActionButton,
+        import_ui22.ActionButton,
         {
           icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react16.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react16.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
           label: isPlaying ? "Pause" : "Play",
@@ -2870,8 +2894,8 @@ function SongPanelContent(props) {
       shareUrl && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
     ] }) }),
     song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_genre_tree28.ArtistNames, { artists: song.artists, renderArtistLink }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui21.FieldList, { items: fields }),
-    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui21.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui22.FieldList, { items: fields }),
+    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui22.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
   ] });
 }
@@ -2899,10 +2923,10 @@ function useSongPanel({
         ...panel,
         title: "Song",
         content: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui22.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui22.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui22.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui22.Skeleton, { className: "h-4 w-24" })
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui23.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui23.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui23.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui23.Skeleton, { className: "h-4 w-24" })
         ] })
       };
     case "not-found":
@@ -2977,14 +3001,14 @@ function useEntityPanel({
 
 // src/genre-tree/SizeMetricToggle.tsx
 var import_md2 = require("react-icons/md");
-var import_ui23 = require("@behindthemusictree/ui");
+var import_ui24 = require("@behindthemusictree/ui");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function SizeMetricToggle({
   value,
   onChange
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    import_ui23.SegmentedControl,
+    import_ui24.SegmentedControl,
     {
       variant: "floating",
       "aria-label": "Size nodes by",
@@ -3227,7 +3251,7 @@ function GenreTreeView({
     []
   );
   const panelRef = (0, import_react19.useRef)(null);
-  const obscuredInset = (0, import_ui24.useObscuredInset)(panelRef);
+  const obscuredInset = (0, import_ui25.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]);
@@ -3356,7 +3380,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_runtime52.jsx)(
-    import_ui24.IconButton,
+    import_ui25.IconButton,
     {
       "aria-label": activePanel.expanded ? "Shrink panel" : "Extend panel",
       style: activePanel.headerAccent && { color: "inherit" },
@@ -3428,7 +3452,7 @@ function GenreTreeView({
     !isLoading && !isError && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
     /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)(
-        import_ui24.SegmentedControl,
+        import_ui25.SegmentedControl,
         {
           "aria-label": "Tree view mode",
           value: viewMode,
@@ -3448,7 +3472,7 @@ function GenreTreeView({
           role: "group",
           "aria-label": "Tree display options",
           children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-            import_ui24.Button,
+            import_ui25.Button,
             {
               variant: allowWheelRotation ? "default" : "outline",
               size: "sm",
@@ -3459,7 +3483,7 @@ function GenreTreeView({
         }
       ),
       !isLoading && !isError && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-        import_ui24.IconTextButton,
+        import_ui25.IconTextButton,
         {
           icon: import_lucide_react17.Plus,
           text: "Add root",
@@ -3607,7 +3631,7 @@ function GenreTreeView({
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-            import_ui24.DetailPanel,
+            import_ui25.DetailPanel,
             {
               ref: panelRef,
               side: "left",
@@ -3807,10 +3831,11 @@ function TrackListSidebar({
 
 // src/genre-tree/PlayerPanel.tsx
 var import_react21 = require("react");
+var import_lucide_react21 = 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_ui25 = require("@behindthemusictree/ui");
+var import_ui26 = require("@behindthemusictree/ui");
 
 // src/genre-tree/PlayerControls.tsx
 var import_lucide_react20 = require("lucide-react");
@@ -3935,7 +3960,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;
@@ -3977,7 +4002,7 @@ function PlayerPanel({
       style: isExtended ? { width: extendedWidth } : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-          import_ui25.PanelEdgeTab,
+          import_ui26.PanelEdgeTab,
           {
             side: "right",
             edge: tabEdge,
@@ -3995,7 +4020,10 @@ function PlayerPanel({
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }),
+                  playerTrackObject && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_ui26.IconButton, { "aria-label": "Close player", onClick: stop, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react21.X, { "aria-hidden": "true", className: "h-4 w-4" }) })
+                ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "relative w-full shrink-0", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_player14.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
                   playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
@@ -4070,7 +4098,7 @@ function Rating({ rating, handleChange }) {
 
 // src/genre-tree/EntityDetailPanel.tsx
 var import_react22 = require("react");
-var import_ui26 = require("@behindthemusictree/ui");
+var import_ui27 = require("@behindthemusictree/ui");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function EntityDetailPanel({
   scope,
@@ -4114,7 +4142,7 @@ function EntityDetailPanel({
   });
   if (!panel) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-    import_ui26.DetailPanel,
+    import_ui27.DetailPanel,
     {
       side: "left",
       title: panel.title,