@behindthemusictree/app-kit-ui 37.0.0 → 38.0.0

package/dist/{chunk-FTYMRCJS.js → chunk-F7H5XPWU.js}

@@ -2,7 +2,7 @@ import {
   BasePopup_default,
   InternalErrorPopup,
   Toast
-} from "./chunk-DKQQLLMY.js";
+} from "./chunk-2GH7CSCE.js";
 
 // src/genre-tree/GenreTreeView.tsx
 import { useCallback as useCallback6, useDeferredValue as useDeferredValue2, useEffect as useEffect5, useMemo as useMemo8, useRef as useRef3, useState as useState9 } from "react";
@@ -545,7 +545,7 @@ function useArtistSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
             artist.disambiguation
           ] })
         ] }),
-        artist.matchedAlias && /* @__PURE__ */ jsxs2("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
+        artist.matchedAlias && /* @__PURE__ */ jsxs2("span", { className: "block truncate text-caption text-[var(--color-neutral-500)]", children: [
           "also known as ",
           artist.matchedAlias
         ] })
@@ -573,7 +573,7 @@ function useSongSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
       key: song.uuid,
       content: /* @__PURE__ */ jsxs3("span", { className: isSongSearchResultPlayable(song) ? void 0 : "opacity-60", children: [
         /* @__PURE__ */ jsx6("span", { className: "block truncate font-medium", children: song.title }),
-        /* @__PURE__ */ jsx6("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [song.artists.map((artist) => artist.name).join(", "), song.genre?.name ?? "No genre"].filter(Boolean).join(" \xB7 ") })
+        /* @__PURE__ */ jsx6("span", { className: "block truncate text-caption text-[var(--color-neutral-500)]", children: [song.artists.map((artist) => artist.name).join(", "), song.genre?.name ?? "No genre"].filter(Boolean).join(" \xB7 ") })
       ] }),
       onSelect: () => onSelect(song)
     })),
@@ -598,9 +598,9 @@ function useGenreRemoteSearchGroup(getBaseUrl, text, onSelect, { key = "genres",
       content: /* @__PURE__ */ jsxs4(Fragment2, { children: [
         /* @__PURE__ */ jsxs4("span", { className: "block truncate font-medium", children: [
           genre.name,
-          genre.isUmbrella && /* @__PURE__ */ jsx7("span", { className: "ml-2 text-xs font-normal italic text-[var(--color-text-muted)]", children: "umbrella" })
+          genre.isUmbrella && /* @__PURE__ */ jsx7("span", { className: "ml-2 text-caption font-normal italic text-[var(--color-text-muted)]", children: "umbrella" })
         ] }),
-        /* @__PURE__ */ jsx7("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: describe?.(genre) ?? `${genre.treeName} \xB7 ${genre.root.name}` })
+        /* @__PURE__ */ jsx7("span", { className: "block truncate text-caption text-[var(--color-neutral-500)]", children: describe?.(genre) ?? `${genre.treeName} \xB7 ${genre.root.name}` })
       ] }),
       onSelect: () => onSelect(genre)
     })),
@@ -641,7 +641,7 @@ function GenreSearch({
         key: genrePlaylist.uuid,
         content: /* @__PURE__ */ jsxs5(Fragment3, { children: [
           genrePlaylist.name,
-          genrePlaylist.isUmbrella && /* @__PURE__ */ jsx8("span", { className: "ml-2 text-xs italic text-[var(--color-text-muted)]", children: "umbrella" })
+          genrePlaylist.isUmbrella && /* @__PURE__ */ jsx8("span", { className: "ml-2 text-caption italic text-[var(--color-text-muted)]", children: "umbrella" })
         ] }),
         onSelect: () => select(genrePlaylist)
       }))
