Layer stackPro

A generated image as layers (subject, background, shadow) with visibility, reorder by drag or keyboard, and regenerating one layer while the rest stay as they are.

Markdown

On this page

ProHide, reorder and regenerate one layer

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/layer-stack

Usage

tsx

import { LayerStack } from "@/components/ui/chatcn/pro/layer-stack"

<LayerStack
  layers={layers}
  onReorder={setOrder}
  onVisibilityChange={toggle}
  onRegenerate={(id, prompt) => regenerate(id, prompt)}
/>

Layers are listed top first, the way a layers panel reads, and composited bottom first over a transparency checker. content is any node drawn at full size: an image, a cutout, a blurred shadow. Order and visibility are controlled. A layer that is generating blurs in place while the rest stay sharp, and the regenerate field keeps that layer's own prompt. Locked layers cannot be regenerated.

Examples

Every state

ProRegenerating, failed, hidden, empty

Props

Prop	Type	Notes
`layers`	`{ id, name, kind?, content, visible?, status?, error?, prompt?, locked? }[]`	Top first
`onReorder`	`(ids) => void`	Enables drag and keyboard reorder
`onVisibilityChange`	`(id, visible) => void`
`onRegenerate`	`(id, prompt) => void`	Shows the regenerate field
`selected`, `defaultSelected`, `onSelectedChange`	`string`	Controlled or not
`aspect`	`number`	Canvas width over height. Default 2 / 3
`disabled`	`boolean`

Keyboard

Key	Action
`ArrowUp`, `ArrowDown` on a grip	Move the layer up or down; focus follows it
`Enter`, `Space`	Select a layer or toggle its visibility
`Cmd Enter`, `Ctrl Enter`	Regenerate from the prompt field

Accessibility

Each grip is a button named with the layer and its position; moves are announced, for example Shadow moved to position 2 of 3.
Visibility buttons are toggles named Show or Hide plus the layer.
A failed regenerate is a role=alert with how to fix it.

Motion

While dragging, other rows slide out of the way in 200 ms. Keyboard moves do not animate.
Hidden layers fade in 200 ms. A regenerating layer blurs; under reduced motion it only dims.