# JsonTree

Interactive JSON tree viewer with expand/collapse, copy, and download.

## Structure

```
JsonTree/
├── index.tsx                   # Main component (thin orchestrator)
├── types.ts                    # Types, interfaces, mode presets
├── hooks/
│   └── useJsonExpand.ts        # Expand/collapse state + shouldExpandNodeInitially logic
├── components/
│   └── JsonContent.tsx         # JSONTree wrapper with theme, getItemString, postprocessValue
├── lazy.tsx                    # Lazy-loaded export
├── JsonTree.story.tsx          # Storybook stories
└── README.md
```

## Usage

```tsx
import JsonTree from '@djangocfg/ui-tools/JsonTree';

// Full mode (default) — with toolbar, border, expand/copy controls
<JsonTree data={myObject} />

// Compact — no toolbar, smaller font (11px), depth=1 auto-expand
<JsonTree data={myObject} mode="compact" />

// Inline — minimal, no border, smallest footprint
<JsonTree data={myObject} mode="inline" />
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `data` | `unknown` | — | JSON data to display |
| `mode` | `'full' \| 'compact' \| 'inline'` | `'full'` | Display mode (affects font, padding, controls) |
| `title` | `string` | — | Optional title (full mode only) |
| `config` | `JsonTreeConfig` | `{}` | Fine-grained config overrides |
| `jsonTreeProps` | `Partial<CommonExternalProps>` | `{}` | Pass-through to react-json-tree |

## Mode presets

| | `full` | `compact` | `inline` |
|---|---|---|---|
| Font size | `13px` | `11px` | `11px` |
| Auto-expand depth | `2` | `1` | `1` |
| Expand/copy controls | ✓ | — | — |
| Collection info | ✓ | ✓ | — |
| Border | solid | subtle | none |

## Config options

| Option | Default | Description |
|--------|---------|-------------|
| `maxAutoExpandDepth` | `2` | Auto-expand depth (0 = collapsed by default) |
| `maxAutoExpandArrayItems` | `10` | Arrays ≤ N items are auto-expanded |
| `maxAutoExpandObjectKeys` | `5` | Objects ≤ N keys are auto-expanded |
| `maxStringLength` | `200` | Truncate long strings |
| `collectionLimit` | `50` | Max items rendered per collection |
| `fontSize` | mode-dependent | Override font size (e.g. `'10px'`) |
| `showCollectionInfo` | `true` | Show `{N}` / `(N)` labels on collapsed nodes |
| `showExpandControls` | `true` (full) | Show expand/collapse button |
| `showActionButtons` | `true` (full) | Show copy/download buttons |
| `preserveKeyOrder` | `true` | Preserve object key insertion order |

## In debug panels

Use `mode="compact"` for log entry data — it renders at 11px with depth-1 auto-expand,
matching a devtools-style view without taking excessive vertical space.

```tsx
<LazyJsonTree data={entry.data} mode="compact" />
```
