@behindthemusictree/app-kit-ui 29.0.1 → 30.0.0

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

@@ -3,7 +3,7 @@ import { ReactNode, ComponentProps } from 'react';
 import { z } from 'zod';
 import { GenreTreeProps, FocusChangeReason, GenreTreeNode, GenreTreeAction, GenreTreeViewMode, GenreTreeViewport, InfoPanelSections, InfoPanelBody, 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, RenderArtistLink, CriteriaPlaylistSimple, GenrePlaylistUuid, ArtistSearchResult, CriteriaMinimum } from '@behindthemusictree/app-kit/genre-tree';
+import { TrackBase, CriteriaOverview, GenreUuid, CriteriaPlaylistMinimum, RenderArtistLink, RenderSongLink, CriteriaPlaylistSimple, GenrePlaylistUuid, ArtistSearchResult, CriteriaMinimum, SongSearchResult } from '@behindthemusictree/app-kit/genre-tree';
 import { Scope } from '@behindthemusictree/app-kit/transport';
 
 type GenrePlaylistTracksSlots = {
@@ -30,6 +30,7 @@ type GenreDetailExtrasProps<O extends CriteriaOverview> = GenreDetailSlots<O> &
     criteriaOverviewSchema?: z.ZodType<O, unknown>;
     renderGenreDetailExtras?: (overview: O) => ReactNode;
     renderArtistLink?: RenderArtistLink;
+    renderSongLink?: RenderSongLink;
     /** When set, the tracks list shows only this artist's songs in the genre. */
     artist?: {
         uuid: string;
@@ -99,6 +100,12 @@ type GenreTreeShareTarget = {
     uuid: string;
     name: string;
     scope: Scope;
+} | {
+    kind: "song";
+    uuid: string;
+    /** The song title. */
+    name: string;
+    scope: Scope;
 };
 /** Host applications own routing and return an absolute or relative URL for this target. */
 type GetGenreTreeShareUrl = (target: GenreTreeShareTarget) => string | null | undefined;
@@ -174,14 +181,28 @@ type GenreTreeViewProps<O extends CriteriaOverview = CriteriaOverview> = {
     /** Controlled expanded state of the artist panel. Uncontrolled, it resets to compact on each artist. */
     artistExpanded?: boolean;
     onArtistExpandedChange?: (expanded: boolean) => void;
-    /** Resolves a selected genre or artist to a share URL using the host app's routes. */
+    /** Controlled song panel (a song uuid). Like the artist panel it shares the info panel's slot: opening a song clears
+     * the selected genre and the artist; selecting a genre closes it. A host `overlayPanel` takes precedence. */
+    songUuid?: string | null;
+    /** Called when the user opens a song (search pick, title link) or closes its panel. */
+    onSongUuidChange?: (uuid: string | null) => void;
+    /** Controlled expanded state of the song panel. Uncontrolled, it resets to compact on each song. */
+    songExpanded?: boolean;
+    onSongExpandedChange?: (expanded: boolean) => void;
+    /** Songs are searched by default; picking one opens its panel. */
+    songSearch?: boolean;
+    onSongSelect?: (song: SongSearchResult) => void;
+    /** 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;
+    /** Resolves a selected genre, artist or song to a share URL using the host app's routes. */
     getShareUrl?: GetGenreTreeShareUrl;
 } & ArtistSearchProps & GenreDetailSlots<O> & GenrePlaylistTracksSlots & InfoPanelCurationProps & GenreFocusProps & {
     /** Hides the info panel behind its edge tab; uncontrolled when omitted. Only applies with `placement="regions"`. */
     collapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
 };
-declare function GenreTreeView<O extends CriteriaOverview = CriteriaOverview>({ scope, handleGenreCreationAction, handleGenreRenameAction, onParentChanged, getBackendBaseUrl, additionalActions, viewMode: controlledViewMode, selectedNodeId: controlledSelectedNodeId, onSelectedNodeIdChange, defaultViewport, viewportRestore, onViewportChange, readOnly, className, showDisplayOptions, showAddRoot, allowWheelRotation: controlledAllowWheelRotation, criteriaOverviewSchema, renderGenreDetailExtras, floatingControlsLeading, sizeMetric: controlledSizeMetric, onSizeMetricChange, renderArtistLink, artistUuid: controlledArtistUuid, onArtistUuidChange, artistExpanded: controlledArtistExpanded, onArtistExpandedChange, getShareUrl, artistSearch, onArtistSelect, artistSearchBaseUrl, 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, selectedNodeId: controlledSelectedNodeId, onSelectedNodeIdChange, defaultViewport, viewportRestore, onViewportChange, readOnly, className, showDisplayOptions, showAddRoot, allowWheelRotation: controlledAllowWheelRotation, criteriaOverviewSchema, renderGenreDetailExtras, floatingControlsLeading, sizeMetric: controlledSizeMetric, onSizeMetricChange, renderArtistLink, artistUuid: controlledArtistUuid, onArtistUuidChange, artistExpanded: controlledArtistExpanded, onArtistExpandedChange, getShareUrl, 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;
 
 type GenreActionBandProps = {
     node: GenreTreeNode;
@@ -292,8 +313,9 @@ type GenrePlaylistTreePerRootProps<T extends TrackBase> = {
 } & InfoPanelCurationProps;
 declare function GenrePlaylistTreePerRoot<T extends TrackBase>({ scope, className, rootUuid, genrePlaylistTreePerRoot, handleGenreCreationAction, handleGenreRenameAction, additionalActions, onNodeClick, onNodeHover, renderInfoPanelBody, selectedNodeId, onSelectedNodeChange, hideInfoPanelClose, hideInfoPanelTitle, readOnly, showToolbar, wheelZoom, defaultViewport, viewportRestore, onViewportChange, playback, ...infoPanelCuration }: GenrePlaylistTreePerRootProps<T>): react.JSX.Element;
 
-type GenreSearchExtraResults = {
-    /** Heading of this group; genre matches then get a "Genres" heading above it. */
+type GenreSearchExtraGroup = {
+    key: string;
+    /** Heading of this group; genre matches then get a "Genres" heading too. */
     label: string;
     items: {
         key: string;
@@ -317,10 +339,10 @@ type GenreSearchProps<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>
     placeholder?: string;
     /** Called with what the user types, and with "" on clear or pick; never when `selectedName` refills the input. */
     onQueryChange?: (query: string) => void;
-    /** A second result group (e.g. artists) the host resolves from `onQueryChange`. */
-    extraResults?: GenreSearchExtraResults;
+    /** Further result groups (artists, songs) the host resolves from `onQueryChange`. */
+    extraGroups?: GenreSearchExtraGroup[];
 };
-declare function GenreSearch<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>({ genrePlaylists, onSelect, selectedName, onClear, onPrevious, placeholder, onQueryChange, extraResults, }: GenreSearchProps<T>): react.JSX.Element;
+declare function GenreSearch<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>({ genrePlaylists, onSelect, selectedName, onClear, onPrevious, placeholder, onQueryChange, extraGroups, }: GenreSearchProps<T>): react.JSX.Element;
 
 interface TrackListSidebarProps<T extends TrackBase> {
     className?: string;
@@ -332,8 +354,10 @@ interface TrackListSidebarProps<T extends TrackBase> {
     onMinimize?: () => void;
     /** When set, artist names render through it (e.g. a router `Link`). */
     renderArtistLink?: RenderArtistLink;
+    /** When set, song titles render through it (e.g. open the song panel). */
+    renderSongLink?: RenderSongLink;
 }
-declare function TrackListSidebar<T extends TrackBase>({ className, renderDuration, renderActions, layout, isCollapsed, onExpand, onMinimize, renderArtistLink, }: TrackListSidebarProps<T>): react.JSX.Element | null;
+declare function TrackListSidebar<T extends TrackBase>({ className, renderDuration, renderActions, layout, isCollapsed, onExpand, onMinimize, renderArtistLink, renderSongLink, }: TrackListSidebarProps<T>): react.JSX.Element | null;
 
 interface PlayerPanelProps {
     className?: string;
@@ -347,8 +371,10 @@ interface PlayerPanelProps {
     /** Width once extended, e.g. to stop short of a left-hand detail panel. */
     extendedWidth?: string;
     renderArtistLink?: RenderArtistLink;
+    /** When set, song titles in the tracklist render through it (e.g. open the song panel). */
+    renderSongLink?: RenderSongLink;
 }
-declare function PlayerPanel({ className, isVisible, expanded, onExpandedChange, extendedWidth, renderArtistLink, }: PlayerPanelProps): react.JSX.Element;
+declare function PlayerPanel({ className, isVisible, expanded, onExpandedChange, extendedWidth, renderArtistLink, renderSongLink, }: PlayerPanelProps): react.JSX.Element;
 
 interface TrackItemProps<T extends TrackBase> {
     track: T;
@@ -357,8 +383,10 @@ interface TrackItemProps<T extends TrackBase> {
     renderActions?: (track: T) => ReactNode;
     /** When set, artist names render through it (e.g. a router `Link`). */
     renderArtistLink?: RenderArtistLink;
+    /** When set, a song title renders through it (e.g. opens the song panel) instead of linking to MusicBrainz. */
+    renderSongLink?: RenderSongLink;
 }
-declare function TrackItem<T extends TrackBase>({ track, position, renderDuration, renderActions, renderArtistLink, }: TrackItemProps<T>): react.JSX.Element;
+declare function TrackItem<T extends TrackBase>({ track, position, renderDuration, renderActions, renderArtistLink, renderSongLink, }: TrackItemProps<T>): react.JSX.Element;
 
 interface TrackPositionPlayPauseProps {
     position: number;
@@ -393,4 +421,4 @@ interface PanelEdgeTabProps {
 }
 declare function PanelEdgeTab({ side, edge, center, controls, className }: PanelEdgeTabProps): react.JSX.Element | null;
 
-export { type ArtistSearchProps, GenreDetailPanel, type GenreDetailPanelProps, type GenreDetailSlots, type GenreFocusProps, GenreInfoPanelBody, type GenreInfoPanelBodyProps, GenreNodeActionBand, type GenrePlaylistPlayback, type GenrePlaylistTracksSlots, GenrePlaylistTreePerRoot, type GenrePlaylistTreePerRootProps, GenreSearch, type GenreSearchExtraResults, type GenreSearchProps, type GenreTreeShareTarget, GenreTreeView, type GenreTreeViewProps, type GetGenreTreeShareUrl, type InfoPanelCurationProps, PanelEdgeTab, type PanelEdgeTabAction, type PanelEdgeTabProps, type ParentChange, type PlayableGenrePlaylist, PlayerPanel, type PlayerPanelProps, Rating, type RatingProps, TrackItem, type TrackItemProps, TrackListSidebar, type TrackListSidebarProps, TrackPositionPlayPause, type TrackPositionPlayPauseProps, type UseGenrePlaylistPlaybackOptions, useGenrePlaylistPlayback, useLeftDetailPanelLayout };
+export { type ArtistSearchProps, GenreDetailPanel, type GenreDetailPanelProps, type GenreDetailSlots, type GenreFocusProps, GenreInfoPanelBody, type GenreInfoPanelBodyProps, GenreNodeActionBand, type GenrePlaylistPlayback, type GenrePlaylistTracksSlots, GenrePlaylistTreePerRoot, type GenrePlaylistTreePerRootProps, GenreSearch, type GenreSearchExtraGroup, type GenreSearchProps, type GenreTreeShareTarget, GenreTreeView, type GenreTreeViewProps, type GetGenreTreeShareUrl, type InfoPanelCurationProps, PanelEdgeTab, type PanelEdgeTabAction, type PanelEdgeTabProps, type ParentChange, type PlayableGenrePlaylist, PlayerPanel, type PlayerPanelProps, Rating, type RatingProps, TrackItem, type TrackItemProps, TrackListSidebar, type TrackListSidebarProps, TrackPositionPlayPause, type TrackPositionPlayPauseProps, type UseGenrePlaylistPlaybackOptions, useGenrePlaylistPlayback, useLeftDetailPanelLayout };

package/dist/genre-tree/index.js

@@ -17,7 +17,7 @@ import {
   TrackPositionPlayPause,
   useGenrePlaylistPlayback,
   useLeftDetailPanelLayout
-} from "../chunk-TFLX6C5Q.js";
+} from "../chunk-2HE2HDFA.js";
 import "../chunk-DKQQLLMY.js";
 export {
   GenreDetailPanel,