@behindthemusictree/app-kit-ui 41.0.0 → 42.0.0

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

@@ -3,7 +3,7 @@ import { ReactNode, ComponentType, ComponentProps } from 'react';
 import { z } from 'zod';
 import { GenreTreeProps, FocusChangeReason, GenreTreeNode, GenreTreeAction, GenreTreeViewMode, GenreTreeViewport, WheelZoomMode } from '@behindthemusictree/genre-tree-view';
 export { FocusChangeReason, GenreTreeAction, GenreTreeOutlineSkeleton, GenreTreeSkeleton, GenreTreeViewMode, GenreTreeViewSkeleton, GenreTreeViewSkeletonProps, GenreTreeViewport, GenreTreeWheelSkeleton } from '@behindthemusictree/genre-tree-view';
-import { TrackBase, CriteriaOverview, GenreUuid, CriteriaPlaylistMinimum, GenreMusicSelection, RenderArtistLink, RenderSongLink, CriteriaPlaylistSimple, ArtistSearchResult, SongSearchResult, UseGenreRemoteSearchOptions, GenreSearchResult, CriteriaMinimum, GenreCatalogueCounts, GenrePlaylistSummary } from '@behindthemusictree/app-kit/genre-tree';
+import { TrackBase, CriteriaOverview, GenreUuid, CriteriaPlaylistMinimum, GenreMusicSelection, RenderArtistLink, RenderSongLink, CriteriaPlaylistSimple, ArtistSearchResult, SongSearchResult, UseGenreRemoteSearchOptions, GenreSearchResult, CriteriaMinimum, RenderPlaceLink, GenreCatalogueCounts, GenrePlaylistSummary } from '@behindthemusictree/app-kit/genre-tree';
 import { Scope } from '@behindthemusictree/app-kit/transport';
 import { DetailPanel } from '@behindthemusictree/ui';
 
