@behindthemusictree/app-kit-ui 42.0.2 → 43.0.0

package/dist/{chunk-PVYUC2PN.js → chunk-UTUU463Q.js}

@@ -1,15 +1,16 @@
 import {
   BasePopup_default,
   InternalErrorPopup,
+  PopupButtons,
   Toast
 } from "./chunk-2GH7CSCE.js";
 
 // src/genre-tree/GenreTreeView.tsx
-import { useCallback as useCallback6, useDeferredValue as useDeferredValue2, useEffect as useEffect6, useMemo as useMemo8, useRef as useRef3, useState as useState10 } from "react";
+import { useCallback as useCallback6, useDeferredValue as useDeferredValue2, useEffect as useEffect6, useMemo as useMemo8, useRef as useRef3, useState as useState11 } from "react";
 import { useIsMutating } from "@tanstack/react-query";
 import { Plus as Plus2 } from "lucide-react";
 import { Maximize2 as Maximize22, Minimize2 as Minimize22 } from "lucide-react";
-import { IconTextButton, IconButton as IconButton2, Button, SegmentedControl as SegmentedControl2, DetailPanel as DetailPanel2, useObscuredInset } from "@behindthemusictree/ui";
+import { IconTextButton, IconButton as IconButton2, Button as Button2, SegmentedControl as SegmentedControl2, DetailPanel as DetailPanel2, useObscuredInset } from "@behindthemusictree/ui";
 import {
   GenreTreeWheelSkeleton,
   GenreTreeViewSkeleton,
@@ -1608,7 +1609,16 @@ function useGenreDetailContent({
       onSelectNode: selectGenre
     }
   );
-  const ancestors = /* @__PURE__ */ jsx25(GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
+  const ancestors = /* @__PURE__ */ jsx25(
+    GenreNodeAncestors,
+    {
+      node: view.node,
+      fill: view.fill,
+      textColor: view.textColor,
+      ancestorNodes: view.ancestorNodes,
+      onSelectNode: selectGenre
+    }
+  );
   return {
     name: detail.name,
     title: detail.name,
@@ -1682,11 +1692,12 @@ function GenreDetailPanel({
 }
 
 // src/genre-tree/ChangeParentPopup.tsx
-import { useEffect as useEffect5, useMemo as useMemo7 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo7, useState as useState8 } from "react";
 import {
   getReparentCandidates,
   useUpdateGenre
 } from "@behindthemusictree/app-kit/genre-tree";
+import { Button } from "@behindthemusictree/ui";
 import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 function ChangeParentPopup({
   genrePlaylist,
@@ -1701,20 +1712,22 @@ function ChangeParentPopup({
     () => getReparentCandidates(genrePlaylists, genrePlaylist.uuid),
     [genrePlaylists, genrePlaylist.uuid]
   );
-  const handleSelect = (newParent) => {
+  const [confirmingRoot, setConfirmingRoot] = useState8(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);
   useEffect5(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -1727,6 +1740,18 @@ function ChangeParentPopup({
       "Current parent: ",
       genrePlaylist.parent?.name ?? "none"
     ] }),
+    genrePlaylist.parent && (confirmingRoot ? /* @__PURE__ */ jsxs17("div", { className: "mb-3 text-sm", children: [
+      /* @__PURE__ */ jsxs17("p", { className: "mb-2", children: [
+        genrePlaylist.name,
+        " and its descendants will no longer be under ",
+        genrePlaylist.parent.name,
+        "."
+      ] }),
+      /* @__PURE__ */ jsxs17(PopupButtons, { alignment: "left", children: [
+        /* @__PURE__ */ jsx26(Button, { disabled: isPending, onClick: () => handleMove(null), children: "Confirm" }),
+        /* @__PURE__ */ jsx26(Button, { variant: "secondary", disabled: isPending, onClick: () => setConfirmingRoot(false), children: "Back" })
+      ] })
+    ] }) : /* @__PURE__ */ jsx26("div", { className: "mb-3", children: /* @__PURE__ */ jsx26(Button, { variant: "secondary", onClick: () => setConfirmingRoot(true), children: "Make root" }) })),
     /* @__PURE__ */ jsx26("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ jsx26(
       GenreSearch,
       {
@@ -1965,7 +1990,7 @@ function ArtistDiscography({ albums }) {
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { keepPreviousData } from "@tanstack/react-query";
 import { Pagination, PanelSection as PanelSection5, Skeleton as Skeleton4 } from "@behindthemusictree/ui";
 import { usePlayer as usePlayer9 } from "@behindthemusictree/app-kit/player";
@@ -2109,8 +2134,8 @@ var SORTS = [
   { ordering: "-albumYear", label: "Year" }
 ];
 function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLink }) {
-  const [page, setPage] = useState8(1);
-  const [ordering, setOrdering] = useState8("title");
+  const [page, setPage] = useState9(1);
+  const [ordering, setOrdering] = useState9("title");
   const { playNewTrackListFromArtist } = useTrackList5();
   const { playerTrackObject } = usePlayer9();
   const { data, isPending, isError } = usePlaybackQuery({
@@ -2249,7 +2274,7 @@ import {
 } from "@behindthemusictree/app-kit/genre-tree";
 
 // src/genre-tree/song/SongPanelContent.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "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";
@@ -2265,7 +2290,7 @@ var numberFormat = new Intl.NumberFormat("en");
 var dateFormat = new Intl.DateTimeFormat("en", { dateStyle: "medium" });
 var externalLink = "text-[var(--color-primary)] hover:underline focus-visible:underline";
 function SongHistory({ uuid, getBackendBaseUrl }) {
-  const [open, setOpen] = useState9(false);
+  const [open, setOpen] = useState10(false);
   const history = useSongHistory(uuid, getBackendBaseUrl, open);
   let body = null;
   if (history.status === "loading") body = /* @__PURE__ */ jsx37(Skeleton6, { className: "h-10", "aria-busy": "true" });
@@ -2553,17 +2578,17 @@ function GenreTreeView({
 }) {
   const getShareUrlRef = useRef3(getShareUrl);
   getShareUrlRef.current = getShareUrl;
-  const [internalArtistUuid, setInternalArtistUuid] = useState10(null);
+  const [internalArtistUuid, setInternalArtistUuid] = useState11(null);
   const isArtistControlled = controlledArtistUuid !== void 0;
   const artistUuid = isArtistControlled ? controlledArtistUuid : internalArtistUuid;
-  const [internalSongUuid, setInternalSongUuid] = useState10(null);
+  const [internalSongUuid, setInternalSongUuid] = useState11(null);
   const isSongControlled = controlledSongUuid !== void 0;
   const songUuid = isSongControlled ? controlledSongUuid : internalSongUuid;
   const changeSong = (uuid) => {
     if (!isSongControlled) setInternalSongUuid(uuid);
     onSongUuidChange?.(uuid);
   };
-  const [internalSizeMetric, setInternalSizeMetric] = useState10("songs");
+  const [internalSizeMetric, setInternalSizeMetric] = useState11("songs");
   const sizeMetric = controlledSizeMetric ?? internalSizeMetric;
   const deferredSizeMetric = useDeferredValue2(sizeMetric);
   const changeSizeMetric = (metric) => {
@@ -2607,7 +2632,7 @@ function GenreTreeView({
     artistUuid
   });
   const restoreRevision = viewportRestore?.revision;
-  const [stackedRestoreOwner, setStackedRestoreOwner] = useState10({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
+  const [stackedRestoreOwner, setStackedRestoreOwner] = useState11({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
   let restoreRootUuid = stackedRestoreOwner.rootUuid;
   if (stackedRestoreOwner.revision !== restoreRevision) {
     restoreRootUuid = selectedGenrePlaylist?.root.uuid;
@@ -2644,8 +2669,8 @@ function GenreTreeView({
     (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ jsx40("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
     [renderSongLink]
   );
-  const [expandedSongUuid, setExpandedSongUuid] = useState10(null);
-  const [expandedArtistUuid, setExpandedArtistUuid] = useState10(null);
+  const [expandedSongUuid, setExpandedSongUuid] = useState11(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = useState11(null);
   const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
   const songBaseUrl = getBackendBaseUrl;
   const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx40("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
@@ -2692,8 +2717,8 @@ function GenreTreeView({
     }
   });
   const otherPanel = overlayPanel ?? (selectedGenreUuid !== null ? void 0 : entityPanel);
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState10(false);
-  const [uncontrolledExpanded, setUncontrolledExpanded] = useState10(false);
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState11(false);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState11(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
   const isExpanded = expanded ?? uncontrolledExpanded;
   const changeCollapsed = (next) => {
@@ -2707,10 +2732,10 @@ function GenreTreeView({
   useEffect6(() => {
     setUncontrolledCollapsed(false);
   }, [selectedGenreUuid, artistUuid, songUuid]);
-  const [isWheelRevealed, setIsWheelRevealed] = useState10(false);
+  const [isWheelRevealed, setIsWheelRevealed] = useState11(false);
   const usesHandoff = viewMode === "wheel" || viewMode === "pop-core";
   const isTreeReady = !isLoading && !isError && (!usesHandoff || isWheelRevealed);
-  const [resolveStyle, setResolveStyle] = useState10(null);
+  const [resolveStyle, setResolveStyle] = useState11(null);
   const handleNodeStyleResolverChange = useCallback6(
     (resolver) => setResolveStyle(() => resolver),
     []
@@ -2727,7 +2752,7 @@ function GenreTreeView({
   );
   const treeStyles = useMemo8(() => toGenreNodeStyles(relations, visibleGenrePlaylists), [relations, visibleGenrePlaylists]);
   const validSelectedGenreUuid = toGenreUuid(selectedGenreUuid);
-  const [selectionHistory, setSelectionHistory] = useState10({ current: validSelectedGenreUuid, previous: null });
+  const [selectionHistory, setSelectionHistory] = useState11({ current: validSelectedGenreUuid, previous: null });
   if (selectionHistory.current !== validSelectedGenreUuid) {
     setSelectionHistory({ current: validSelectedGenreUuid, previous: selectionHistory.current ?? selectionHistory.previous });
   }
@@ -2937,7 +2962,7 @@ function GenreTreeView({
           role: "group",
           "aria-label": "Tree display options",
           children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ jsx40(
-            Button,
+            Button2,
             {
               variant: allowWheelRotation ? "default" : "outline",
               size: "sm",
@@ -3300,7 +3325,8 @@ function TrackListSidebar({
 }
 
 // src/genre-tree/PlayerPanel.tsx
-import { useEffect as useEffect8, useState as useState11 } from "react";
+import { useEffect as useEffect8, useState as useState12 } from "react";
+import { X } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 import {
   usePlayer as usePlayer12,
@@ -3309,7 +3335,7 @@ import {
 import {
   useTrackListSidebarVisibility
 } from "@behindthemusictree/app-kit/genre-tree";
-import { PanelEdgeTab } from "@behindthemusictree/ui";
+import { IconButton as IconButton3, PanelEdgeTab } from "@behindthemusictree/ui";
 
 // src/genre-tree/PlayerControls.tsx
 import { Pause as Pause4, Play as Play4, SkipBack, SkipForward, Volume2, VolumeX } from "lucide-react";
@@ -3434,14 +3460,14 @@ function PlayerPanel({
   renderArtistLink,
   renderSongLink
 }) {
-  const { playerTrackObject, retryPlayback } = usePlayer12();
+  const { playerTrackObject, retryPlayback, stop } = usePlayer12();
   const { toggleTrackListSidebar, isTrackListSidebarVisible } = useTrackListSidebarVisibility();
-  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = useState11("");
+  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = useState12("");
   const loadedTrackTitle = playerTrackObject?.track.title;
   useEffect8(() => {
     if (loadedTrackTitle) setLastLoadedTrackTitle(loadedTrackTitle);
   }, [loadedTrackTitle]);
-  const [uncontrolledExtended, setUncontrolledExtended] = useState11(false);
+  const [uncontrolledExtended, setUncontrolledExtended] = useState12(false);
   const isExtendRequested = expanded ?? uncontrolledExtended;
   const setIsExtendRequested = (next) => {
     setUncontrolledExtended(next);
@@ -3494,7 +3520,10 @@ function PlayerPanel({
             ),
             children: [
               /* @__PURE__ */ jsxs31("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
-                /* @__PURE__ */ jsx43("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ jsx43("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
+                /* @__PURE__ */ jsxs31("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: [
+                  /* @__PURE__ */ jsx43("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }),
+                  playerTrackObject && /* @__PURE__ */ jsx43(IconButton3, { "aria-label": "Close player", onClick: stop, children: /* @__PURE__ */ jsx43(X, { "aria-hidden": "true", className: "h-4 w-4" }) })
+                ] }),
                 /* @__PURE__ */ jsxs31("div", { className: "relative w-full shrink-0", children: [
                   /* @__PURE__ */ jsx43(PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
                   playerTrackObject?.loadError && /* @__PURE__ */ jsxs31("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
@@ -3568,7 +3597,7 @@ function Rating({ rating, handleChange }) {
 }
 
 // src/genre-tree/EntityDetailPanel.tsx
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { DetailPanel as DetailPanel3 } from "@behindthemusictree/ui";
 import { Fragment as Fragment17, jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
 function EntityDetailPanel({
@@ -3587,8 +3616,8 @@ function EntityDetailPanel({
   edgeTab,
   ...navigation
 }) {
-  const [expandedSongUuid, setExpandedSongUuid] = useState12(null);
-  const [expandedArtistUuid, setExpandedArtistUuid] = useState12(null);
+  const [expandedSongUuid, setExpandedSongUuid] = useState13(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = useState13(null);
   const panel = useEntityPanel({
     scope,
     getBackendBaseUrl,
@@ -3658,4 +3687,4 @@ export {
   GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
   GenreTreeOutlineSkeleton
 };
-//# sourceMappingURL=chunk-PVYUC2PN.js.map
+//# sourceMappingURL=chunk-UTUU463Q.js.map