Layers panelPro

The generated app's element tree, synced with the preview selection: hide, lock, rename and drag to reorder or nest, with indent guides, a drop line and the full tree keyboard model.

Markdown

On this page

ProThe booking page's element tree beside the preview. Select on either side, hide, lock, rename with F2 and drag the class cards to reorder them.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/layers-panel

Usage

tsx

import { LayersPanel } from "@/components/ui/chatcn/pro/layers-panel"

<LayersPanel layers={layers} onLayersChange={(next, change) => apply(next, change)}
  selectedId={selected} onSelectedIdChange={setSelected} onHoverChange={outline} />

Every change comes with what happened (move, rename, visibility, lock) so you can write it back to code. moveLayer, updateLayer and findLayer are exported for your own reducers. Locked layers cannot be dragged or renamed; hidden ones dim with their children.

Examples

States

ProHidden and locked layers with long names, read only, loading, empty and error.

Props

Prop	Type	Notes
`layers`, `defaultLayers`, `onLayersChange`	`LayerNode[]`	`id`, `name`, `kind`, `tag`, `children`, `hidden`, `locked`
`selectedId`, `defaultSelectedId`, `onSelectedIdChange`	`string \| null`	Selecting a nested layer opens its parents
`expanded`, `defaultExpanded`, `onExpandedChange`	`string[]`
`onHoverChange`	`(id \| null) => void`	Outline the hovered layer in the preview
`readOnly`	`boolean`	No drag, rename, hide or lock
`loading`, `error`, `onRetry`, `emptyState`

Keyboard

Key	Action
`ArrowUp` `ArrowDown` `Home` `End`	Move the selection
`ArrowRight` `ArrowLeft`	Expand or enter, collapse or go to the parent (mirrored in RTL)
`Alt ArrowUp` `Alt ArrowDown`	Move the layer among its siblings
`F2` or double click	Rename; `Enter` saves, `Escape` cancels
`Cmd Shift H` `Cmd Shift L`	Hide or show, lock or unlock
`Escape` while dragging	Cancel the drag

Accessibility

A tree with leveled, selectable tree items and a roving tab stop. Hidden and locked are part of each item's name, not only icons.
Every move, rename, hide and lock is announced, so keyboard reordering is never silent.

Motion

Chevrons turn in 150 ms and row actions fade in on hover. Drags follow the pointer with no easing, and keyboard moves jump.