@@ -760,7 +760,7 @@ import { SiGmail } from "react-icons/si";
 
 // src/genre-tree/ShareDestinationButton.tsx
 import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var className = "group flex min-w-0 flex-1 flex-col items-center justify-center gap-1.5 rounded-xl px-2 py-2 text-xs text-[var(--color-text)] transition-colors hover:bg-[var(--color-surface-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50";
+var className = "group flex min-w-0 flex-1 flex-col items-center justify-center gap-1.5 rounded-xl px-2 py-2 text-caption text-[var(--color-text)] transition-colors hover:bg-[var(--color-surface-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50";
 function Contents({ icon, label }) {
   return /* @__PURE__ */ jsxs6(Fragment4, { children: [
     /* @__PURE__ */ jsx10("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: icon }),
@@ -790,9 +790,9 @@ function SharePreviewCard({ target, url }) {
   return /* @__PURE__ */ jsx11("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ jsxs7("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
     /* @__PURE__ */ jsx11("div", { className: "flex w-28 shrink-0 items-center justify-center bg-[var(--color-primary)]/15 text-[var(--color-primary)]", children: /* @__PURE__ */ jsx11(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
     /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
-      /* @__PURE__ */ jsx11("span", { className: "text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
+      /* @__PURE__ */ jsx11("span", { className: "text-caption font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
       /* @__PURE__ */ jsx11("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
-      /* @__PURE__ */ jsx11("span", { className: "truncate text-sm text-[var(--color-primary)]", title: url, children: url })
+      /* @__PURE__ */ jsx11("span", { className: "truncate text-body text-[var(--color-primary)]", title: url, children: url })
     ] })
   ] }) });
 }
@@ -933,8 +933,8 @@ function SharePopup({ target, url, onClose }) {
               }
             )
           ] }),
-          copyStatus === "failed" && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: "Could not copy the link." }),
-          shareError && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-center text-sm text-[var(--color-red-500)]", children: shareError })
+          copyStatus === "failed" && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-center text-body text-[var(--color-red-500)]", children: "Could not copy the link." }),
+          shareError && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-center text-body text-[var(--color-red-500)]", children: shareError })
         ] })
       }
     ),