@@ -321,6 +321,8 @@ type GenreTreeViewProps<O extends CriteriaOverview = CriteriaOverview> = {
     /** When set, song titles in the info panel's track list render through it (e.g. a router `Link` to the song).
      * By default they are buttons that open the song panel. */
     renderSongLink?: RenderSongLink;
+    /** When set, the artist panel renders the artist's origin through it (e.g. a router `Link` to the map region). */
+    renderPlaceLink?: RenderPlaceLink;
     /** Resolves a selected genre, artist or song to a share URL using the host app's routes. */
     getShareUrl?: GetGenreTreeShareUrl;
 } & ArtistSearchProps & GenreDetailSlots<O> & GenrePlaylistTracksSlots & GenreFocusProps & {
@@ -336,7 +338,7 @@ type GenreTreeViewProps<O extends CriteriaOverview = CriteriaOverview> = {
     collapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
 };
-declare function GenreTreeView<O extends CriteriaOverview = CriteriaOverview>({ scope, handleGenreCreationAction, handleGenreRenameAction, onParentChanged, getBackendBaseUrl, additionalActions, viewMode: controlledViewMode, selectedGenreUuid: controlledSelectedGenreUuid, onSelectedGenreUuidChange, defaultViewport, viewportRestore, onViewportChange, readOnly, className, showDisplayOptions, showAddRoot, allowWheelRotation: controlledAllowWheelRotation, criteriaOverviewSchema, renderGenreDetailExtras, floatingControlsLeading, sizeMetric: controlledSizeMetric, onSizeMetricChange, renderArtistLink, artistUuid: controlledArtistUuid, onArtistUuidChange, artistExpanded: controlledArtistExpanded, onArtistExpandedChange, getShareUrl, extraSearchGroups, SearchGroups, onSearchQueryChange, onSearchFocus, artistSearch, onArtistSelect, artistSearchBaseUrl, songUuid: controlledSongUuid, onSongUuidChange, songExpanded: controlledSongExpanded, onSongExpandedChange, songSearch, onSongSelect, renderSongLink, renderSummary, renderEssentialTracks, renderSongLeading, renderSongActions, renderTracksToolbar, renderDangerZone, expanded, onExpandedChange, collapsed, onCollapsedChange, overlayPanel, placement, ...focus }: GenreTreeViewProps<O>): react.JSX.Element;
+declare function GenreTreeView<O extends CriteriaOverview = CriteriaOverview>({ scope, handleGenreCreationAction, handleGenreRenameAction, onParentChanged, getBackendBaseUrl, additionalActions, viewMode: controlledViewMode, selectedGenreUuid: controlledSelectedGenreUuid, onSelectedGenreUuidChange, defaultViewport, viewportRestore, onViewportChange, readOnly, className, showDisplayOptions, showAddRoot, allowWheelRotation: controlledAllowWheelRotation, criteriaOverviewSchema, renderGenreDetailExtras, floatingControlsLeading, sizeMetric: controlledSizeMetric, onSizeMetricChange, renderArtistLink, artistUuid: controlledArtistUuid, onArtistUuidChange, artistExpanded: controlledArtistExpanded, onArtistExpandedChange, getShareUrl, extraSearchGroups, SearchGroups, onSearchQueryChange, onSearchFocus, artistSearch, onArtistSelect, artistSearchBaseUrl, songUuid: controlledSongUuid, onSongUuidChange, songExpanded: controlledSongExpanded, onSongExpandedChange, songSearch, onSongSelect, renderSongLink, renderPlaceLink, renderSummary, renderEssentialTracks, renderSongLeading, renderSongActions, renderTracksToolbar, renderDangerZone, expanded, onExpandedChange, collapsed, onCollapsedChange, overlayPanel, placement, ...focus }: GenreTreeViewProps<O>): react.JSX.Element;
 
 type GenreActionBandProps = {
     node: GenreTreeNode;
@@ -529,11 +531,12 @@ type EntityPanelOptions = {
     getShareUrl?: GetGenreTreeShareUrl;
     renderArtistLink: RenderArtistLink;
     renderSongLink: RenderSongLink;
+    renderPlaceLink?: RenderPlaceLink;
     song: EntityPanelState;
     artist: EntityPanelState;
 } & SongGenreNavigation;
 /** The song or artist detail overlay panel; a song takes precedence over an artist, undefined when neither is set. */
-declare function useEntityPanel({ scope, getBackendBaseUrl, getArtistBackendBaseUrl, getShareUrl, renderArtistLink, renderSongLink, song, artist, ...navigation }: EntityPanelOptions): OverlayPanel | undefined;
+declare function useEntityPanel({ scope, getBackendBaseUrl, getArtistBackendBaseUrl, getShareUrl, renderArtistLink, renderSongLink, renderPlaceLink, song, artist, ...navigation }: EntityPanelOptions): OverlayPanel | undefined;
 
 type EntityDetailPanelProps = {
     scope: Scope;
@@ -548,11 +551,12 @@ type EntityDetailPanelProps = {
     renderArtistLink?: RenderArtistLink;
     /** Titles render as buttons that open the song by default. */
     renderSongLink?: RenderSongLink;
+    renderPlaceLink?: RenderPlaceLink;
     collapsed?: boolean;
     edgeTab?: ComponentProps<typeof DetailPanel>["edgeTab"];
 } & SongGenreNavigation;
 /** The song or artist detail in the shared left DetailPanel, for a host that has no genre tree. Renders nothing
  * while neither is set; a song takes precedence over an artist. */
-declare function EntityDetailPanel({ scope, getBackendBaseUrl, getArtistBackendBaseUrl, getShareUrl, songUuid, onSongUuidChange, artistUuid, onArtistUuidChange, renderArtistLink, renderSongLink, collapsed, edgeTab, ...navigation }: EntityDetailPanelProps): react.JSX.Element | null;
+declare function EntityDetailPanel({ scope, getBackendBaseUrl, getArtistBackendBaseUrl, getShareUrl, songUuid, onSongUuidChange, artistUuid, onArtistUuidChange, renderArtistLink, renderSongLink, renderPlaceLink, collapsed, edgeTab, ...navigation }: EntityDetailPanelProps): react.JSX.Element | null;
 
 export { type ArtistSearchProps, EntityDetailPanel, type EntityDetailPanelProps, type EntityPanelOptions, type EntityPanelState, GenreDetailPanel, type GenreDetailPanelProps, type GenreDetailSlots, type GenreFocusProps, GenreInfoPanelBody, type GenreInfoPanelBodyProps, GenreNodeActionBand, type GenrePlaylistPlayback, type GenrePlaylistTracksSlots, GenrePlaylistTreePerRoot, type GenrePlaylistTreePerRootProps, GenreSearch, type GenreSearchExtraGroup, type GenreSearchGroupsProps, type GenreSearchProps, type GenreTreeShareTarget, GenreTreeView, type GenreTreeViewProps, type GetGenreTreeShareUrl, type ParentChange, type PlayableGenrePlaylist, PlayerPanel, type PlayerPanelProps, Rating, type RatingProps, SEARCH_FAILED_STATUS, SearchBox, type SearchBoxProps, type SearchGroup, type SearchGroupItem, type SongGenreNavigation, TrackItem, type TrackItemProps, TrackListSidebar, type TrackListSidebarProps, TrackPositionPlayPause, type TrackPositionPlayPauseProps, type UseGenrePlaylistPlaybackOptions, type UseGenreRemoteSearchGroupOptions, searchStatus, useArtistSearchGroup, useEntityPanel, useGenrePlaylistPlayback, useGenreRemoteSearchGroup, useSongSearchGroup };

package/dist/genre-tree/index.js

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

package/dist/index.cjs

@@ -2372,11 +2372,37 @@ function formatYears(beginYear, endYear, ended) {
 // src/genre-tree/artist/ArtistHeader.tsx
 var import_jsx_runtime41 = require("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__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { 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__ */ (0, import_jsx_runtime41.jsx)(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);
@@ -2665,6 +2691,7 @@ function useArtistPanel({
   getShareUrl,
   renderArtistLink,
   renderSongLink,
+  renderPlaceLink,
   expanded,
   onExpandedChange,
   onClose
@@ -2715,7 +2742,7 @@ function useArtistPanel({
             }
           ),
           artist.image && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ArtistPhoto, { image: artist.image, name: artist.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ArtistHeader, { artist }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ArtistHeader, { artist, renderPlaceLink }),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
           artist.tracksCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -2923,6 +2950,7 @@ function useEntityPanel({
   getShareUrl,
   renderArtistLink,
   renderSongLink,
+  renderPlaceLink,
   song,
   artist,
   ...navigation
@@ -2941,7 +2969,8 @@ function useEntityPanel({
     getBackendBaseUrl: getArtistBackendBaseUrl ?? getBackendBaseUrl,
     getShareUrl,
     renderArtistLink,
-    renderSongLink
+    renderSongLink,
+    renderPlaceLink
   });
   return songPanel ?? artistPanel;
 }
@@ -3018,6 +3047,7 @@ function GenreTreeView({
   songSearch = true,
   onSongSelect,
   renderSongLink,
+  renderPlaceLink,
   renderSummary,
   renderEssentialTracks,
   renderSongLeading,
@@ -3147,6 +3177,7 @@ function GenreTreeView({
     getShareUrl: getShareUrlRef.current,
     renderArtistLink: resolvedRenderArtistLink,
     renderSongLink: resolvedRenderSongLink,
+    renderPlaceLink,
     song: {
       uuid: songUuid,
       expanded: controlledSongExpanded ?? (songUuid !== null && expandedSongUuid === songUuid),
@@ -4052,6 +4083,7 @@ function EntityDetailPanel({
   onArtistUuidChange,
   renderArtistLink,
   renderSongLink,
+  renderPlaceLink,
   collapsed,
   edgeTab,
   ...navigation
@@ -4063,6 +4095,7 @@ function EntityDetailPanel({
     getBackendBaseUrl,
     getArtistBackendBaseUrl,
     getShareUrl,
+    renderPlaceLink,
     renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("button", { type: "button", onClick: () => onArtistUuidChange(artist.uuid), className: "hover:underline", children: artist.name })),
     renderSongLink: renderSongLink ?? ((song) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("button", { type: "button", onClick: () => onSongUuidChange(song.uuid), className: "hover:underline", children: song.title })),
     song: {