@behindthemusictree/app-kit-ui 24.0.1 → 28.0.2

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

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { z } from 'zod';
 import { GenreTreeProps, FocusChangeReason, GenreTreeNode, GenreTreeAction, GenreTreeViewMode, GenreTreeViewport, ControlsOrientation, InfoPanelSections, InfoPanelBody, WheelZoomMode } from '@behindthemusictree/genre-tree-view';
 export { ControlsOrientation, FocusChangeReason, GenreTreeAction, GenreTreeOutlineSkeleton, GenreTreeSkeleton, GenreTreeViewMode, GenreTreeViewSkeleton, GenreTreeViewSkeletonProps, GenreTreeViewport, GenreTreeWheelSkeleton } from '@behindthemusictree/genre-tree-view';
-import { TrackBase, CriteriaOverview, CriteriaPlaylistSimple, ArtistSearchResult, CriteriaMinimum, RenderArtistLink } from '@behindthemusictree/app-kit/genre-tree';
+import { TrackBase, CriteriaOverview, CriteriaPlaylistSimple, GenreUuid, GenrePlaylistUuid, ArtistSearchResult, CriteriaMinimum, RenderArtistLink } from '@behindthemusictree/app-kit/genre-tree';
 import { Scope } from '@behindthemusictree/app-kit/transport';
 
 type GenrePlaylistTracksSlots = {
@@ -22,8 +22,8 @@ type GenreDetailSlots<O extends CriteriaOverview> = {
     renderEssentialTracks?: (overview: O) => ReactNode;
 };
 
-/** Controlled edit/expand state and edit-mode slots of the info panel, plus the generic overlay panel, as typed by genre-tree-view. */
-type InfoPanelCurationProps = Partial<Pick<GenreTreeProps, "editMode" | "onEditModeChange" | "renderTitleEditor" | "renderParentsEditor" | "renderDangerZone" | "expanded" | "onExpandedChange" | "collapsed" | "hideExpandButton" | "overlayPanel">>;
+/** Controlled expand state and danger-zone slot of the info panel, plus the generic overlay panel, as typed by genre-tree-view. */
+type InfoPanelCurationProps = Partial<Pick<GenreTreeProps, "renderDangerZone" | "expanded" | "onExpandedChange" | "collapsed" | "hideExpandButton" | "overlayPanel">>;
 
 /** What a tree node's play button plays, and which node is the one currently playing. */
 type GenrePlaylistPlayback = {
@@ -31,6 +31,8 @@ type GenrePlaylistPlayback = {
     play: (genrePlaylist: CriteriaPlaylistSimple) => Promise<void>;
 };
 
+type GenreTreeSizeMetric = "songs" | "views";
+
 /** Pop-core focus is controlled-only: pass both props or neither. Ignored in outline mode. */
 type GenreFocusProps = {
     focusGenreUuid?: undefined;
@@ -46,6 +48,30 @@ type GenreFocusProps = {
     onFocusGenreChange: (uuid: string | null, reason: FocusChangeReason) => void;
 };
 
+type ParentChange = {
+    genre: GenreUuid;
+    from: GenreUuid | null;
+    to: GenreUuid;
+};
+
+/** 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;
+    name: string;
+    scope: Scope;
+    /** Preserve an active artist filter when sharing one of its genre details. */
+    artistUuid: string | null;
+} | {
+    kind: "artist";
+    uuid: string;
+    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;
+
 /** Artists are searched by default; picking one opens its panel (see `artistUuid`). */
 type ArtistSearchProps = {
     artistSearch: false;
@@ -65,6 +91,8 @@ type GenreTreeViewProps<O extends CriteriaOverview = CriteriaOverview> = {
     handleGenreCreationAction: (parent: CriteriaMinimum | null) => void;
     handleGenreRenameAction: (genre: CriteriaMinimum) => void;
     getBackendBaseUrl: () => string;
+    /** Called after the Parent popup moved a genre; `from` and `to` are genre (criteria) uuids, `from` null for a root genre. */
+    onParentChanged?: (change: ParentChange) => void;
     additionalActions?: (node: GenreTreeNode) => GenreTreeAction[];
     /** Controlled view mode. When provided, the internal Stacked/Wheel toggle is not rendered — the consumer owns that UI. */
     viewMode?: GenreTreeViewMode;
@@ -94,6 +122,12 @@ type GenreTreeViewProps<O extends CriteriaOverview = CriteriaOverview> = {
     renderGenreDetailExtras?: (overview: O) => ReactNode;
     /** Layout of the wheel/tree floating zoom/pop/fit controls. Defaults to "horizontal". */
     controlsOrientation?: ControlsOrientation;
+    /** Host control displayed before the size metric in the floating controls. */
+    floatingControlsLeading?: ReactNode;
+    /** Controlled size metric of the wheel and pop-core nodes: song count or summed song views. Uncontrolled when omitted
+     * (starts on songs). The toggle is hidden while an artist filters the tree, which only has song counts. */
+    sizeMetric?: GenreTreeSizeMetric;
+    onSizeMetricChange?: (metric: GenreTreeSizeMetric) => void;
     /** When set, artist names in the info panel's track list render through it (e.g. a router `Link`). In the artist
      * panel, names otherwise render as buttons that switch the panel to that artist. */
     renderArtistLink?: RenderArtistLink;
@@ -107,12 +141,14 @@ 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. */
+    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, getBackendBaseUrl, additionalActions, viewMode: controlledViewMode, selectedNodeId: controlledSelectedNodeId, onSelectedNodeIdChange, defaultViewport, onViewportChange, readOnly, className, showDisplayOptions, showAddRoot, allowWheelRotation: controlledAllowWheelRotation, criteriaOverviewSchema, renderGenreDetailExtras, controlsOrientation, renderArtistLink, artistUuid: controlledArtistUuid, onArtistUuidChange, artistExpanded: controlledArtistExpanded, onArtistExpandedChange, artistSearch, onArtistSelect, artistSearchBaseUrl, renderSummary, renderEssentialTracks, renderSongLeading, renderSongActions, renderTracksToolbar, editMode, onEditModeChange, renderTitleEditor, renderParentsEditor, 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, onViewportChange, readOnly, className, showDisplayOptions, showAddRoot, allowWheelRotation: controlledAllowWheelRotation, criteriaOverviewSchema, renderGenreDetailExtras, controlsOrientation, 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;
 
 type GenrePlaylistTreePerRootProps<T extends TrackBase> = {
     scope: Scope;
@@ -159,6 +195,8 @@ type GenreSearchExtraResults = {
     }[];
     /** Announced politely, e.g. "No artists found". */
     status?: string;
+    /** Shows a spinner in place of the search icon while the host resolves this group. */
+    loading?: boolean;
 };
 type GenreSearchProps<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple> = {
     genrePlaylists: T[];
@@ -182,16 +220,20 @@ interface TrackListSidebarProps<T extends TrackBase> {
     renderDuration?: (track: T) => ReactNode;
     renderActions?: (track: T) => ReactNode;
     layout?: "fixed" | "inline";
+    isCollapsed?: boolean;
+    onExpand?: () => void;
+    onMinimize?: () => void;
     /** When set, artist names render through it (e.g. a router `Link`). */
     renderArtistLink?: RenderArtistLink;
 }
-declare function TrackListSidebar<T extends TrackBase>({ className, renderDuration, renderActions, layout, renderArtistLink, }: TrackListSidebarProps<T>): react.JSX.Element | null;
+declare function TrackListSidebar<T extends TrackBase>({ className, renderDuration, renderActions, layout, isCollapsed, onExpand, onMinimize, renderArtistLink, }: TrackListSidebarProps<T>): react.JSX.Element | null;
 
 interface PlayerPanelProps {
     className?: string;
-    /** Hidden via CSS, never unmounted, so the video keeps playing while the panel is closed. */
+    /** Hidden via CSS, never unmounted, so the video keeps playing while the host hides the panel. */
     isVisible?: boolean;
-    onClose: () => void;
+    /** @deprecated The player no longer closes; its header action minimizes to video-only mode. */
+    onClose?: () => void;
     /** Controlled extended state; uncontrolled when omitted. */
     expanded?: boolean;
     onExpandedChange?: (expanded: boolean) => void;
@@ -199,7 +241,7 @@ interface PlayerPanelProps {
     extendedWidth?: string;
     renderArtistLink?: RenderArtistLink;
 }
-declare function PlayerPanel({ className, isVisible, onClose, expanded, onExpandedChange, extendedWidth, renderArtistLink, }: PlayerPanelProps): react.JSX.Element;
+declare function PlayerPanel({ className, isVisible, expanded, onExpandedChange, extendedWidth, renderArtistLink, }: PlayerPanelProps): react.JSX.Element;
 
 interface TrackItemProps<T extends TrackBase> {
     track: T;
@@ -215,8 +257,9 @@ interface TrackPositionPlayPauseProps {
     position: number;
     uuid: string;
     handlePlayPauseClick: (event: React.MouseEvent) => void;
+    isSelected?: boolean;
 }
-declare function TrackPositionPlayPause({ position, uuid, handlePlayPauseClick }: TrackPositionPlayPauseProps): react.JSX.Element;
+declare function TrackPositionPlayPause({ position, uuid, handlePlayPauseClick, isSelected, }: TrackPositionPlayPauseProps): react.JSX.Element;
 
 interface RatingProps {
     rating: number | null | undefined;
@@ -243,4 +286,4 @@ interface PanelEdgeTabProps {
 }
 declare function PanelEdgeTab({ side, edge, center, controls, className }: PanelEdgeTabProps): react.JSX.Element | null;
 
-export { type ArtistSearchProps, type GenreDetailSlots, type GenreFocusProps, type GenrePlaylistTracksSlots, GenrePlaylistTreePerRoot, type GenrePlaylistTreePerRootProps, GenreSearch, type GenreSearchExtraResults, type GenreSearchProps, GenreTreeView, type GenreTreeViewProps, type InfoPanelCurationProps, PanelEdgeTab, type PanelEdgeTabAction, type PanelEdgeTabProps, PlayerPanel, type PlayerPanelProps, Rating, type RatingProps, TrackItem, type TrackItemProps, TrackListSidebar, type TrackListSidebarProps, TrackPositionPlayPause, type TrackPositionPlayPauseProps };
+export { type ArtistSearchProps, type GenreDetailSlots, type GenreFocusProps, 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, PlayerPanel, type PlayerPanelProps, Rating, type RatingProps, TrackItem, type TrackItemProps, TrackListSidebar, type TrackListSidebarProps, TrackPositionPlayPause, type TrackPositionPlayPauseProps };

package/dist/genre-tree/index.js

@@ -12,8 +12,8 @@ import {
   TrackItem,
   TrackListSidebar,
   TrackPositionPlayPause
-} from "../chunk-BPCFNBFO.js";
-import "../chunk-VDXUW7PP.js";
+} from "../chunk-5PQWJRDZ.js";
+import "../chunk-DKQQLLMY.js";
 export {
   GenrePlaylistTreePerRoot,
   GenreSearch,

package/dist/genre-tree/styles.css

@@ -1 +1,81 @@
 @import "@behindthemusictree/genre-tree-view/styles.css";
+
+.track-position-play-pause__spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex: none;
+  border: 2px solid rgb(255 255 255 / 65%);
+  border-top-color: #22c55e;
+  border-radius: 50%;
+  animation: app-kit-track-spinner 700ms linear infinite;
+}
+
+.track-position-play-pause__bars {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 2px;
+}
+
+.track-position-play-pause__bar {
+  display: block;
+  width: 3px;
+  flex: none;
+  border-radius: 9999px;
+  background-color: var(--color-green-500, #22c55e);
+  transform-origin: bottom center;
+}
+
+.track-position-play-pause__bar:nth-child(1) {
+  height: 8px;
+}
+
+.track-position-play-pause__bar:nth-child(2) {
+  height: 13px;
+}
+
+.track-position-play-pause__bar:nth-child(3) {
+  height: 10px;
+}
+
+.track-position-play-pause__bars[data-playing="true"] .track-position-play-pause__bar {
+  animation: app-kit-playing-bars 700ms ease-in-out infinite alternate;
+}
+
+.track-position-play-pause__bars[data-playing="true"] .track-position-play-pause__bar:nth-child(2) {
+  animation-delay: 180ms;
+}
+
+.track-position-play-pause__bars[data-playing="true"] .track-position-play-pause__bar:nth-child(3) {
+  animation-delay: 360ms;
+}
+
+@keyframes app-kit-playing-bars {
+  from {
+    transform: scaleY(0.35);
+  }
+
+  to {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes app-kit-track-spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .track-position-play-pause__spinner {
+    animation-duration: 1400ms;
+  }
+
+  .track-position-play-pause__bars[data-playing="true"] .track-position-play-pause__bar {
+    animation: none;
+  }
+}
+