#Components

Generated by website/scripts/generate-api.ts from packages/gridla/src. Do not edit by hand; run bun run generate in website/.

Svelte 5 components over the interaction layer. GridProvider owns layout and gesture state for one canvas (bind:layout or defaultLayout); GridCanvas measures itself and wires input; GridItem positions one item and passes its view to the children snippet; GridPreviewOutline shows where the active item will land; GridTransferScope lets items move between providers.

import { GridCanvas, GridItem, GridPreviewOutline, GridProvider, GridTransferScope } from 'gridla/svelte'

#Components

#GridCanvas

The element items are positioned in. Measures itself, feeds the size to the provider, and wires pointer and keyboard handling. Renders a div with position: relative; give it a height (or let it follow the layout with responsive=\{false\} on the provider).

export const GridCanvas: Component<GridCanvasProps, {}, "">

#GridItem

Positions one item inside GridCanvas. Headless: it renders a div with geometry styles and data attributes and leaves appearance to you. The children snippet receives the item view plus drag and resize handle attributes.

export const GridItem: Component<GridItemProps, {}, "">

#GridPreviewOutline

Renders a box where the active item will land when released. Renders nothing when no gesture is in progress.

export const GridPreviewOutline: Component<GridPreviewOutlineProps, {}, "">

#GridProvider

Owns layout and gesture state for one canvas. Place a GridCanvas inside it. Works controlled (layout or bind:layout, with onLayoutChange) or uncontrolled (defaultLayout). A binding over createGridController from gridla/interaction; nested layouts are nested providers.

export const GridProvider: $$IsomorphicComponent

#GridTransferScope

Lets items move between every GridProvider rendered inside it. The pointer decides the target: the deepest registered canvas under the pointer that accepts the item previews the drop; releasing there commits it. Wraps a TransferScope from gridla/interaction in context.

export const GridTransferScope: Component<GridTransferScopeProps, {}, "">