@@ -954,7 +954,7 @@ function ShareActionButton({ target, url }) {
     {
       type: "button",
       onClick: openSharePopup,
-      className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none",
+      className: "group flex flex-col items-center gap-1 w-16 text-caption text-center text-[var(--color-text)] focus-visible:outline-none",
       "aria-label": `Share ${target.name}`,
       title: `Share ${target.name}`,
       children: [
@@ -1036,7 +1036,7 @@ function GenreActionBand({
       disabled: item.disabled,
       title: item.title,
       onClick: item.onClick,
-      className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none disabled:opacity-50",
+      className: "group flex flex-col items-center gap-1 w-16 text-caption text-center text-[var(--color-text)] focus-visible:outline-none disabled:opacity-50",
       children: [
         /* @__PURE__ */ jsx14("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)] group-disabled:group-hover:bg-[var(--color-surface-muted)]", children: item.icon }),
         item.label
@@ -1055,7 +1055,7 @@ function GenreActionBand({
         "aria-label": "Admin actions",
         className: `px-3.5 py-3 ${items.length > 0 ? "border-t border-[var(--color-border)]" : ""}`,
         children: [
-          /* @__PURE__ */ jsx14("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]", children: "Admin" }),
+          /* @__PURE__ */ jsx14("h3", { className: "mb-2 text-caption font-semibold uppercase tracking-wide text-[var(--color-text-muted)]", children: "Admin" }),
           /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap gap-1", children: renderItems(adminItems) })
         ]
       }
@@ -1087,7 +1087,7 @@ function ClampedText({ children, className: className2 = "" }) {
         type: "button",
         "aria-expanded": expanded,
         onClick: () => setExpanded((value) => !value),
-        className: "mt-1 text-xs text-[var(--color-text-muted)] underline hover:text-[var(--color-text)]",
+        className: "mt-1 text-caption text-[var(--color-text-muted)] underline hover:text-[var(--color-text)]",
         children: expanded ? "Show less" : "Show more"
       }
     )
@@ -1238,7 +1238,7 @@ function GenrePlaylistTracks({
       ".",
       " ",
       /* @__PURE__ */ jsx17("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
-    ] }) : tracks.length === 0 ? /* @__PURE__ */ jsx17("p", { children: "\u2014" }) : /* @__PURE__ */ jsxs12("ul", { className: "mt-1 max-h-64 overflow-y-auto text-[0.8125rem] leading-[1.45] [container-type:inline-size]", "aria-label": `${genreName} ${trackNoun.plural}`, children: [
+    ] }) : tracks.length === 0 ? /* @__PURE__ */ jsx17("p", { children: "\u2014" }) : /* @__PURE__ */ jsxs12("ul", { className: "mt-1 max-h-64 overflow-y-auto text-body [container-type:inline-size]", "aria-label": `${genreName} ${trackNoun.plural}`, children: [
       tracks.map((track, index) => {
         const label = track.artists?.length ? `${track.title} \u2014 ${track.artists.map((artist2) => artist2.name).join(", ")}` : track.title;
         const isCurrent = playerTrackObject?.track.id === track.uuid;
@@ -1336,7 +1336,7 @@ function GenreDetailExtras({
   const { summary, summarySourceUrl, essentialSongs } = overview;
   const wikidataUrl = wikidataId ? `https://www.wikidata.org/wiki/${encodeURIComponent(wikidataId)}` : null;
   return /* @__PURE__ */ jsxs13(Fragment8, { children: [
-    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ jsx18(PanelSection2, { title: "Links", children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--color-text)]", children: [
+    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ jsx18(PanelSection2, { title: "Links", children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-caption text-[var(--color-text)]", children: [
       summarySourceUrl && /* @__PURE__ */ jsxs13(
         "a",
         {
@@ -1364,10 +1364,10 @@ function GenreDetailExtras({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx18(PanelSection2, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ jsx18(ClampedText, { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
+    /* @__PURE__ */ jsx18(PanelSection2, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ jsx18(ClampedText, { className: "text-body text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
     family,
     renderGenreDetailExtras?.(overview),
-    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ jsx18(PanelSection2, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ jsx18("ul", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ jsx18("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ jsx18("p", { className: "text-[0.8125rem] leading-[1.45] text-[var(--color-text)]", children: "\u2014" }) }),
+    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ jsx18(PanelSection2, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ jsx18("ul", { className: "text-body text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ jsx18("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ jsx18("p", { className: "text-body text-[var(--color-text)]", children: "\u2014" }) }),
     /* @__PURE__ */ jsx18(
       GenrePlaylistTracks,
       {
@@ -1433,7 +1433,7 @@ function GenreInfoPanelBody({
   return /* @__PURE__ */ jsxs14(Fragment9, { children: [
     toolbar,
     genrePlaylist ? /* @__PURE__ */ jsx19(GenreNodeActionBand, { ...band, genrePlaylist, playback }) : /* @__PURE__ */ jsx19(GenreActionBand, { ...band }),
-    summary && catalogue && /* @__PURE__ */ jsxs14("div", { className: "px-3.5 py-3 text-sm text-[var(--color-text)]", children: [
+    summary && catalogue && /* @__PURE__ */ jsxs14("div", { className: "px-3.5 py-3 text-body text-[var(--color-text)]", children: [
       /* @__PURE__ */ jsxs14("p", { children: [
         "Catalogue ",
         noun.plural,
@@ -1523,7 +1523,7 @@ function useGenreDetailContent({
   if (isError) return {
     name: null,
     title: "Genre unavailable",
-    content: /* @__PURE__ */ jsx20("p", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." })
+    content: /* @__PURE__ */ jsx20("p", { role: "alert", className: "p-4 text-body text-[var(--color-text)]", children: "This genre could not be loaded." })
   };
   if (isPending || !detail || !view) return {
     name: null,
@@ -1662,7 +1662,7 @@ function ChangeParentPopup({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
   return /* @__PURE__ */ jsxs16(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
-    /* @__PURE__ */ jsxs16("p", { className: "mb-3 text-sm text-[var(--color-text-muted)]", children: [
+    /* @__PURE__ */ jsxs16("p", { className: "mb-3 text-body text-[var(--color-text-muted)]", children: [
       "Current parent: ",
       genrePlaylist.parent?.name ?? "none"
     ] }),
@@ -1674,7 +1674,7 @@ function ChangeParentPopup({
         placeholder: "Search a new parent\u2026"
       }
     ) }),
-    formErrors.length > 0 && /* @__PURE__ */ jsx21("p", { role: "alert", className: "mt-3 text-sm text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
+    formErrors.length > 0 && /* @__PURE__ */ jsx21("p", { role: "alert", className: "mt-3 text-body text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
   ] });
 }
 
@@ -1769,7 +1769,7 @@ function ExternalLink({ href, children }) {
 function ArtistPhoto({ image, name }) {
   return /* @__PURE__ */ jsxs17("figure", { className: "flex flex-col gap-1.5 px-6 py-2.5", children: [
     /* @__PURE__ */ jsx24("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
-    /* @__PURE__ */ jsxs17("figcaption", { className: "text-xs text-[var(--color-text-muted)]", children: [
+    /* @__PURE__ */ jsxs17("figcaption", { className: "text-caption text-[var(--color-text-muted)]", children: [
       "Photo: ",
       /* @__PURE__ */ jsx24(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
       ",",
@@ -1973,7 +1973,7 @@ function TrackItem({
           /* @__PURE__ */ jsx28("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ jsx28("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : isSong2(track) ? /* @__PURE__ */ jsx28(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }) }),
           track.artists && track.artists.length > 0 ? /* @__PURE__ */ jsx28("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsx28(ArtistNames2, { artists: track.artists, renderArtistLink }) }) : ""
         ] }),
-        /* @__PURE__ */ jsx28("div", { className: "genre-name-container flex items-center justify-start w-[21.6%] min-w-0 shrink-0", children: track.genre ? /* @__PURE__ */ jsx28("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-xs font-bold", children: track.genre.name }) : "" }),
+        /* @__PURE__ */ jsx28("div", { className: "genre-name-container flex items-center justify-start w-[21.6%] min-w-0 shrink-0", children: track.genre ? /* @__PURE__ */ jsx28("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-caption font-bold", children: track.genre.name }) : "" }),
         renderDuration && /* @__PURE__ */ jsx28(
           "div",
           {
@@ -2029,14 +2029,14 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         {
           type: "button",
           onClick: () => void play(),
-          className: "flex w-fit items-center gap-1.5 px-3 py-1 text-xs font-medium bg-gray-900 text-white rounded-full hover:bg-gray-700",
+          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__ */ jsx29(Play2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
             "Play all"
           ]
         }
       ),
-      /* @__PURE__ */ jsx29("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-xs", children: SORTS.map((sort) => /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx29("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-caption", children: SORTS.map((sort) => /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -2165,7 +2165,7 @@ function SongHistory({ uuid, getBackendBaseUrl }) {
   if (history.status === "loading") body = /* @__PURE__ */ jsx31(Skeleton6, { className: "h-10", "aria-busy": "true" });
   else if (history.status === "error") body = /* @__PURE__ */ jsx31("p", { className: "text-red-600", children: "Could not load the history." });
   else if (history.status === "success")
-    body = history.entries.length === 0 ? /* @__PURE__ */ jsx31("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ jsx31("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ jsxs24("li", { className: "py-1.5 text-sm", children: [
+    body = history.entries.length === 0 ? /* @__PURE__ */ jsx31("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ jsx31("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ jsxs24("li", { className: "py-1.5 text-body", children: [
       /* @__PURE__ */ jsx31("span", { className: "font-medium", children: entry.action }),
       entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ jsxs24("span", { className: "text-[var(--color-text-muted)]", children: [
         " ",
@@ -2174,7 +2174,7 @@ function SongHistory({ uuid, getBackendBaseUrl }) {
         " \u2192 ",
         entry.newValue ?? "none"
       ] }) : null,
-      /* @__PURE__ */ jsxs24("span", { className: "block text-xs text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ jsxs24("span", { className: "block text-caption text-[var(--color-text-muted)]", children: [
         entry.actorPseudo ?? "Anonymous",
         " \xB7 ",
         dateFormat.format(new Date(entry.createdOn))
@@ -2192,15 +2192,8 @@ function SongHistory({ uuid, getBackendBaseUrl }) {
     }
   );
 }
-function SongPanelContent({
-  song,
-  scope,
-  getBackendBaseUrl,
-  shareUrl,
-  renderArtistLink,
-  genrePath,
-  onSelectGenre
-}) {
+function SongPanelContent(props) {
+  const { song, scope, getBackendBaseUrl, shareUrl, renderArtistLink } = props;
   const { playNewTrackListFromTrackUuid } = useTrackList5();
   const { playerTrackObject, playState, handlePlayPauseAction } = usePlayer9();
   const unplayableReason = songUnplayableReason4(song);
@@ -2210,12 +2203,14 @@ function SongPanelContent({
   const musicBrainzUrl = musicBrainzRecordingUrl2(song);
   const fields = [];
   if (song.genre) {
-    const path = genrePath.length > 0 ? genrePath : null;
+    const path = props.genrePath && props.genrePath.length > 0 ? props.genrePath : null;
+    const { onSelectGenre } = props;
+    const genre = song.genre;
     fields.push({
       label: "Genre",
-      value: path ? /* @__PURE__ */ jsx31("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ jsxs24("span", { children: [
+      value: onSelectGenre ? /* @__PURE__ */ jsx31("button", { type: "button", onClick: () => onSelectGenre(genre), className: "hover:underline", children: genre.name }) : path ? /* @__PURE__ */ jsx31("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ jsxs24("span", { children: [
         index > 0 && /* @__PURE__ */ jsx31("span", { "aria-hidden": "true", children: "\u203A " }),
-        /* @__PURE__ */ jsx31("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
+        /* @__PURE__ */ jsx31("button", { type: "button", onClick: () => props.onSelectGenrePlaylist?.(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
       ] }, genrePlaylist.uuid)) }) : song.genre.name
     });
   } else {
@@ -2252,12 +2247,12 @@ function SongPanelContent({
     });
   return /* @__PURE__ */ jsxs24(Fragment13, { children: [
     /* @__PURE__ */ jsx31("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsxs24("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
-      unplayableReason ? /* @__PURE__ */ jsx31("p", { className: "flex items-center px-2.5 text-sm text-[var(--color-text-muted)]", children: unplayableReason }) : /* @__PURE__ */ jsxs24(
+      unplayableReason ? /* @__PURE__ */ jsx31("p", { className: "flex items-center px-2.5 text-body text-[var(--color-text-muted)]", children: unplayableReason }) : /* @__PURE__ */ jsxs24(
         "button",
         {
           type: "button",
           onClick: () => isCurrent ? handlePlayPauseAction() : playNewTrackListFromTrackUuid(song, scope),
-          className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none",
+          className: "group flex flex-col items-center gap-1 w-16 text-caption text-center text-[var(--color-text)] focus-visible:outline-none",
           children: [
             /* @__PURE__ */ jsx31("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: isPlaying ? /* @__PURE__ */ jsx31(Pause2, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ jsx31(Play3, { "aria-hidden": "true", className: "w-5 h-5" }) }),
             isPlaying ? "Pause" : "Play"
@@ -2281,11 +2276,10 @@ function useSongPanel({
   getBackendBaseUrl,
   getShareUrl,
   renderArtistLink,
-  getGenrePath,
-  onSelectGenre,
   expanded,
   onExpandedChange,
-  onClose
+  onClose,
+  ...navigation
 }) {
   const result = useSong(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
@@ -2329,8 +2323,10 @@ function useSongPanel({
             getBackendBaseUrl,
             shareUrl: shareUrl ?? void 0,
             renderArtistLink,
-            genrePath: song.genre ? getGenrePath(song.genre) : [],
-            onSelectGenre
+            ...navigation.getGenrePath ? {
+              genrePath: song.genre ? navigation.getGenrePath(song.genre) : [],
+              onSelectGenrePlaylist: navigation.onSelectGenrePlaylist
+            } : { onSelectGenre: navigation.onSelectGenre }
           }
         )
       };
@@ -2338,6 +2334,37 @@ function useSongPanel({
   }
 }
 
+// src/genre-tree/useEntityPanel.tsx
+function useEntityPanel({
+  scope,
+  getBackendBaseUrl,
+  getArtistBackendBaseUrl,
+  getShareUrl,
+  renderArtistLink,
+  renderSongLink,
+  song,
+  artist,
+  ...navigation
+}) {
+  const songPanel = useSongPanel({
+    ...song,
+    scope,
+    getBackendBaseUrl,
+    getShareUrl,
+    renderArtistLink,
+    ...navigation
+  });
+  const artistPanel = useArtistPanel({
+    ...artist,
+    scope,
+    getBackendBaseUrl: getArtistBackendBaseUrl ?? getBackendBaseUrl,
+    getShareUrl,
+    renderArtistLink,
+    renderSongLink
+  });
+  return songPanel ?? artistPanel;
+}
+
 // src/genre-tree/SizeMetricToggle.tsx
 import { MdMusicNote, MdVisibility } from "react-icons/md";
 import { SegmentedControl } from "@behindthemusictree/ui";
@@ -2520,20 +2547,6 @@ function GenreTreeView({
   const [expandedArtistUuid, setExpandedArtistUuid] = useState9(null);
   const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
   const songBaseUrl = getBackendBaseUrl;
-  const artistPanel = useArtistPanel({
-    uuid: artistUuid,
-    scope,
-    getBackendBaseUrl: artistBaseUrl,
-    getShareUrl: getShareUrlRef.current,
-    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx34("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
-    expanded: controlledArtistExpanded ?? (artistUuid !== null && expandedArtistUuid === artistUuid),
-    onExpandedChange: (on) => {
-      if (controlledArtistExpanded === void 0) setExpandedArtistUuid(on ? artistUuid : null);
-      onArtistExpandedChange?.(on);
-    },
-    renderSongLink: resolvedRenderSongLink,
-    onClose: () => changeArtist(null)
-  });
   const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx34("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
   const getGenrePath = (genre) => {
     const path = [];
@@ -2545,27 +2558,38 @@ function GenreTreeView({
     }
     return path;
   };
-  const songPanel = useSongPanel({
-    uuid: songUuid,
+  const entityPanel = useEntityPanel({
     scope,
     getBackendBaseUrl: songBaseUrl,
+    getArtistBackendBaseUrl: artistBaseUrl,
     getShareUrl: getShareUrlRef.current,
     renderArtistLink: resolvedRenderArtistLink,
+    renderSongLink: resolvedRenderSongLink,
+    song: {
+      uuid: songUuid,
+      expanded: controlledSongExpanded ?? (songUuid !== null && expandedSongUuid === songUuid),
+      onExpandedChange: (on) => {
+        if (controlledSongExpanded === void 0) setExpandedSongUuid(on ? songUuid : null);
+        onSongExpandedChange?.(on);
+      },
+      onClose: () => changeSong(null)
+    },
+    artist: {
+      uuid: artistUuid,
+      expanded: controlledArtistExpanded ?? (artistUuid !== null && expandedArtistUuid === artistUuid),
+      onExpandedChange: (on) => {
+        if (controlledArtistExpanded === void 0) setExpandedArtistUuid(on ? artistUuid : null);
+        onArtistExpandedChange?.(on);
+      },
+      onClose: () => changeArtist(null)
+    },
     getGenrePath,
-    onSelectGenre: (genrePlaylist2) => {
+    onSelectGenrePlaylist: (genrePlaylist2) => {
       changeSong(null);
       selectGenrePlaylist(genrePlaylist2);
-    },
-    expanded: controlledSongExpanded ?? (songUuid !== null && expandedSongUuid === songUuid),
-    onExpandedChange: (on) => {
-      if (controlledSongExpanded === void 0) setExpandedSongUuid(on ? songUuid : null);
-      onSongExpandedChange?.(on);
-    },
-    onClose: () => changeSong(null)
+    }
   });
-  const builtInSongPanel = overlayPanel || selectedGenreUuid !== null ? void 0 : songPanel;
-  const builtInArtistPanel = overlayPanel || selectedGenreUuid !== null || builtInSongPanel ? void 0 : artistPanel;
-  const builtInPanel = builtInSongPanel ?? builtInArtistPanel;
+  const builtInPanel = overlayPanel || selectedGenreUuid !== null ? void 0 : entityPanel;
   const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState9(false);
   const [uncontrolledExpanded, setUncontrolledExpanded] = useState9(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
@@ -2736,7 +2760,7 @@ function GenreTreeView({
   ) : null;
   const renderArtistFilter = () => {
     if (isLoading || !filterArtist) return null;
-    return /* @__PURE__ */ jsxs26("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
+    return /* @__PURE__ */ jsxs26("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-body", children: [
       /* @__PURE__ */ jsx34(
         "button",
         {
@@ -2847,14 +2871,14 @@ function GenreTreeView({
         /* @__PURE__ */ jsx34(
           "div",
           {
-            className: `actions-container absolute z-30 flex items-center gap-2 ${placement === "regions" ? "left-[calc(var(--layout-gutter)+var(--layout-panel-inset))] top-[calc(var(--layout-gutter)+var(--layout-panel-inset))] max-md:right-[calc(var(--layout-gutter)+var(--layout-panel-inset))] max-md:top-[var(--layout-band-top)] max-md:flex-col max-md:items-stretch" : "left-5 top-5"}`,
+            className: `actions-container absolute z-30 flex items-center gap-2 ${placement === "regions" ? "left-[calc(var(--layout-gutter)+var(--layout-panel-inset))] top-[calc(var(--layout-gutter)+var(--layout-panel-inset))] md:left-[var(--layout-panel-inset)] md:top-[var(--layout-panel-inset)] max-md:right-[calc(var(--layout-gutter)+var(--layout-panel-inset))] max-md:top-[var(--layout-band-top)] max-md:flex-col max-md:items-stretch" : "left-5 top-5"}`,
             children: actions
           }
         ),
         !isLoading && !isError && filterArtist && /* @__PURE__ */ jsx34(
           "div",
           {
-            className: `absolute left-1/2 z-30 hidden -translate-x-1/2 md:block ${placement === "regions" ? "top-[calc(var(--layout-gutter)+var(--layout-panel-inset))]" : "top-5"}`,
+            className: `absolute left-1/2 z-30 hidden -translate-x-1/2 md:block ${placement === "regions" ? "top-[calc(var(--layout-gutter)+var(--layout-panel-inset))] md:top-[var(--layout-panel-inset)]" : "top-5"}`,
             children: renderArtistFilter()
           }
         ),
@@ -3129,7 +3153,7 @@ function TrackListSidebar({
               /* @__PURE__ */ jsx35("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
               /* @__PURE__ */ jsx35("div", { className: "name-container flex flex-col justify-center items-center text-[var(--color-text)] font-bold pr-2 max-w-[27.5rem]", children: /* @__PURE__ */ jsx35("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
             ] }),
-            /* @__PURE__ */ jsxs27("div", { className: "info flex items-center text-sm text-[var(--color-text-muted)]", children: [
+            /* @__PURE__ */ jsxs27("div", { className: "info flex items-center text-body text-[var(--color-text-muted)]", children: [
               trackList.origin.type === TrackListOriginType2.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === TrackListOriginType2.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
               `${trackList.total} ${trackList.total > 1 ? trackNoun.plural : trackNoun.singular}`
             ] })
@@ -3445,6 +3469,69 @@ function Rating({ rating, handleChange }) {
   ] }, i)) });
 }
 
+// src/genre-tree/EntityDetailPanel.tsx
+import { useState as useState11 } from "react";
+import { DetailPanel as DetailPanel3 } from "@behindthemusictree/ui";
+import { Fragment as Fragment15, jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+function EntityDetailPanel({
+  scope,
+  getBackendBaseUrl,
+  getArtistBackendBaseUrl,
+  getShareUrl,
+  songUuid,
+  onSongUuidChange,
+  artistUuid,
+  onArtistUuidChange,
+  renderArtistLink,
+  renderSongLink,
+  collapsed,
+  edgeTab,
+  ...navigation
+}) {
+  const [expandedSongUuid, setExpandedSongUuid] = useState11(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = useState11(null);
+  const panel = useEntityPanel({
+    scope,
+    getBackendBaseUrl,
+    getArtistBackendBaseUrl,
+    getShareUrl,
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx39("button", { type: "button", onClick: () => onArtistUuidChange(artist.uuid), className: "hover:underline", children: artist.name })),
+    renderSongLink: renderSongLink ?? ((song) => /* @__PURE__ */ jsx39("button", { type: "button", onClick: () => onSongUuidChange(song.uuid), className: "hover:underline", children: song.title })),
+    song: {
+      uuid: songUuid,
+      expanded: songUuid !== null && expandedSongUuid === songUuid,
+      onExpandedChange: (on) => setExpandedSongUuid(on ? songUuid : null),
+      onClose: () => onSongUuidChange(null)
+    },
+    artist: {
+      uuid: artistUuid,
+      expanded: artistUuid !== null && expandedArtistUuid === artistUuid,
+      onExpandedChange: (on) => setExpandedArtistUuid(on ? artistUuid : null),
+      onClose: () => onArtistUuidChange(null)
+    },
+    ...navigation
+  });
+  if (!panel) return null;
+  return /* @__PURE__ */ jsx39(
+    DetailPanel3,
+    {
+      side: "left",
+      title: panel.title,
+      titleInSearch: true,
+      onClose: panel.onClose,
+      collapsed,
+      expanded: panel.expanded,
+      onExpandedChange: panel.onExpandedChange,
+      aside: panel.extraContent,
+      edgeTab,
+      children: panel.extraContent && !panel.expanded ? /* @__PURE__ */ jsxs31(Fragment15, { children: [
+        panel.content,
+        panel.extraContent
+      ] }) : panel.content
+    }
+  );
+}
+
 export {
   useGenrePlaylistPlayback,
   GenrePlaylistTreePerRoot,
@@ -3460,13 +3547,15 @@ export {
   GenreDetailPanel,
   TrackPositionPlayPause,
   TrackItem,
+  useEntityPanel,
   GenreTreeView,
   TrackListSidebar,
   PlayerPanel,
   Rating,
+  EntityDetailPanel,
   GenreTreeSkeleton,
   GenreTreeWheelSkeleton2 as GenreTreeWheelSkeleton,
   GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
   GenreTreeOutlineSkeleton
 };
-//# sourceMappingURL=chunk-FTYMRCJS.js.map
+//# sourceMappingURL=chunk-F7H5XPWU.js.map