@behindthemusictree/app-kit-ui 34.0.0 → 35.0.0

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

@@ -1,9 +1,9 @@
 import * as react from 'react';
-import { ReactNode, ComponentProps } from 'react';
+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, GenrePlaylistUuid, CriteriaMinimum, GenreCatalogueCounts, GenrePlaylistSummary } from '@behindthemusictree/app-kit/genre-tree';
+import { TrackBase, CriteriaOverview, GenreUuid, CriteriaPlaylistMinimum, GenreMusicSelection, RenderArtistLink, RenderSongLink, CriteriaPlaylistSimple, ArtistSearchResult, SongSearchResult, UseGenreRemoteSearchOptions, GenreSearchResult, CriteriaMinimum, GenreCatalogueCounts, GenrePlaylistSummary } from '@behindthemusictree/app-kit/genre-tree';
 import { Scope } from '@behindthemusictree/app-kit/transport';
 import { DetailPanel } from '@behindthemusictree/ui';
 
@@ -24,7 +24,8 @@ type GenreDetailSlots<O extends CriteriaOverview> = {
 };
 type GenreDetailExtrasProps<O extends CriteriaOverview> = GenreDetailSlots<O> & GenrePlaylistTracksSlots & {
     genreUuid: GenreUuid;
-    genrePlaylist: CriteriaPlaylistMinimum;
+    genrePlaylist: CriteriaPlaylistMinimum | null;
+    genreName?: string;
     selection?: GenreMusicSelection;
     wikidataId?: string | null;
     scope: Scope;
@@ -153,6 +154,34 @@ type UseGenreRemoteSearchGroupOptions = UseGenreRemoteSearchOptions & {
 /** Genres from the API's ranked `genres/search/`, rendered with the umbrella tag and the tree they live in. */
 declare function useGenreRemoteSearchGroup(getBaseUrl: () => string, text: string, onSelect: (genre: GenreSearchResult) => void, { key, label, filter, describe, ...options }?: UseGenreRemoteSearchGroupOptions): SearchGroup;
 
+/** @deprecated Use `SearchGroup`. */
+type GenreSearchExtraGroup = SearchGroup;
+type GenreSearchProps<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple> = {
+    genrePlaylists: T[];
+    onSelect: (genrePlaylist: T) => void;
+    /** Name of the currently selected genre; fills the input whenever it changes. */
+    selectedName?: string | null;
+    /** When set, renders a "Previous" button left of the text and makes room for it. */
+    onPrevious?: () => void;
+    /** Called by the clear button, after it empties the input. */
+    onClear?: () => void;
+    placeholder?: string;
+    /** Called with what the user types, and with "" on clear or pick; never when `selectedName` refills the input. */
+    onQueryChange?: (query: string) => void;
+    /** Further result groups (places, artists, songs) the host resolves from `onQueryChange`. */
+    extraGroups?: SearchGroup[];
+    /** Called when the input gains focus. */
+    onFocus?: () => void;
+};
+declare function GenreSearch<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>({ genrePlaylists, onSelect, selectedName, onClear, onPrevious, placeholder, onQueryChange, extraGroups, onFocus, }: GenreSearchProps<T>): react.JSX.Element;
+
+interface GenreSearchGroupsProps {
+    query: string;
+    focused: boolean;
+    onSelectGenre: (uuid: GenreUuid) => void;
+    children: (groups: SearchGroup[]) => ReactNode;
+}
+
 type ParentChange = {
     genre: GenreUuid;
     from: GenreUuid | null;
@@ -162,8 +191,8 @@ type ParentChange = {
 /** Identifies the detail-panel entity whose current host route should be shared. */
 type GenreTreeShareTarget = {
     kind: "genre";
-    /** Tree selection/route identity; distinct from the associated criteria UUID. */
-    genrePlaylistUuid: GenrePlaylistUuid;
+    /** Genre entity identity, independent of its playlist or renderer. */
+    genreUuid: GenreUuid;
     name: string;
     scope: Scope;
     /** Preserve an active artist filter when sharing one of its genre details. */
@@ -207,11 +236,10 @@ type GenreTreeViewProps<O extends CriteriaOverview = CriteriaOverview> = {
     additionalActions?: (node: GenreTreeNode) => GenreTreeAction[];
     /** Controlled view mode. When provided, the internal Stacked/Wheel toggle is not rendered — the consumer owns that UI. */
     viewMode?: GenreTreeViewMode;
-    /** Controlled selection (a genre playlist uuid, i.e. the tree node id). When provided, the
-     * consumer owns it — e.g. to move the selection after deleting the selected genre. */
-    selectedNodeId?: string | null;
+    /** Selected genre entity, including genres outside the rendered tree. */
+    selectedGenreUuid?: GenreUuid | null;
     /** Called on every user-driven selection change (tree click, search pick, search clear). */
-    onSelectedNodeIdChange?: (nodeId: string | null) => void;
+    onSelectedGenreUuidChange?: (genreUuid: GenreUuid | null) => void;
     /** Mount-only seed for the pan/zoom (wheel, pop-core and stacked views), replacing the initial fit. */
     defaultViewport?: GenreTreeViewport;
     /** Restore silently after layout; use a new revision for each navigation. Supply focus, selection,
@@ -225,6 +253,8 @@ type GenreTreeViewProps<O extends CriteriaOverview = CriteriaOverview> = {
     readOnly?: boolean;
     /** Further result groups (e.g. places) shown in the search box next to genres, artists and songs. */
     extraSearchGroups?: SearchGroup[];
+    /** Host search hooks run inside this subtree, so typing does not rerender the tree page. */
+    SearchGroups?: ComponentType<GenreSearchGroupsProps>;
     /** Fires with the typed search text (empty when cleared), so a host can drive its own `extraSearchGroups`. */
     onSearchQueryChange?: (text: string) => void;
     /** Fires when the search box gains focus, e.g. to load data for `extraSearchGroups` lazily. */
@@ -288,7 +318,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, 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, extraSearchGroups, 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, renderSummary, renderEssentialTracks, renderSongLeading, renderSongActions, renderTracksToolbar, renderDangerZone, expanded, onExpandedChange, collapsed, onCollapsedChange, overlayPanel, placement, ...focus }: GenreTreeViewProps<O>): react.JSX.Element;
 
 type GenreActionBandProps = {
     node: GenreTreeNode;
@@ -315,9 +345,11 @@ type GenreActionBandProps = {
 declare function GenreActionBand({ node, onPlayPause, isPlaying, onZoomIn, onAddChild, onRename, onChangeParent, side, onToggleSide, toggleSideDisabledReason, additionalActions, shareTarget, shareUrl, }: GenreActionBandProps): react.JSX.Element | null;
 
 /** What the action band reads of a genre's playlist: enough to play it and to know whether it can be. */
-type PlayableGenrePlaylist = (CriteriaPlaylistMinimum & {
+type PlayableGenrePlaylist = ((CriteriaPlaylistMinimum & {
     tracksCount: number;
-}) | GenrePlaylistSummary;
+}) | GenrePlaylistSummary) & {
+    criteria?: CriteriaMinimum | null;
+};
 type GenreNodeActionBandProps = Omit<ComponentProps<typeof GenreActionBand>, "onPlayPause" | "isPlaying"> & {
     genrePlaylist: PlayableGenrePlaylist;
     playback: GenrePlaylistPlayback;
@@ -329,18 +361,19 @@ type GenreInfoPanelBodyProps<O extends CriteriaOverview> = {
     family: ReactNode;
     genreUuid: GenreUuid;
     catalogue?: GenreCatalogueCounts;
-    genrePlaylist: PlayableGenrePlaylist;
+    countsContext?: string;
+    genrePlaylist: PlayableGenrePlaylist | null;
     wikidataId?: string | null;
     scope: Scope;
     getBackendBaseUrl: () => string;
     playback: GenrePlaylistPlayback;
     /** Action band props other than play, which the body derives from `playback`. */
     band: Omit<GenreNodeActionBandProps, "genrePlaylist" | "playback">;
-    extras?: Omit<GenreDetailExtrasProps<O>, "family" | "genreUuid" | "genrePlaylist" | "wikidataId" | "scope" | "getBackendBaseUrl">;
+    extras?: Omit<GenreDetailExtrasProps<O>, "family" | "genreUuid" | "genreName" | "genrePlaylist" | "wikidataId" | "scope" | "getBackendBaseUrl">;
 };
 /** The body of a genre's info panel: action band, then the genre's overview, family and tracks.
  * Shared by the tree's panel and the standalone GenreDetailPanel. */
-declare function GenreInfoPanelBody<O extends CriteriaOverview>({ toolbar, family, genreUuid, genrePlaylist, catalogue, wikidataId, scope, getBackendBaseUrl, playback, band, extras, }: GenreInfoPanelBodyProps<O>): react.JSX.Element;
+declare function GenreInfoPanelBody<O extends CriteriaOverview>({ toolbar, family, genreUuid, genrePlaylist, catalogue, countsContext, wikidataId, scope, getBackendBaseUrl, playback, band, extras, }: GenreInfoPanelBodyProps<O>): react.JSX.Element;
 
 type GenreDetailPanelProps<O extends CriteriaOverview> = {
     genreUuid: GenreUuid;
@@ -360,9 +393,9 @@ type GenreDetailPanelProps<O extends CriteriaOverview> = {
     /** Tab on the panel's inner edge, for hosts that hide and show the panel. */
     edgeTab?: ComponentProps<typeof DetailPanel>["edgeTab"];
     extras?: GenreInfoPanelBodyProps<O>["extras"];
+    headerClassName?: ComponentProps<typeof DetailPanel>["headerClassName"];
 };
-/** A genre's detail panel driven by one uuid, with no tree behind it. The tree's own panel shares its body. */
-declare function GenreDetailPanel<O extends CriteriaOverview>({ genreUuid, scope, getBackendBaseUrl, onClose, onSelectGenre, onZoomIn, shareUrl, shareTarget, collapsed, expanded, onExpandedChange, edgeTab, extras, }: GenreDetailPanelProps<O>): react.JSX.Element;
+declare function GenreDetailPanel<O extends CriteriaOverview>({ genreUuid, scope, getBackendBaseUrl, onClose, onSelectGenre, onZoomIn, shareUrl, shareTarget, collapsed, expanded, onExpandedChange, edgeTab, extras, headerClassName, }: GenreDetailPanelProps<O>): react.JSX.Element;
 
 type GenrePlaylistTreePerRootProps<T extends TrackBase> = {
     scope: Scope;
@@ -392,27 +425,6 @@ type GenrePlaylistTreePerRootProps<T extends TrackBase> = {
 } & HostPanelProps;
 declare function GenrePlaylistTreePerRoot<T extends TrackBase>({ scope, className, rootUuid, genrePlaylistTreePerRoot, handleGenreCreationAction, handleGenreRenameAction, additionalActions, onNodeClick, onNodeHover, selectedNodeId, onSelectedNodeChange, readOnly, wheelZoom, defaultViewport, viewportRestore, onViewportChange, playback, ...hostPanel }: GenrePlaylistTreePerRootProps<T>): react.JSX.Element;
 
-/** @deprecated Use `SearchGroup`. */
-type GenreSearchExtraGroup = SearchGroup;
-type GenreSearchProps<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple> = {
-    genrePlaylists: T[];
-    onSelect: (genrePlaylist: T) => void;
-    /** Name of the currently selected genre; fills the input whenever it changes. */
-    selectedName?: string | null;
-    /** When set, renders a "Previous" button left of the text and makes room for it. */
-    onPrevious?: () => void;
-    /** Called by the clear button, after it empties the input. */
-    onClear?: () => void;
-    placeholder?: string;
-    /** Called with what the user types, and with "" on clear or pick; never when `selectedName` refills the input. */
-    onQueryChange?: (query: string) => void;
-    /** Further result groups (places, artists, songs) the host resolves from `onQueryChange`. */
-    extraGroups?: SearchGroup[];
-    /** Called when the input gains focus. */
-    onFocus?: () => void;
-};
-declare function GenreSearch<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>({ genrePlaylists, onSelect, selectedName, onClear, onPrevious, placeholder, onQueryChange, extraGroups, onFocus, }: GenreSearchProps<T>): react.JSX.Element;
-
 interface TrackListSidebarProps<T extends TrackBase> {
     className?: string;
     renderDuration?: (track: T) => ReactNode;
@@ -471,4 +483,4 @@ interface RatingProps {
 }
 declare function Rating({ rating, handleChange }: RatingProps): react.JSX.Element;
 
-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 ParentChange, type PlayableGenrePlaylist, PlayerPanel, type PlayerPanelProps, Rating, type RatingProps, SEARCH_FAILED_STATUS, SearchBox, type SearchBoxProps, type SearchGroup, type SearchGroupItem, TrackItem, type TrackItemProps, TrackListSidebar, type TrackListSidebarProps, TrackPositionPlayPause, type TrackPositionPlayPauseProps, type UseGenrePlaylistPlaybackOptions, type UseGenreRemoteSearchGroupOptions, searchStatus, useArtistSearchGroup, useGenrePlaylistPlayback, useGenreRemoteSearchGroup, useSongSearchGroup };
+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 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, TrackItem, type TrackItemProps, TrackListSidebar, type TrackListSidebarProps, TrackPositionPlayPause, type TrackPositionPlayPauseProps, type UseGenrePlaylistPlaybackOptions, type UseGenreRemoteSearchGroupOptions, searchStatus, useArtistSearchGroup, useGenrePlaylistPlayback, useGenreRemoteSearchGroup, useSongSearchGroup };

package/dist/genre-tree/index.js

@@ -21,7 +21,7 @@ import {
   useGenrePlaylistPlayback,
   useGenreRemoteSearchGroup,
   useSongSearchGroup
-} from "../chunk-A7OWCEIK.js";
+} from "../chunk-YC3WBUVO.js";
 import "../chunk-DKQQLLMY.js";
 export {
   GenreDetailPanel,