# @n-uf/hypr-tiling

> hypr-tiling is a dynamic tiling layout engine for React: a recursive split-tree renderer that lets users drag, drop, resize, group, maximize, and keyboard-control resizable panes at runtime, with a theming engine and self-healing drag recovery — inspired by the Hyprland Wayland compositor.

Homepage: https://hypr-tiling.n-uf.com/
Showcase: https://hypr-tiling.n-uf.com/showcase
Repository: https://github.com/n-uf/hypr-tiling
Install: pnpm add @n-uf/hypr-tiling react react-dom

## hypr-tiling

Dynamic tiling for React. A recursive split-tree renderer for runtime-rearrangeable, resizable panes.

## install

Install with pnpm add @n-uf/hypr-tiling react react-dom. React 19 peer deps. Render DynamicTilingRenderer with controlled layout state.

## features

Recursive split-tree layout, Drag-and-drop tiling, Resize & sizing modes, Master / stack layout, Tabbed grouping, Full keyboard control, Theming engine, Self-healing drag recovery.

## model & kudos

The layout is a serialisable split-tree you own in state; the renderer projects it to pixels and reports edits. Inspired by the Hyprland Wayland compositor.

## seo + llm

Panes emit real semantic DOM (headings, paragraphs, lists), not canvas. Prerendered to static HTML so crawlers and LLM fetchers read the content without executing JS.

## Features

- Recursive split-tree layout: A layout is a tree of leaf, split, and group nodes. Binary splits carry a ratio and an axis; the renderer is a controlled component driven by your layout state.
- Drag-and-drop tiling: Hyprland-style live drag: the source detaches, the tree freezes, a cursor-following ghost hops between seats, and the move commits on release — resolving to swap, edge-insert, split-container-insert, or group-merge.
- Resize & sizing modes: Drag split dividers, or pin a pane to a measured pixel extent per dimension (static) versus ratio-distributed (flexible). Panes can acquire space directionally.
- Master / stack layout: Any subtree can switch to a master-area-plus-stack arrangement with a configurable master count and orientation — the classic tiling-WM master layout.
- Tabbed grouping: Collapse several leaves into one slot as a stacked group with a tab strip; only the active member renders and is hit-tested.
- Full keyboard control: Directional focus, a pane switcher (cycle / jump / overlay), maximize, keyboard move-mode, and master/group commands — all behind a remappable keymap and a typed command API.
- Theming engine: Built-in themes, eight accent hues, a theme provider with hooks, and live theme switching with no remount. This page ships a bespoke mosaic theme.
- Self-healing drag recovery: A frame-deadline animation backstop, an idle watchdog, transient-style teardown, and a visibilitychange reconcile guarantee a drag never strands the tree mid-transition.