@behindthemusictree/app-kit-ui 41.0.0 → 42.0.0

package/README.md

@@ -43,5 +43,5 @@ Third-party brand colors (Spotify, Google) stay literal.
 
 - `GenreTreeView` takes `className` on its root (no outer margin by default) and
   `showDisplayOptions` (default `true`) to hide the "Tree display options" group.
-- Render props (`renderArtistLink`, `renderSummary`, `renderTracksToolbar`, …) replace pieces of
+- Render props (`renderArtistLink`, `renderPlaceLink`, `renderSummary`, `renderTracksToolbar`, …) replace pieces of
   the genre detail panel.

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

@@ -1741,7 +1741,9 @@ function ChangeParentPopup({
 
 // src/genre-tree/artist/useArtistPanel.tsx
 import { Skeleton as Skeleton5 } from "@behindthemusictree/ui";
-import { useArtist } from "@behindthemusictree/app-kit/genre-tree";
+import {
+  useArtist
+} from "@behindthemusictree/app-kit/genre-tree";
 
 // src/genre-tree/artist/ArtistActionBand.tsx
 import { Pause as Pause2, Play as Play2 } from "lucide-react";
@@ -1844,13 +1846,39 @@ function formatYears(beginYear, endYear, ended) {
 }
 
 // src/genre-tree/artist/ArtistHeader.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var countryNames = new Intl.DisplayNames(["en"], { type: "region" });
-function ArtistHeader({ artist }) {
+function originLabel(artist, origin) {
+  if (origin.source === "area") return "From";
+  if (artist.type === "person") return "Born in";
+  if (artist.type === "group") return "Formed in";
+  return "From";
+}
+function OriginValue({
+  origin,
+  country,
+  renderPlaceLink
+}) {
+  const place = renderPlaceLink && origin.regionId !== null ? renderPlaceLink({ ...origin, regionId: origin.regionId }) : origin.name;
+  return /* @__PURE__ */ jsxs19(Fragment12, { children: [
+    place,
+    country && origin.kind !== "country" && `, ${country}`
+  ] });
+}
+function ArtistHeader({
+  artist,
+  renderPlaceLink
+}) {
   const fields = [];
   if (artist.type) fields.push({ label: "Type", value: artist.type.charAt(0).toUpperCase() + artist.type.slice(1) });
-  const country = artist.country && countryNames.of(artist.country);
-  if (country) fields.push({ label: "Country", value: country });
+  const country = artist.country ? countryNames.of(artist.country) : void 0;
+  if (artist.origin) {
+    fields.push({
+      label: originLabel(artist, artist.origin),
+      value: /* @__PURE__ */ jsx29(OriginValue, { origin: artist.origin, country, renderPlaceLink })
+    });
+  }
+  if (country && !artist.origin) fields.push({ label: "Country", value: country });
   const years = formatYears(artist.beginYear, artist.endYear, artist.ended);
   if (years) fields.push({ label: "Active", value: years });
   const links = artistLinks(artist);
@@ -1867,7 +1895,7 @@ function ArtistPhoto({ image, name }) {
 
 // src/genre-tree/artist/ArtistMembers.tsx
 import { PanelGroup, PanelSection as PanelSection3 } from "@behindthemusictree/ui";
-import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 function MembershipList({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
   return /* @__PURE__ */ jsx31(PanelGroup, { title, children: /* @__PURE__ */ jsx31("ul", { children: memberships.map((membership, index) => {
@@ -1878,9 +1906,9 @@ function MembershipList({ title, memberships, renderArtistLink }) {
     const detailsText = details.filter(Boolean).join(" \xB7 ");
     return (
       // A member can have several periods in the same group.
-      /* @__PURE__ */ jsxs19("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
+      /* @__PURE__ */ jsxs20("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
         /* @__PURE__ */ jsx31("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
-        detailsText && /* @__PURE__ */ jsxs19("span", { className: "text-[var(--color-text-muted)]", children: [
+        detailsText && /* @__PURE__ */ jsxs20("span", { className: "text-[var(--color-text-muted)]", children: [
           " \u2014 ",
           detailsText
         ] })
@@ -1891,7 +1919,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__ */ jsxs19(PanelSection3, { title, children: [
+  return /* @__PURE__ */ jsxs20(PanelSection3, { title, children: [
     /* @__PURE__ */ jsx31(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
     /* @__PURE__ */ jsx31(
       MembershipList,
@@ -1906,7 +1934,7 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
 
 // src/genre-tree/artist/ArtistDiscography.tsx
 import { PanelGroup as PanelGroup2, PanelSection as PanelSection4 } from "@behindthemusictree/ui";
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 var GROUPS = ["Albums", "EPs", "Singles", "Live", "Compilations", "Other"];
 var PRIMARY_GROUPS = { album: "Albums", ep: "EPs", single: "Singles" };
 function discographyGroup({ primaryType, secondaryTypes }) {
@@ -1929,7 +1957,7 @@ function ArtistDiscography({ albums }) {
   return /* @__PURE__ */ jsx32(PanelSection4, { title: "Discography", children: GROUPS.map((group) => {
     const groupAlbums = sorted.filter((album) => discographyGroup(album) === group);
     if (groupAlbums.length === 0) return null;
-    return /* @__PURE__ */ jsx32(PanelGroup2, { title: group, children: /* @__PURE__ */ jsx32("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ jsxs20("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
+    return /* @__PURE__ */ jsx32(PanelGroup2, { title: group, children: /* @__PURE__ */ jsx32("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ jsxs21("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
       /* @__PURE__ */ jsx32("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
       /* @__PURE__ */ jsx32("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
     ] }, album.uuid)) }) }, group);
@@ -1957,7 +1985,7 @@ import { useTrackList as useTrackList4 } from "@behindthemusictree/app-kit/genre
 import { FaPlay as FaPlay2, FaPause as FaPause2 } from "react-icons/fa";
 import { usePlayer as usePlayer7 } from "@behindthemusictree/app-kit/player";
 import { PlayStates as PlayStates2 } from "@behindthemusictree/app-kit/player";
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 function TrackPositionPlayPause({
   position,
   uuid,
@@ -1971,14 +1999,14 @@ function TrackPositionPlayPause({
   const isPlaying = isThisTrack && isConfirmedPlayable && playState === PlayStates2.PLAYING;
   const isPaused = isThisTrack && isConfirmedPlayable && playState === PlayStates2.PAUSED;
   const isCurrentTrackActive = isPlaying || isPaused;
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: "track-position-play-pause relative flex items-center justify-center gap-2 text-lg w-16 cursor-pointer",
       style: { minWidth: "4rem", maxWidth: "4rem" },
       onClick: handlePlayPauseClick,
       children: [
-        /* @__PURE__ */ jsx33("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ jsx33("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx33("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ jsx33("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ jsxs22(
           "span",
           {
             className: "track-position-play-pause__bars",
@@ -2008,7 +2036,7 @@ function TrackPositionPlayPause({
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
 import { isSong as isSong2, songUnplayableReason as songUnplayableReason2 } from "@behindthemusictree/app-kit/genre-tree";
 import { ArtistNames as ArtistNames2 } from "@behindthemusictree/app-kit/genre-tree";
-import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 function TrackItem({
   track,
   position,
@@ -2032,7 +2060,7 @@ function TrackItem({
       loadTrackForPlayer(track.uuid);
     }
   };
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: `track-item flex h-14 text-[var(--color-text)] ${isUnplayable ? "opacity-50" : "hover:bg-[var(--color-surface-muted)] group"}`,
@@ -2054,7 +2082,7 @@ function TrackItem({
             isSelected: selectedTrack?.uuid === track.uuid
           }
         ),
-        /* @__PURE__ */ jsxs22("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx34("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ jsx34("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : isSong2(track) ? /* @__PURE__ */ jsx34(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }) }),
           track.artists && track.artists.length > 0 ? /* @__PURE__ */ jsx34("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsx34(ArtistNames2, { artists: track.artists, renderArtistLink }) }) : ""
         ] }),
@@ -2074,7 +2102,7 @@ function TrackItem({
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 var SongPageSchema2 = PaginatedResponseSchema2(SongDetailedSchema2);
 var SORTS = [
   { ordering: "title", label: "Title" },
@@ -2107,7 +2135,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
     event.stopPropagation();
     void play(song.uuid);
   };
-  return /* @__PURE__ */ jsx35(PanelSection5, { title: "Songs", children: isPending ? /* @__PURE__ */ jsx35(Skeleton4, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ jsx35("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ jsx35("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ jsxs23(Fragment12, { children: [
+  return /* @__PURE__ */ jsx35(PanelSection5, { title: "Songs", children: isPending ? /* @__PURE__ */ jsx35(Skeleton4, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ jsx35("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ jsx35("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ jsxs24(Fragment13, { children: [
     /* @__PURE__ */ jsx35("div", { className: "flex flex-wrap items-center justify-end gap-2 mb-2", children: /* @__PURE__ */ jsx35("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-caption", children: SORTS.map((sort) => /* @__PURE__ */ jsx35(
       "button",
       {
@@ -2136,7 +2164,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 function useArtistPanel({
   uuid,
   scope,
@@ -2144,6 +2172,7 @@ function useArtistPanel({
   getShareUrl,
   renderArtistLink,
   renderSongLink,
+  renderPlaceLink,
   expanded,
   onExpandedChange,
   onClose
@@ -2157,7 +2186,7 @@ function useArtistPanel({
       return {
         ...panel,
         title: "Artist",
-        content: /* @__PURE__ */ jsxs24("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
+        content: /* @__PURE__ */ jsxs25("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
           /* @__PURE__ */ jsx36(Skeleton5, { className: "h-3 w-16" }),
           /* @__PURE__ */ jsx36(Skeleton5, { className: "h-4 w-32" }),
           /* @__PURE__ */ jsx36(Skeleton5, { className: "h-3 w-16" }),
@@ -2185,7 +2214,7 @@ function useArtistPanel({
       return {
         ...panel,
         title: artist.name,
-        content: /* @__PURE__ */ jsxs24(Fragment13, { children: [
+        content: /* @__PURE__ */ jsxs25(Fragment14, { children: [
           /* @__PURE__ */ jsx36(
             ArtistActionBand,
             {
@@ -2194,7 +2223,7 @@ function useArtistPanel({
             }
           ),
           artist.image && /* @__PURE__ */ jsx36(ArtistPhoto, { image: artist.image, name: artist.name }),
-          /* @__PURE__ */ jsx36(ArtistHeader, { artist }),
+          /* @__PURE__ */ jsx36(ArtistHeader, { artist, renderPlaceLink }),
           /* @__PURE__ */ jsx36(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
           /* @__PURE__ */ jsx36(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
           artist.tracksCount > 0 && /* @__PURE__ */ jsx36(
@@ -2231,7 +2260,7 @@ import {
   useSongHistory,
   useTrackList as useTrackList6
 } from "@behindthemusictree/app-kit/genre-tree";
-import { Fragment as Fragment14, jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 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";
@@ -2242,22 +2271,22 @@ function SongHistory({ uuid, getBackendBaseUrl }) {
   if (history.status === "loading") body = /* @__PURE__ */ jsx37(Skeleton6, { className: "h-10", "aria-busy": "true" });
   else if (history.status === "error") body = /* @__PURE__ */ jsx37("p", { className: "text-red-600", children: "Could not load the history." });
   else if (history.status === "success")
-    body = history.entries.length === 0 ? /* @__PURE__ */ jsx37("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ jsx37("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ jsxs25("li", { className: "py-1.5 text-body", children: [
+    body = history.entries.length === 0 ? /* @__PURE__ */ jsx37("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ jsx37("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ jsxs26("li", { className: "py-1.5 text-body", children: [
       /* @__PURE__ */ jsx37("span", { className: "font-medium", children: entry.action }),
-      entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ jsxs25("span", { className: "text-[var(--color-text-muted)]", children: [
+      entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ jsxs26("span", { className: "text-[var(--color-text-muted)]", children: [
         " ",
         "\u2014 ",
         entry.oldValue ?? "none",
         " \u2192 ",
         entry.newValue ?? "none"
       ] }) : null,
-      /* @__PURE__ */ jsxs25("span", { className: "block text-caption text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ jsxs26("span", { className: "block text-caption text-[var(--color-text-muted)]", children: [
         entry.actorPseudo ?? "Anonymous",
         " \xB7 ",
         dateFormat.format(new Date(entry.createdOn))
       ] })
     ] }, entry.uuid)) });
-  return /* @__PURE__ */ jsx37(PanelBleed3, { padded: true, className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ jsxs25("details", { onToggle: (event) => setOpen(event.currentTarget.open), className: "pb-2.5", children: [
+  return /* @__PURE__ */ jsx37(PanelBleed3, { padded: true, className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ jsxs26("details", { onToggle: (event) => setOpen(event.currentTarget.open), className: "pb-2.5", children: [
     /* @__PURE__ */ jsx37("summary", { className: `mt-2.5 cursor-pointer ${PANEL_LABEL_CLASS}`, children: "History" }),
     /* @__PURE__ */ jsx37("div", { className: "mt-1.5", children: body })
   ] }) });
@@ -2278,7 +2307,7 @@ function SongPanelContent(props) {
     const genre = song.genre;
     fields.push({
       label: "Genre",
-      value: onSelectGenre ? /* @__PURE__ */ jsx37("button", { type: "button", onClick: () => onSelectGenre(genre), className: "hover:underline", children: genre.name }) : path ? /* @__PURE__ */ jsx37("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ jsxs25("span", { children: [
+      value: onSelectGenre ? /* @__PURE__ */ jsx37("button", { type: "button", onClick: () => onSelectGenre(genre), className: "hover:underline", children: genre.name }) : path ? /* @__PURE__ */ jsx37("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ jsxs26("span", { children: [
         index > 0 && /* @__PURE__ */ jsx37("span", { "aria-hidden": "true", children: "\u203A " }),
         /* @__PURE__ */ jsx37("button", { type: "button", onClick: () => props.onSelectGenrePlaylist?.(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
       ] }, genrePlaylist.uuid)) }) : song.genre.name
@@ -2315,8 +2344,8 @@ function SongPanelContent(props) {
       label: "Links",
       value: /* @__PURE__ */ jsx37("span", { className: "flex gap-3", children: links })
     });
-  return /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx37(PanelBleed3, { children: /* @__PURE__ */ jsxs25(ActionBand3, { children: [
+  return /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx37(PanelBleed3, { children: /* @__PURE__ */ jsxs26(ActionBand3, { children: [
       /* @__PURE__ */ jsx37(
         ActionButton5,
         {
@@ -2337,7 +2366,7 @@ function SongPanelContent(props) {
 }
 
 // src/genre-tree/song/useSongPanel.tsx
-import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 function useSongPanel({
   uuid,
   scope,
@@ -2358,7 +2387,7 @@ function useSongPanel({
       return {
         ...panel,
         title: "Song",
-        content: /* @__PURE__ */ jsxs26("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
+        content: /* @__PURE__ */ jsxs27("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
           /* @__PURE__ */ jsx38(Skeleton7, { className: "h-3 w-16" }),
           /* @__PURE__ */ jsx38(Skeleton7, { className: "h-4 w-32" }),
           /* @__PURE__ */ jsx38(Skeleton7, { className: "h-3 w-16" }),
@@ -2410,6 +2439,7 @@ function useEntityPanel({
   getShareUrl,
   renderArtistLink,
   renderSongLink,
+  renderPlaceLink,
   song,
   artist,
   ...navigation
@@ -2428,7 +2458,8 @@ function useEntityPanel({
     getBackendBaseUrl: getArtistBackendBaseUrl ?? getBackendBaseUrl,
     getShareUrl,
     renderArtistLink,
-    renderSongLink
+    renderSongLink,
+    renderPlaceLink
   });
   return songPanel ?? artistPanel;
 }
@@ -2457,7 +2488,7 @@ function SizeMetricToggle({
 }
 
 // src/genre-tree/GenreTreeView.tsx
-import { Fragment as Fragment15, jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
 var NO_POP_ROOT_TITLE = "This genre tree has no 'Mainstream Pop' root yet";
 var REGIONS_CLASS = "[--gtv-center-left:var(--layout-center-left)] [--gtv-center-right:var(--layout-center-right)] [--gtv-center-top:var(--layout-band-top)]";
 var noop = () => {
@@ -2505,6 +2536,7 @@ function GenreTreeView({
   songSearch = true,
   onSongSelect,
   renderSongLink,
+  renderPlaceLink,
   renderSummary,
   renderEssentialTracks,
   renderSongLeading,
@@ -2634,6 +2666,7 @@ function GenreTreeView({
     getShareUrl: getShareUrlRef.current,
     renderArtistLink: resolvedRenderArtistLink,
     renderSongLink: resolvedRenderSongLink,
+    renderPlaceLink,
     song: {
       uuid: songUuid,
       expanded: controlledSongExpanded ?? (songUuid !== null && expandedSongUuid === songUuid),
@@ -2822,7 +2855,7 @@ function GenreTreeView({
   ) : null;
   const renderArtistFilter = () => {
     if (isLoading || !filterArtist) return null;
-    return /* @__PURE__ */ jsxs27("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-body", children: [
+    return /* @__PURE__ */ jsxs28("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-body", children: [
       /* @__PURE__ */ jsx40(
         "button",
         {
@@ -2847,7 +2880,7 @@ function GenreTreeView({
       )
     ] });
   };
-  const actions = /* @__PURE__ */ jsxs27(Fragment15, { children: [
+  const actions = /* @__PURE__ */ jsxs28(Fragment16, { children: [
     !isLoading && !isError && /* @__PURE__ */ jsx40(
       GenreTreeSearch,
       {
@@ -2882,7 +2915,7 @@ function GenreTreeView({
       }
     ),
     !isLoading && !isError && filterArtist && /* @__PURE__ */ jsx40("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
-    /* @__PURE__ */ jsxs27("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: [
+    /* @__PURE__ */ jsxs28("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__ */ jsx40(
         SegmentedControl2,
         {
@@ -2924,7 +2957,7 @@ function GenreTreeView({
       )
     ] })
   ] });
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       "data-left-panel": isPanelShown && !isCollapsed ? void 0 : "hidden",
@@ -2944,9 +2977,9 @@ function GenreTreeView({
             children: renderArtistFilter()
           }
         ),
-        /* @__PURE__ */ jsx40("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ jsxs27("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
+        /* @__PURE__ */ jsx40("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ jsxs28("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
           !isLoading && !isError && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ jsx40("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
-          isLoading ? /* @__PURE__ */ jsx40(GenreTreeViewSkeleton, { viewMode }) : isError ? /* @__PURE__ */ jsxs27("p", { role: "alert", className: "m-auto text-center", children: [
+          isLoading ? /* @__PURE__ */ jsx40(GenreTreeViewSkeleton, { viewMode }) : isError ? /* @__PURE__ */ jsxs28("p", { role: "alert", className: "m-auto text-center", children: [
             "Couldn't load the genre tree.",
             " ",
             /* @__PURE__ */ jsx40("button", { type: "button", className: "underline", onClick: refetch, children: "Retry" })
@@ -2973,7 +3006,7 @@ function GenreTreeView({
                 allowWheelRotation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
                   canSizeByViews && /* @__PURE__ */ jsx40(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
@@ -3002,7 +3035,7 @@ function GenreTreeView({
                 allowWheelRotation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
                   canSizeByViews && /* @__PURE__ */ jsx40(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
@@ -3077,7 +3110,7 @@ function GenreTreeView({
               onExpandedChange: activePanel?.onExpandedChange,
               aside: activePanel?.aside,
               edgeTab: detailTab,
-              children: activePanel?.aside && !activePanel.expanded ? /* @__PURE__ */ jsxs27(Fragment15, { children: [
+              children: activePanel?.aside && !activePanel.expanded ? /* @__PURE__ */ jsxs28(Fragment16, { children: [
                 activePanel.content,
                 activePanel.aside
               ] }) : activePanel?.content
@@ -3103,7 +3136,7 @@ import { ListMusic } from "lucide-react";
 import { useTrackList as useTrackList7 } from "@behindthemusictree/app-kit/genre-tree";
 import { TrackListOriginType as TrackListOriginType3 } from "@behindthemusictree/app-kit/genre-tree";
 import { useTrackNoun as useTrackNoun3 } from "@behindthemusictree/app-kit/track-noun";
-import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
 var useBrowserLayoutEffect = typeof window === "undefined" ? useEffect7 : useLayoutEffect2;
 function TrackListSidebar({
   className: className2 = "",
@@ -3205,20 +3238,20 @@ function TrackListSidebar({
     }
   };
   const positionClasses = layout === "inline" ? "relative w-full flex h-full flex-col" : "fixed right-0 w-[50rem] flex flex-col";
-  return trackList ? /* @__PURE__ */ jsxs28(
+  return trackList ? /* @__PURE__ */ jsxs29(
     "div",
     {
       "data-theme": "dark",
       className: `track-list-sidebar ${positionClasses} rounded-2xl bg-[var(--color-surface)] pb-1 ${className2}`,
       style: layout === "fixed" ? { top: "63.5px", maxHeight: "calc(100vh - 63.5px - 79px)" } : void 0,
       children: [
-        /* @__PURE__ */ jsxs28("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
-          /* @__PURE__ */ jsxs28("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
-            /* @__PURE__ */ jsxs28("div", { className: "origin flex text-xl", children: [
+        /* @__PURE__ */ jsxs29("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
+          /* @__PURE__ */ jsxs29("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
+            /* @__PURE__ */ jsxs29("div", { className: "origin flex text-xl", children: [
               /* @__PURE__ */ jsx41("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
               /* @__PURE__ */ jsx41("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__ */ jsx41("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
             ] }),
-            /* @__PURE__ */ jsxs28("div", { className: "info flex items-center text-body text-[var(--color-text-muted)]", children: [
+            /* @__PURE__ */ jsxs29("div", { className: "info flex items-center text-body text-[var(--color-text-muted)]", children: [
               trackList.origin.type === TrackListOriginType3.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === TrackListOriginType3.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
               `${trackList.total} ${trackList.total > 1 ? trackNoun.plural : trackNoun.singular}`
             ] })
@@ -3236,7 +3269,7 @@ function TrackListSidebar({
             }
           )
         ] }),
-        !isCollapsed && /* @__PURE__ */ jsxs28(
+        !isCollapsed && /* @__PURE__ */ jsxs29(
           "ul",
           {
             ref: trackListRef,
@@ -3282,7 +3315,7 @@ import { PanelEdgeTab } from "@behindthemusictree/ui";
 import { Pause as Pause4, Play as Play4, SkipBack, SkipForward, Volume2, VolumeX } from "lucide-react";
 import { formatTime, useTrackList as useTrackList8 } from "@behindthemusictree/app-kit/genre-tree";
 import { PlayStates as PlayStates4, useCurrentTime, usePlayer as usePlayer11 } from "@behindthemusictree/app-kit/player";
-import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
 function PlayerControls() {
   const {
     duration,
@@ -3301,13 +3334,13 @@ function PlayerControls() {
   const safeDuration = Number.isFinite(duration) && duration > 0 ? duration : 0;
   const safeCurrentTime = Number.isFinite(currentTime) ? Math.max(0, Math.min(currentTime, safeDuration)) : 0;
   const isPlaying = playState === PlayStates4.PLAYING;
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "section",
     {
       "aria-label": "Player controls",
       className: "player-controls flex shrink-0 flex-col gap-2 border-b border-zinc-800 px-3 py-2 text-zinc-200",
       children: [
-        /* @__PURE__ */ jsxs29("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
+        /* @__PURE__ */ jsxs30("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
           /* @__PURE__ */ jsx42("span", { "aria-label": "Elapsed time", children: formatTime(safeCurrentTime) }),
           /* @__PURE__ */ jsx42(
             "input",
@@ -3325,8 +3358,8 @@ function PlayerControls() {
           ),
           /* @__PURE__ */ jsx42("span", { "aria-label": "Duration", children: formatTime(safeDuration) })
         ] }),
-        /* @__PURE__ */ jsxs29("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
-          /* @__PURE__ */ jsxs29("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsxs30("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
+          /* @__PURE__ */ jsxs30("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
             /* @__PURE__ */ jsx42(
               "button",
               {
@@ -3364,7 +3397,7 @@ function PlayerControls() {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs29("label", { className: "col-start-3 flex w-[4.2rem] shrink-0 items-center gap-[0.35rem] justify-self-end text-zinc-400 sm:w-[4.9rem]", children: [
+          /* @__PURE__ */ jsxs30("label", { className: "col-start-3 flex w-[4.2rem] shrink-0 items-center gap-[0.35rem] justify-self-end text-zinc-400 sm:w-[4.9rem]", children: [
             volume === 0 ? /* @__PURE__ */ jsx42(VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ jsx42(Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
             /* @__PURE__ */ jsx42("span", { className: "sr-only", children: "Volume" }),
             /* @__PURE__ */ jsx42(
@@ -3389,7 +3422,7 @@ function PlayerControls() {
 }
 
 // src/genre-tree/PlayerPanel.tsx
-import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
 var PANEL_ID = "player-panel";
 var DEFAULT_EXTENDED_WIDTH = "calc(100vw - var(--layout-center-left) - var(--layout-gutter))";
 function PlayerPanel({
@@ -3429,7 +3462,7 @@ function PlayerPanel({
     onClick: () => setIsExtendRequested(true),
     expanded: false
   } : null;
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       id: PANEL_ID,
@@ -3452,7 +3485,7 @@ function PlayerPanel({
             className: "absolute right-full top-1/2 -translate-y-1/2"
           }
         ),
-        /* @__PURE__ */ jsxs30(
+        /* @__PURE__ */ jsxs31(
           "div",
           {
             className: twMerge(
@@ -3460,11 +3493,11 @@ function PlayerPanel({
               isExtended ? "flex-row" : "flex-col"
             ),
             children: [
-              /* @__PURE__ */ jsxs30("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", 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__ */ jsxs30("div", { className: "relative w-full shrink-0", children: [
+                /* @__PURE__ */ jsxs31("div", { className: "relative w-full shrink-0", children: [
                   /* @__PURE__ */ jsx43(PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
-                  playerTrackObject?.loadError && /* @__PURE__ */ jsxs30("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
+                  playerTrackObject?.loadError && /* @__PURE__ */ jsxs31("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
                     playerTrackObject.loadError,
                     /* @__PURE__ */ jsx43("button", { type: "button", className: "ml-2 underline", onClick: () => {
                       void retryPlayback();
@@ -3500,10 +3533,10 @@ function PlayerPanel({
 import { v4 as uuidv4 } from "uuid";
 import { AiFillStar, AiOutlineStar } from "react-icons/ai";
 import { FORM_RATING_NULL_VALUE } from "@behindthemusictree/app-kit/genre-tree";
-import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
 function Rating({ rating, handleChange }) {
   const instanceId = uuidv4();
-  return /* @__PURE__ */ jsx44("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsxs31("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
+  return /* @__PURE__ */ jsx44("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsxs32("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
     /* @__PURE__ */ jsx44(
       "input",
       {
@@ -3516,7 +3549,7 @@ function Rating({ rating, handleChange }) {
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ jsx44("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ jsxs31("div", { className: "flex", children: [
+    /* @__PURE__ */ jsx44("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ jsxs32("div", { className: "flex", children: [
       /* @__PURE__ */ jsx44(
         AiOutlineStar,
         {
@@ -3537,7 +3570,7 @@ function Rating({ rating, handleChange }) {
 // src/genre-tree/EntityDetailPanel.tsx
 import { useState as useState12 } from "react";
 import { DetailPanel as DetailPanel3 } from "@behindthemusictree/ui";
-import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
 function EntityDetailPanel({
   scope,
   getBackendBaseUrl,
@@ -3549,6 +3582,7 @@ function EntityDetailPanel({
   onArtistUuidChange,
   renderArtistLink,
   renderSongLink,
+  renderPlaceLink,
   collapsed,
   edgeTab,
   ...navigation
@@ -3560,6 +3594,7 @@ function EntityDetailPanel({
     getBackendBaseUrl,
     getArtistBackendBaseUrl,
     getShareUrl,
+    renderPlaceLink,
     renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ jsx45("button", { type: "button", onClick: () => onArtistUuidChange(artist.uuid), className: "hover:underline", children: artist.name })),
     renderSongLink: renderSongLink ?? ((song) => /* @__PURE__ */ jsx45("button", { type: "button", onClick: () => onSongUuidChange(song.uuid), className: "hover:underline", children: song.title })),
     song: {
@@ -3589,7 +3624,7 @@ function EntityDetailPanel({
       onExpandedChange: panel.onExpandedChange,
       aside: panel.extraContent,
       edgeTab,
-      children: panel.extraContent && !panel.expanded ? /* @__PURE__ */ jsxs32(Fragment16, { children: [
+      children: panel.extraContent && !panel.expanded ? /* @__PURE__ */ jsxs33(Fragment17, { children: [
         panel.content,
         panel.extraContent
       ] }) : panel.content
@@ -3623,4 +3658,4 @@ export {
   GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
   GenreTreeOutlineSkeleton
 };
-//# sourceMappingURL=chunk-GR4PCPCU.js.map
+//# sourceMappingURL=chunk-PVYUC2PN.js.map