# Build Virtualized `json-view` Component

## Goal

Build a new `json-view` component under `packages/base/data/` that behaves similarly to `vue-json-pretty`, with strong support for large payloads via virtual scrolling and a more DOM-efficient rendering strategy.

## Requirements

- Create a new base component alongside `list-table-v2.vue`.
- Render formatted JSON objects/arrays/primitives in an interactive tree viewer.
- Keep the supported public API close to `vue-json-pretty` where practical.
- Support most `vue-json-pretty` viewer features except:
  - selector
  - inline editing
- Support expand/collapse interactions.
- Support virtual scrolling for large JSON trees.
- Reuse and adapt relevant pretext-based utilities from `packages/base/data/list-table-v2/` where useful.
- Optimize DOM output aggressively compared with `vue-json-pretty`, including:
  - sharing one indentation element across multiple contiguous lines of the same level where possible
  - using CSS pseudo-elements for affordances such as expand/collapse icons
- Place the component implementation under `packages/base/data/`, near `list-table-v2.vue`.

## Feature Targets Compared to `vue-json-pretty`

- Tree expansion/collapse
- Key/value display for objects
- Array index display
- Primitive type styling
- Empty object/array handling
- Path-aware rendering as needed for stable keys and interactions
- Optional depth/default-expand behavior
- `showLine`, `showLineNumber`, `showIcon`, `showDoubleQuotes`
- `collapsedNodeLength`, `deep`, `collapsedOnClickBrackets`
- render hooks/slots for node key and value
- virtual list controls such as `virtual`, `height`, `itemHeight`
- Virtualized rendering of visible rows

## Acceptance Criteria

- [ ] A new `json-view` component exists under `packages/base/data/`
- [ ] Component can render nested JSON structures with correct formatting
- [ ] Expand/collapse works for objects and arrays
- [ ] Large JSON payloads render with virtualization rather than mounting every visible line at once
- [ ] DOM structure is materially leaner than a naive per-line/per-indent implementation
- [ ] Shared utilities are reused where it improves consistency with `list-table-v2`
- [ ] Public API stays close to `vue-json-pretty` for the supported subset
- [ ] Public API is documented in code/types and is coherent for consumers
- [ ] `npm run type-check` passes

## Technical Notes

- Likely architecture:
  - normalize JSON into a flat row model representing visible logical lines
  - track expansion state by stable path keys
  - compute visible rows from expansion state
  - use a virtualizer similar to `useVirtualRows` from `list-table-v2`
- DOM minimization ideas to validate:
  - row text assembled with fewer wrapper nodes
  - indentation rendered via CSS background/pseudo-elements where practical
  - toggle affordances rendered without dedicated icon nodes
- Need targeted research on:
  - `vue-json-pretty` feature surface and prop API
  - DOM-efficient strategies for indentation/toggles/row assembly