Runes
Generated by website/scripts/generate-api.ts from packages/gridla/src. Do not edit by hand; run bun run generate in website/.
Rune-style readers over the nearest provider, called during component initialization: gridStore selects a slice of state, gridItemView follows one item, gridLayout and gridSelection read the rendered layout and the selection, and gridActions reaches the imperative API. createGridRunes wraps a controller store in $state.raw for custom providers.
import { createGridRunes, getGridContext, getTransferScopeContext, gridActions, gridItemView, gridLayout, gridSelection, gridStore, itemViewsEqual, rectsEqual, rectStyle, resizeHandleStyle, selectItemView, setGridContext, setTransferScopeContext } from 'gridla/svelte'
import type { GridRead, GridRunes } from 'gridla/svelte'
Functions
createGridRunes
function · svelte/context.svelte.ts
Create a GridController and wrap its store in $state.raw. Use it to
build a custom provider; GridProvider calls it for you. Call destroy
when the owning component unmounts.
export declare function createGridRunes<TData = unknown>(options?: GridControllerOptions<TData>): GridRunes<TData>;
getGridContext
function · svelte/context.svelte.ts
Read the nearest GridProvider's runes. Call during component
initialization; throws when no provider is above the component.
export declare function getGridContext<TData = unknown>(): GridRunes<TData>;
getTransferScopeContext
function · svelte/context.svelte.ts
The nearest GridTransferScope's scope, or null when there is none.
export declare function getTransferScopeContext(): TransferScope | null;
gridActions
function · svelte/context.svelte.ts
Imperative layout and selection actions of the nearest provider. Stable for its lifetime.
export declare function gridActions<TData = unknown>(): GridActions<TData>;
gridItemView
function · svelte/context.svelte.ts
Everything a rendered item needs, updated only when its view changes. Pass
a getter to follow a reactive id.
export declare function gridItemView<TData = unknown>(itemId: string | (() => string)): GridRead<GridItemView>;
gridLayout
function · svelte/context.svelte.ts
The rendered layout (projected onto the measured canvas size) of the nearest provider.
export declare function gridLayout<TData = unknown>(): GridRead<GridLayout<TData>>;
gridSelection
function · svelte/context.svelte.ts
Id of the selected item in the nearest provider, or null when nothing is selected.
export declare function gridSelection(): GridRead<string | null>;
gridStore
function · svelte/context.svelte.ts
Select a slice of the nearest provider's state. current recomputes when
the state changes and keeps its previous value while isEqual (default
Object.is) reports the new slice equal, so dependents stay quiet.
export declare function gridStore<TData = unknown, TSlice = GridState<TData>>(selector?: (state: GridState<TData>) => TSlice, isEqual?: (a: TSlice, b: TSlice) => boolean): GridRead<TSlice>;
itemViewsEqual
function · svelte/view.ts
Structural equality of two item views; used to skip redundant updates.
export declare function itemViewsEqual(a: GridItemView, b: GridItemView): boolean;
rectsEqual
function · svelte/view.ts
Structural equality of two rects (or both null).
export declare function rectsEqual(a: GridRect | null, b: GridRect | null): boolean;
rectStyle
function · svelte/view.ts
Inline style that places an element at rect inside a canvas.
export declare function rectStyle(rect: GridRect, positioning: 'transform' | 'absolute'): string;
resizeHandleStyle
function · svelte/view.ts
Inline style of a built-in resize handle. Handles sit fully inside the item
so they stay hit-testable when the item clips its overflow; the geometry
reads --gridla-handle-size and --gridla-handle-inset so CSS can resize
them. size is the fallback thickness.
export declare function resizeHandleStyle(edge: GridResizeEdge, size?: number): string;
selectItemView
function · svelte/view.ts
Derive the GridItemView of itemId from a controller state snapshot.
export declare function selectItemView<TData>(state: GridState<TData>, itemId: string): GridItemView;
setGridContext
function · svelte/context.svelte.ts
Provide runes to descendant components. Call during component initialization.
export declare function setGridContext<TData>(runes: GridRunes<TData>): GridRunes<TData>;
setTransferScopeContext
function · svelte/context.svelte.ts
Provide a TransferScope to descendant providers. GridTransferScope calls this.
export declare function setTransferScopeContext(scope: TransferScope): TransferScope;
Types
GridRead
type · svelte/context.svelte.ts
A reactive read-only value. Read current inside a template, $derived, or $effect.
export type GridRead<T> = {
readonly current: T;
};
GridRunes
type · svelte/context.svelte.ts
A GridController whose state is exposed as a rune. state is a
$state.raw snapshot that follows the controller store, so reading it in a
component, $derived, or $effect tracks every change. Created by
createGridRunes and provided to descendants by GridProvider.
export type GridRunes<TData = unknown> = {
/** Id of the controller. Used by transfer scopes. */
id: string;
/** The controller the runes wrap. */
controller: GridController<TData>;
/** Current controller state (reactive). */
readonly state: GridState<TData>;
/** Resolved configuration in effect (reactive). */
readonly config: GridControllerConfig;
/** Imperative layout and selection API. Stable for the controller's lifetime. */
actions: GridActions<TData>;
/** Low-level gesture API. Stable for the controller's lifetime. */
gesture: GridGestureApi<TData>;
/** Forward changed options to the controller and refresh `config`. */
setOptions: (options: GridControllerOptions<TData>) => void;
/** Stop following the store and destroy the controller. */
destroy: () => void;
};