@behindthemusictree/app-kit-ui 30.0.0 → 32.0.0

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

@@ -1,10 +1,11 @@
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
 import { z } from 'zod';
-import { GenreTreeProps, FocusChangeReason, GenreTreeNode, GenreTreeAction, GenreTreeViewMode, GenreTreeViewport, InfoPanelSections, InfoPanelBody, WheelZoomMode } from '@behindthemusictree/genre-tree-view';
+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, RenderArtistLink, RenderSongLink, CriteriaPlaylistSimple, GenrePlaylistUuid, ArtistSearchResult, CriteriaMinimum, SongSearchResult } from '@behindthemusictree/app-kit/genre-tree';
 import { Scope } from '@behindthemusictree/app-kit/transport';
+import { DetailPanel } from '@behindthemusictree/ui';
 
 type GenrePlaylistTracksSlots = {
     /** Rendered first in each row, e.g. a selection checkbox. `index` is the row's position in the loaded list. */
@@ -16,9 +17,9 @@ type GenrePlaylistTracksSlots = {
 };
 
 type GenreDetailSlots<O extends CriteriaOverview> = {
-    /** Replaces the default Summary section. */
+    /** Replaces the body of the default Summary section; the title and frame stay. */
     renderSummary?: (overview: O) => ReactNode;
-    /** Replaces the default Essential section (e.g. "Essential songs"). */
+    /** Replaces the body of the default Essential section (e.g. "Essential songs"); the title and frame stay. */
     renderEssentialTracks?: (overview: O) => ReactNode;
 };
 type GenreDetailExtrasProps<O extends CriteriaOverview> = GenreDetailSlots<O> & GenrePlaylistTracksSlots & {
@@ -40,8 +41,24 @@ type GenreDetailExtrasProps<O extends CriteriaOverview> = GenreDetailSlots<O> &
     family: ReactNode;
 };
 
-/** 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">>;
+/** An artist or song detail the host renders in the shared DetailPanel in place of a genre's. */
+interface OverlayPanel {
+    title: ReactNode;
+    content: ReactNode;
+    /** Second column, shown only while expanded. */
+    extraContent?: ReactNode;
+    expanded: boolean;
+    onExpandedChange: (expanded: boolean) => void;
+    onClose: () => void;
+}
+/** A host-supplied panel: expansion is optional because the host may not offer it. */
+type HostOverlayPanel = Omit<OverlayPanel, "expanded" | "onExpandedChange"> & {
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+};
+
+/** The host-owned detail panel's contract with the tree: the area the panel covers, and the node-style resolver the tree publishes back. */
+type HostPanelProps = Partial<Pick<GenreTreeProps, "obscuredInset" | "onNodeStyleResolverChange">>;
 
 /** What a play button needs of a playlist; `criteria` is only read when playing one artist's songs in the genre. */
 type PlayableGenrePlaylistInput = CriteriaPlaylistMinimum & {
@@ -197,7 +214,14 @@ type GenreTreeViewProps<O extends CriteriaOverview = CriteriaOverview> = {
     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 & {
+} & ArtistSearchProps & GenreDetailSlots<O> & GenrePlaylistTracksSlots & GenreFocusProps & {
+    /** Appended to a selected genre's panel, e.g. destructive actions. */
+    renderDangerZone?: (node: GenreTreeNode) => ReactNode;
+    /** Controlled expanded state of the genre panel. Uncontrolled when omitted. */
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    /** A host panel rendered in the detail panel's slot; it takes precedence over the genre, song and artist panels. */
+    overlayPanel?: HostOverlayPanel;
     /** Hides the info panel behind its edge tab; uncontrolled when omitted. Only applies with `placement="regions"`. */
     collapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
@@ -270,13 +294,12 @@ type GenreDetailPanelProps<O extends CriteriaOverview> = {
     collapsed?: boolean;
     expanded?: boolean;
     onExpandedChange?: (expanded: boolean) => void;
+    /** Tab on the panel's inner edge, for hosts that hide and show the panel. */
+    edgeTab?: ComponentProps<typeof DetailPanel>["edgeTab"];
     extras?: GenreInfoPanelBodyProps<O>["extras"];
 };
 /** 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, extras, }: GenreDetailPanelProps<O>): react.JSX.Element;
-
-/** Gives the brand layout tokens a zero-width left column while no left detail panel is showing. */
-declare function useLeftDetailPanelLayout(isPanelShown: boolean, enabled?: boolean): void;
+declare function GenreDetailPanel<O extends CriteriaOverview>({ genreUuid, scope, getBackendBaseUrl, onClose, onSelectGenre, onZoomIn, shareUrl, shareTarget, collapsed, expanded, onExpandedChange, edgeTab, extras, }: GenreDetailPanelProps<O>): react.JSX.Element;
 
 type GenrePlaylistTreePerRootProps<T extends TrackBase> = {
     scope: Scope;
@@ -288,19 +311,12 @@ type GenrePlaylistTreePerRootProps<T extends TrackBase> = {
     additionalActions?: (node: GenreTreeNode) => GenreTreeAction[];
     onNodeClick?: (node: GenreTreeNode) => void;
     onNodeHover?: (node: GenreTreeNode) => void;
-    renderInfoPanelBody?: (node: GenreTreeNode, sections: InfoPanelSections) => InfoPanelBody;
     /** Overrides which node is shown highlighted, e.g. from a search selection. */
     selectedNodeId?: string | null;
     /** Fires when a user action changes the info panel's node, or `null` when it is closed. */
     onSelectedNodeChange?: (node: GenreTreeNode | null) => void;
-    /** Hides the info panel's header close button. */
-    hideInfoPanelClose?: boolean;
-    /** Hides the info panel header's node name. */
-    hideInfoPanelTitle?: boolean;
     /** When true, suppresses per-node create/rename affordances. Defaults to false. */
     readOnly?: boolean;
-    /** When false, suppresses the hover toolbar on every node. Defaults to true. */
-    showToolbar?: boolean;
     wheelZoom?: WheelZoomMode;
     /** Mount-only seed for the pan/zoom, replacing the initial fit. */
     defaultViewport?: GenreTreeViewport;
@@ -310,8 +326,8 @@ type GenrePlaylistTreePerRootProps<T extends TrackBase> = {
     onViewportChange?: (viewport: GenreTreeViewport) => void;
     /** What node play buttons play; defaults to each node's whole genre playlist. */
     playback?: GenrePlaylistPlayback;
-} & 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;
+} & 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;
 
 type GenreSearchExtraGroup = {
     key: string;
@@ -332,7 +348,7 @@ type GenreSearchProps<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>
     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; shown only when the host's CSS reveals `.genre-search-previous`. */
+    /** 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;
@@ -402,23 +418,4 @@ interface RatingProps {
 }
 declare function Rating({ rating, handleChange }: RatingProps): react.JSX.Element;
 
-type PanelEdgeTabAction = {
-    label: string;
-    onClick: () => void;
-    /** Reflected as `aria-expanded` on the button; omit when the button is not a disclosure. */
-    expanded?: boolean;
-};
-interface PanelEdgeTabProps {
-    /** Side of the screen the panel sits on; the tab hangs off the panel's inner edge. */
-    side: "left" | "right";
-    /** Button whose chevron points toward the screen edge. */
-    edge: PanelEdgeTabAction | null;
-    /** Button whose chevron points toward the center of the screen. */
-    center: PanelEdgeTabAction | null;
-    /** Id of the panel the buttons control, when the host can name it. */
-    controls?: string;
-    className?: string;
-}
-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 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 };
+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, TrackItem, type TrackItemProps, TrackListSidebar, type TrackListSidebarProps, TrackPositionPlayPause, type TrackPositionPlayPauseProps, type UseGenrePlaylistPlaybackOptions, useGenrePlaylistPlayback };

package/dist/genre-tree/index.js

@@ -9,15 +9,13 @@ import {
   GenreTreeView,
   GenreTreeViewSkeleton,
   GenreTreeWheelSkeleton,
-  PanelEdgeTab,
   PlayerPanel,
   Rating,
   TrackItem,
   TrackListSidebar,
   TrackPositionPlayPause,
-  useGenrePlaylistPlayback,
-  useLeftDetailPanelLayout
-} from "../chunk-2HE2HDFA.js";
+  useGenrePlaylistPlayback
+} from "../chunk-QGGVPIXY.js";
 import "../chunk-DKQQLLMY.js";
 export {
   GenreDetailPanel,
@@ -30,13 +28,11 @@ export {
   GenreTreeView,
   GenreTreeViewSkeleton,
   GenreTreeWheelSkeleton,
-  PanelEdgeTab,
   PlayerPanel,
   Rating,
   TrackItem,
   TrackListSidebar,
   TrackPositionPlayPause,
-  useGenrePlaylistPlayback,
-  useLeftDetailPanelLayout
+  useGenrePlaylistPlayback
 };
 //# sourceMappingURL=index.js.map