@behindthemusictree/genre-tree-view 5.0.0 → 6.2.0

package/dist/index.d.cts

@@ -23,6 +23,9 @@ interface GenreTreeNode {
     /** A grouping node that no item is filed under directly. Read by InfoPanel (badge), GenreTreeOutline
      * and the stacked/wheel node labels (italic); the pop-core labels ignore it. */
     umbrella?: boolean;
+    /** Which scene a genre belongs to. GenreTreeWheelRadialPopCore draws an "underground" node and its
+     * descendants in a darker shade of their usual color, over a darker background slice. */
+    scene?: "commercial" | "underground";
 }
 type GenreTreePlayState = "playing" | "paused" | "loading";
 /** "stacked" is the linear/card tree (GenreTree); "wheel"/"pop-core" are the radial layouts
@@ -71,7 +74,7 @@ interface InfoPanelSections {
     toolbar: ReactNode;
     /** Ancestor chips, root-first — null for a root. */
     ancestors: ReactNode;
-    /** Parent, node and children mini tree, preceded in edit mode by `renderParentsEditor`. */
+    /** Parent, node and children mini tree. */
     family: ReactNode;
     /** The `itemCountLabel` row. */
     itemCount: ReactNode;
@@ -133,6 +136,12 @@ interface GenreTreeProps {
     /** Stacks the floating zoom/pop/fit controls vertically ("vertical", the default) or lays them
      * out in a row ("horizontal"). */
     controlsOrientation?: ControlsOrientation;
+    /** Host content rendered in the floating controls box, beside the zoom buttons ("horizontal")
+     * or above them ("vertical"); stacked above them in narrow containers. */
+    floatingControlsLeading?: ReactNode;
+    /** Shows a small spinner beside the zoom buttons (after a short delay, so fast operations don't
+     * flash) and marks the tree `aria-busy`. Use it while the host is updating the tree in place. */
+    busy?: boolean;
     /** Multiplies the spacing between depth levels along the tree's growth axis. Defaults to 1
      * (no change). */
     depthSpacingScale?: number;
@@ -165,23 +174,11 @@ interface GenreTreeProps {
      * (by clearing `selectedNodeId`), e.g. from its own search bar. Defaults to false. */
     hideInfoPanelClose?: boolean;
     /** Hides the info panel header's node name — for a consumer that already shows it, e.g. in its own
-     * search bar floated over the header (see `--gtv-info-panel-header-inset`). The title editor still
-     * shows in edit mode. Defaults to false. */
+     * search bar floated over the header (see `--gtv-info-panel-header-inset`). Defaults to false. */
     hideInfoPanelTitle?: boolean;
-    /** Hides the info panel's Edit/Done toggle even when `onEditModeChange` is set, and keeps the
-     * edit-mode slots below inactive. Defaults to false. */
+    /** Keeps `renderDangerZone` inactive. Defaults to false. */
     readOnly?: boolean;
-    /** Whether the info panel is in edit mode (controlled) — only then are `renderTitleEditor`,
-     * `renderParentsEditor` and `renderDangerZone` rendered. Defaults to false. */
-    editMode?: boolean;
-    /** When set (and `readOnly` is false), the info panel header shows an Edit/Done toggle firing
-     * this with the requested mode. */
-    onEditModeChange?: (on: boolean) => void;
-    /** Edit mode only: replaces the info panel header's title, e.g. with an inline rename field. */
-    renderTitleEditor?: (node: GenreTreeNode) => ReactNode;
-    /** Edit mode only: replaces the info panel's Parent section. */
-    renderParentsEditor?: (node: GenreTreeNode) => ReactNode;
-    /** Edit mode only: rendered at the bottom of the info panel. */
+    /** Rendered at the bottom of the info panel unless `readOnly`. */
     renderDangerZone?: (node: GenreTreeNode) => ReactNode;
     /** Whether the info panel fills the tree container (controlled), splitting into a narrow left
      * column (the body's `aside`, then the danger zone) and a wide right one (its `primary`). Selecting
@@ -240,7 +237,7 @@ interface GenreTreeOverlayPanel {
  * Purely presentational: fetching, mutations, and popups are the consumer's responsibility,
  * wired through the callback props.
  */
-declare function GenreTree({ nodes, className, rootColor, orientation, hideRoot, playingNodeId, playState, reparentingNodeId, onPlayPause, onAddChild, onRenameRequest, onDeleteRequest, onReparentRequest, onReparent, onNodeClick, additionalActions, interactive, depthSpacingScale, showToolbar, selectedNodeId: selectedNodeIdProp, renderInfoPanelBody, onSelectedNodeChange, hideInfoPanelClose, hideInfoPanelTitle, itemCountLabel, readOnly, editMode, onEditModeChange, renderTitleEditor, renderParentsEditor, renderDangerZone, expanded, onExpandedChange, collapsed, hideExpandButton, overlayPanel, wheelZoom, defaultViewport, onViewportChange, controlsOrientation, }: GenreTreeProps): react.JSX.Element;
+declare function GenreTree({ nodes, className, rootColor, orientation, hideRoot, playingNodeId, playState, reparentingNodeId, onPlayPause, onAddChild, onRenameRequest, onDeleteRequest, onReparentRequest, onReparent, onNodeClick, additionalActions, interactive, depthSpacingScale, showToolbar, selectedNodeId: selectedNodeIdProp, renderInfoPanelBody, onSelectedNodeChange, hideInfoPanelClose, hideInfoPanelTitle, itemCountLabel, readOnly, renderDangerZone, expanded, onExpandedChange, collapsed, hideExpandButton, overlayPanel, wheelZoom, defaultViewport, onViewportChange, controlsOrientation, floatingControlsLeading, busy, }: GenreTreeProps): react.JSX.Element;
 
 interface GenreTreeWheelProps extends Omit<GenreTreeProps, "nodes" | "rootColor" | "orientation"> {
     nodes: GenreTreeNode[];
@@ -341,7 +338,7 @@ type GenreTreeWheelRadialPopCoreProps = WheelRadialPopCoreProps;
  */
 declare function GenreTreeWheelRadialPopCore(props: GenreTreeWheelRadialPopCoreProps): react.JSX.Element;
 
-type GenreTreeOutlineProps = Omit<GenreTreeProps, "rootColor" | "orientation" | "hideRoot" | "interactive" | "depthSpacingScale" | "wheelZoom" | "controlsOrientation">;
+type GenreTreeOutlineProps = Omit<GenreTreeProps, "rootColor" | "orientation" | "hideRoot" | "interactive" | "depthSpacingScale" | "wheelZoom" | "controlsOrientation" | "floatingControlsLeading" | "busy">;
 /**
  * Text counterpart of `GenreTreeWheelRadialPopCore`: the same forest as nested collapsible lists
  * (`<details>`), "Mainstream Pop" first, then every other root with its direct children split

package/dist/index.d.ts

@@ -23,6 +23,9 @@ interface GenreTreeNode {
     /** A grouping node that no item is filed under directly. Read by InfoPanel (badge), GenreTreeOutline
      * and the stacked/wheel node labels (italic); the pop-core labels ignore it. */
     umbrella?: boolean;
+    /** Which scene a genre belongs to. GenreTreeWheelRadialPopCore draws an "underground" node and its
+     * descendants in a darker shade of their usual color, over a darker background slice. */
+    scene?: "commercial" | "underground";
 }
 type GenreTreePlayState = "playing" | "paused" | "loading";
 /** "stacked" is the linear/card tree (GenreTree); "wheel"/"pop-core" are the radial layouts
@@ -71,7 +74,7 @@ interface InfoPanelSections {
     toolbar: ReactNode;
     /** Ancestor chips, root-first — null for a root. */
     ancestors: ReactNode;
-    /** Parent, node and children mini tree, preceded in edit mode by `renderParentsEditor`. */
+    /** Parent, node and children mini tree. */
     family: ReactNode;
     /** The `itemCountLabel` row. */
     itemCount: ReactNode;
@@ -133,6 +136,12 @@ interface GenreTreeProps {
     /** Stacks the floating zoom/pop/fit controls vertically ("vertical", the default) or lays them
      * out in a row ("horizontal"). */
     controlsOrientation?: ControlsOrientation;
+    /** Host content rendered in the floating controls box, beside the zoom buttons ("horizontal")
+     * or above them ("vertical"); stacked above them in narrow containers. */
+    floatingControlsLeading?: ReactNode;
+    /** Shows a small spinner beside the zoom buttons (after a short delay, so fast operations don't
+     * flash) and marks the tree `aria-busy`. Use it while the host is updating the tree in place. */
+    busy?: boolean;
     /** Multiplies the spacing between depth levels along the tree's growth axis. Defaults to 1
      * (no change). */
     depthSpacingScale?: number;
@@ -165,23 +174,11 @@ interface GenreTreeProps {
      * (by clearing `selectedNodeId`), e.g. from its own search bar. Defaults to false. */
     hideInfoPanelClose?: boolean;
     /** Hides the info panel header's node name — for a consumer that already shows it, e.g. in its own
-     * search bar floated over the header (see `--gtv-info-panel-header-inset`). The title editor still
-     * shows in edit mode. Defaults to false. */
+     * search bar floated over the header (see `--gtv-info-panel-header-inset`). Defaults to false. */
     hideInfoPanelTitle?: boolean;
-    /** Hides the info panel's Edit/Done toggle even when `onEditModeChange` is set, and keeps the
-     * edit-mode slots below inactive. Defaults to false. */
+    /** Keeps `renderDangerZone` inactive. Defaults to false. */
     readOnly?: boolean;
-    /** Whether the info panel is in edit mode (controlled) — only then are `renderTitleEditor`,
-     * `renderParentsEditor` and `renderDangerZone` rendered. Defaults to false. */
-    editMode?: boolean;
-    /** When set (and `readOnly` is false), the info panel header shows an Edit/Done toggle firing
-     * this with the requested mode. */
-    onEditModeChange?: (on: boolean) => void;
-    /** Edit mode only: replaces the info panel header's title, e.g. with an inline rename field. */
-    renderTitleEditor?: (node: GenreTreeNode) => ReactNode;
-    /** Edit mode only: replaces the info panel's Parent section. */
-    renderParentsEditor?: (node: GenreTreeNode) => ReactNode;
-    /** Edit mode only: rendered at the bottom of the info panel. */
+    /** Rendered at the bottom of the info panel unless `readOnly`. */
     renderDangerZone?: (node: GenreTreeNode) => ReactNode;
     /** Whether the info panel fills the tree container (controlled), splitting into a narrow left
      * column (the body's `aside`, then the danger zone) and a wide right one (its `primary`). Selecting
@@ -240,7 +237,7 @@ interface GenreTreeOverlayPanel {
  * Purely presentational: fetching, mutations, and popups are the consumer's responsibility,
  * wired through the callback props.
  */
-declare function GenreTree({ nodes, className, rootColor, orientation, hideRoot, playingNodeId, playState, reparentingNodeId, onPlayPause, onAddChild, onRenameRequest, onDeleteRequest, onReparentRequest, onReparent, onNodeClick, additionalActions, interactive, depthSpacingScale, showToolbar, selectedNodeId: selectedNodeIdProp, renderInfoPanelBody, onSelectedNodeChange, hideInfoPanelClose, hideInfoPanelTitle, itemCountLabel, readOnly, editMode, onEditModeChange, renderTitleEditor, renderParentsEditor, renderDangerZone, expanded, onExpandedChange, collapsed, hideExpandButton, overlayPanel, wheelZoom, defaultViewport, onViewportChange, controlsOrientation, }: GenreTreeProps): react.JSX.Element;
+declare function GenreTree({ nodes, className, rootColor, orientation, hideRoot, playingNodeId, playState, reparentingNodeId, onPlayPause, onAddChild, onRenameRequest, onDeleteRequest, onReparentRequest, onReparent, onNodeClick, additionalActions, interactive, depthSpacingScale, showToolbar, selectedNodeId: selectedNodeIdProp, renderInfoPanelBody, onSelectedNodeChange, hideInfoPanelClose, hideInfoPanelTitle, itemCountLabel, readOnly, renderDangerZone, expanded, onExpandedChange, collapsed, hideExpandButton, overlayPanel, wheelZoom, defaultViewport, onViewportChange, controlsOrientation, floatingControlsLeading, busy, }: GenreTreeProps): react.JSX.Element;
 
 interface GenreTreeWheelProps extends Omit<GenreTreeProps, "nodes" | "rootColor" | "orientation"> {
     nodes: GenreTreeNode[];
@@ -341,7 +338,7 @@ type GenreTreeWheelRadialPopCoreProps = WheelRadialPopCoreProps;
  */
 declare function GenreTreeWheelRadialPopCore(props: GenreTreeWheelRadialPopCoreProps): react.JSX.Element;
 
-type GenreTreeOutlineProps = Omit<GenreTreeProps, "rootColor" | "orientation" | "hideRoot" | "interactive" | "depthSpacingScale" | "wheelZoom" | "controlsOrientation">;
+type GenreTreeOutlineProps = Omit<GenreTreeProps, "rootColor" | "orientation" | "hideRoot" | "interactive" | "depthSpacingScale" | "wheelZoom" | "controlsOrientation" | "floatingControlsLeading" | "busy">;
 /**
  * Text counterpart of `GenreTreeWheelRadialPopCore`: the same forest as nested collapsible lists
  * (`<details>`), "Mainstream Pop" first, then every other root with its direct children split