@behindthemusictree/app-kit-ui 26.1.0 → 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, GenreUuid, 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 = {
@@ -54,6 +54,24 @@ type ParentChange = {
     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;
@@ -104,6 +122,8 @@ 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;
@@ -121,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, onParentChanged, getBackendBaseUrl, additionalActions, viewMode: controlledViewMode, selectedNodeId: controlledSelectedNodeId, onSelectedNodeIdChange, defaultViewport, onViewportChange, readOnly, className, showDisplayOptions, showAddRoot, allowWheelRotation: controlledAllowWheelRotation, criteriaOverviewSchema, renderGenreDetailExtras, controlsOrientation, sizeMetric: controlledSizeMetric, onSizeMetricChange, renderArtistLink, artistUuid: controlledArtistUuid, onArtistUuidChange, artistExpanded: controlledArtistExpanded, onArtistExpandedChange, 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, 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;
@@ -198,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;
@@ -215,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;
@@ -231,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;
@@ -259,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, type ParentChange, 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-KPWV4LEJ.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;
+  }
+}
+