NodeGroup

Purpose

A set of components for creating collapsible groups of items with headers. Provides a hierarchical organization structure for node-like data.

Components

$3

Main container component that provides collapsible functionality.

| Parameter | Type | Description |
| --------- | --------------- | ----------------------------------------------- |
| label | string | Text label for the group header |
| collapsed | boolean | Whether the group is collapsed (default: false) |
| children | React.ReactNode | Children to render when expanded |
| onToggle | () => void | Handler for toggle state |

$3

Header component with label and collapse/expand indicator.

| Parameter | Type | Description |
| --------- | ---------- | ------------------------------ |
| label | string | Text label to display |
| collapsed | boolean | Whether the group is collapsed |
| onToggle | () => void | Handler for toggle state |

$3

Individual item component with icon, title, and optional subtitle.

| Parameter | Type | Description |
| ---------- | --------------- | ----------------------------------------------------------------------- |
| icon | React.ReactNode | Icon to display at the start of the item |
| title | string | Primary title text |
| subtitle | string | Optional subtitle text |
| isDragging | boolean | Whether the item is being dragged (reduces opacity and adds background) |

Usage Example

``tsx
setCollapsed(!collapsed)}>
icon={}
title="BoundingBox info"
subtitle="Extracts details (position, size) from a bounding box"
/>
} title="Image info" subtitle="Extracts metadata or dimensions from an image" />

``