Architecture Explorer

Drag, resize, and reflow items. Watch events, state, and CSS update in real time.

A (2×1)

B

C

D (1×2)

E (2×1)

F

G

H (2×1)

Drag items to rearrange. Resize from corners/edges. Press Shift+D for dev overlay. Resize the container to see columns reflow.

State Machine

idle

→

selected

→

interacting

→

committing

selected: —

interaction: —

Events

Selection

select

deselect

Drag

start

move

end

cancel

Resize

start

move

end

cancel

Responsive

col-change

ARIA Announcements

Waiting for interactions…

Core State

Injected CSS

(no injected CSS yet)