@composy/layout-gridstack

GridStack adapter for @composy/layout-editor. It maps persisted breakpoint placements to GridStack widgets, coalesces drag/resize changes into one transaction, supports external material drag-in, and cleans all GridStack listeners and drag sources on destroy.

import { createGridStackEditorEngine } from '@composy/layout-gridstack'

const engine = createGridStackEditorEngine({ container, createGrid })

GridStack remains an adapter dependency; the editor contract and LayoutDocument stay framework and engine neutral. The adapter forwards document/editor direction to GridStack and temporarily mirrors it on the host container's dir and inline direction styles, restoring the host values on destroy. GridStack's native touch and resize handles remain enabled when the host supplies a touch-capable browser surface.

The adapter converts the document's CSS Grid geometry before creating GridStack: a shared row is mapped to rowSize + gap, and the widget margin becomes gap / 2. This keeps the visible widget box aligned with the CSS Grid runtime instead of applying the gap twice.

Compatibility matrix

| Line | Status | Coverage | | ------ | ----------------- | -------------------------------------------------------------------------------- | | 12.x | Minimum supported | Injected GridStackLike ABI contract and peer-range validation | | 13.0.2 | Pinned supported | Unit tests, Chromium/Firefox/WebKit browser matrix and packed consumer smoke | | 13.0.2 | Latest tested | Same as pinned until an upgrade passes the adapter ABI, browser and import gates |

The authoritative machine-readable matrix is compatibility.json. Run pnpm compatibility:check before changing the peer range or upgrading GridStack.