Types

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

Component props, the item view passed to snippets, and the state, action, and change types shared with the other adapters.

import { GRID_DATA } from 'gridla/svelte'
import type { GridActions, GridCanvasProps, GridChangeDetail, GridChangeReason, GridControllerConfig, GridInteraction, GridInteractionMode, GridItemProps, GridItemRenderProps, GridItemView, GridPreview, GridPreviewOutlineProps, GridProviderProps, GridState, GridTransferScopeProps } from 'gridla/svelte'
ExportKindSummary
GRID_DATAconstData attributes the pointer gesture looks for on pointer down.
GridActionstypeImperative layout and selection API exposed by the controller.
GridCanvasPropstypeProps for GridCanvas: div attributes plus the pointer gesture options (onItemClick, onDeleteKey, enabled).
GridChangeDetailtypeDescribes an accepted change: the reason, the affected item when there is one, and the solver strategy for solved operations.
GridChangeReasontypeWhy the layout changed, as reported in GridChangeDetail.
GridControllerConfigtypeResolved controller configuration: every SolveOptions field plus the responsive, drag-threshold, and keyboard-step settings with defaults applied.
GridInteractiontypeThe gesture currently in progress.
GridInteractionModetypeKind of gesture: dragging an item or resizing it.
GridItemPropstypeProps for GridItem.
GridItemRenderPropstypePassed to the GridItem children snippet: the item's GridItemView plus attribute objects for drag and resize handles.
GridItemViewtypeEverything needed to paint one item: its current and pre-gesture rectangles plus its active, selected, shifted, and transferring flags.
GridPreviewtypeThe solver's latest answer for the gesture in progress.
GridPreviewOutlinePropstypeProps for GridPreviewOutline: div attributes plus the positioning mode (transform by default).
GridProviderPropstypeProps for GridProvider: every SolveOptions field, a controlled or uncontrolled layout, change and transfer callbacks, and the controller settings.
GridStatetypeController state held in the store.
GridTransferScopePropstypeProps for GridTransferScope: the providers it spans.

Constants

GRID_DATA

const · interaction/attributes.ts:6

Data attributes the pointer gesture looks for on pointer down. Adapters emit them on their elements: item carries the item id, dragHandle marks a surface that starts a move, resizeHandle plus edge mark a resize handle.

export const GRID_DATA: { readonly item: "data-gridla-item"; readonly dragHandle: "data-gridla-drag-handle"; readonly resizeHandle: "data-gridla-resize-handle"; readonly edge: "data-gridla-edge"; }

Types

GridActions

type · interaction/types.ts:99

Imperative layout and selection API exposed by the controller. The object is stable for the controller's lifetime.

export type GridActions<TData = unknown> = {
  /** Replace the whole layout. */
  setLayout: (layout: GridLayout<TData>) => void
  /** Move an item programmatically. Returns whether the solver accepted it. */
  move: (itemId: string, position: GridPoint, options?: SolveOptions) => boolean
  /** Resize an item programmatically. */
  resize: (
    itemId: string,
    change: { edge: GridResizeEdge; delta: GridPoint } | { rect: Partial<GridRect> },
    options?: SolveOptions,
  ) => boolean
  /** Insert an item at a position or centered on a pointer. */
  place: (
    item: NewGridItem<TData>,
    at: { position: GridPoint } | { pointer: GridPoint },
    options?: SolveOptions,
  ) => boolean
  remove: (itemId: string) => void
  /** Patch an item's fields (constraints, policy, data). Geometry is re-clamped. */
  update: (itemId: string, patch: Partial<GridItem<TData>>) => void
  select: (itemId: string | null) => void
  /** Cancel the gesture in progress without committing. */
  cancel: () => void
  /**
   * Preview a new item (for example one dragged from a palette) centered on a
   * pointer position in canvas pixels. Returns the preview, or `null` when it
   * cannot be placed. Follow up with `commitIncoming` or `clearIncoming`.
   */
  previewIncoming: (item: GridItem<TData>, pointer: GridPoint) => GridPreview<TData> | null
  /** Commit the incoming preview into the layout. Returns whether one was committed. */
  commitIncoming: () => boolean
  /** Drop the incoming preview without committing. */
  clearIncoming: () => void
}
MemberTypeDescription
setLayout(layout: GridLayout\<TData\>) =\> voidReplace the whole layout.
move(itemId: string, position: GridPoint, options?: SolveOptions) =\> booleanMove an item programmatically. Returns whether the solver accepted it.
resize`(itemId: string, change: { edge: GridResizeEdge; delta: GridPoint; } \{ rect: Partial<GridRect>; }, options?: SolveOptions) => boolean`
place`(item: NewGridItem<TData>, at: { position: GridPoint; } \{ pointer: GridPoint; }, options?: SolveOptions) => boolean`
remove(itemId: string) =\> void
update(itemId: string, patch: Partial\<GridItem\<TData\>\>) =\> voidPatch an item's fields (constraints, policy, data). Geometry is re-clamped.
select`(itemId: string \null) => void`
cancel() =\> voidCancel the gesture in progress without committing.
previewIncoming`(item: GridItem<TData>, pointer: GridPoint) => GridPreview<TData> \null`
commitIncoming() =\> booleanCommit the incoming preview into the layout. Returns whether one was committed.
clearIncoming() =\> voidDrop the incoming preview without committing.

GridCanvasProps

type · svelte/types.ts

Props for GridCanvas: div attributes plus the pointer gesture options (onItemClick, onDeleteKey, enabled).

export type GridCanvasProps = HTMLAttributes<HTMLDivElement> & GridPointerGestureOptions & {
    children?: Snippet;
};
MemberTypeDescription
children?Snippet\<[]\>

GridChangeDetail

type · interaction/types.ts:73

Describes an accepted change: the reason, the affected item when there is one, and the solver strategy for solved operations.

export type GridChangeDetail = {
  reason: GridChangeReason
  itemId?: string
  strategy?: SolveStrategy
}
MemberTypeDescription
reasonGridChangeReason
itemId?string
strategy?SolveStrategy

GridChangeReason

type · interaction/types.ts:60

Why the layout changed, as reported in GridChangeDetail.

export type GridChangeReason =
  | 'move'
  | 'resize'
  | 'place'
  | 'remove'
  | 'update'
  | 'transfer'
  | 'set'

GridControllerConfig

type · interaction/types.ts:83

Resolved controller configuration: every SolveOptions field plus the responsive, drag-threshold, and keyboard-step settings with defaults applied.

export type GridControllerConfig = SolveOptions & {
  /**
   * Project the layout onto the measured canvas size. When `false`, the
   * canvas element is sized to the layout instead. Default `true`.
   */
  responsive: boolean
  /** Minimum pointer travel before a press becomes a drag. Default `4`. */
  dragThreshold: number
  /** Pixels moved per arrow key press. Default `8`; Shift multiplies by 4. */
  keyboardStep: number
}
MemberTypeDescription
responsivebooleanProject the layout onto the measured canvas size. When false, the canvas element is sized to the layout instead. Default true.
dragThresholdnumberMinimum pointer travel before a press becomes a drag. Default 4.
keyboardStepnumberPixels moved per arrow key press. Default 8; Shift multiplies by 4.

GridInteraction

type · interaction/types.ts:17

The gesture currently in progress.

export type GridInteraction = {
  itemId: string
  mode: GridInteractionMode
  edge?: GridResizeEdge
  pointerId: number | null
  /** Where the pointer grabbed the item, relative to its top-left. */
  grabOffset: GridPoint
  /** Item rect at gesture start, in rendered canvas pixels. */
  origin: GridRect
  /** Pointer position at gesture start, in rendered canvas pixels. */
  start: GridPoint
}
MemberTypeDescription
itemIdstring
modeGridInteractionMode
edge?GridResizeEdge
pointerId`number \null`
grabOffsetGridPointWhere the pointer grabbed the item, relative to its top-left.
originGridRectItem rect at gesture start, in rendered canvas pixels.
startGridPointPointer position at gesture start, in rendered canvas pixels.

GridInteractionMode

type · interaction/types.ts:14

Kind of gesture: dragging an item or resizing it.

export type GridInteractionMode = 'move' | 'resize'

GridItemProps

type · svelte/types.ts

Props for GridItem. id selects the item; the rest control drag surfaces, built-in resize handles, and how the element is positioned.

export type GridItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'id'> & {
    /** Id of the item in the layout. */
    id: string;
    /**
     * `true` (default): the whole element is a drag surface. `false`: only
     * elements with `dragHandleProps` start a move.
     */
    draggable?: boolean;
    /** Edges to render built-in resize handles for. Default: none. */
    resizeEdges?: readonly GridResizeEdge[];
    /** Class for built-in resize handles. */
    resizeHandleClass?: string;
    /**
     * Position the element with `transform` (default) or with `left`/`top`.
     * Transform keeps layout work off the main thread during gestures.
     */
    positioning?: 'transform' | 'absolute';
    /** Render the cursor-tracked rect while dragging instead of the solved preview. Default `true`. */
    followPointer?: boolean;
    /** Item content. Receives the item view plus handle attribute objects. */
    children?: Snippet<[GridItemRenderProps]>;
};
MemberTypeDescription
draggable?booleantrue (default): the whole element is a drag surface. false: only elements with dragHandleProps start a move.
idstringId of the item in the layout.
resizeEdges?ReadonlyArray\<GridResizeEdge\>Edges to render built-in resize handles for. Default: none.
resizeHandleClass?stringClass for built-in resize handles.
positioning?`"absolute" \"transform"`
followPointer?booleanRender the cursor-tracked rect while dragging instead of the solved preview. Default true.
children?Snippet\<[GridItemRenderProps]\>Item content. Receives the item view plus handle attribute objects.

GridItemRenderProps

type · svelte/types.ts

Passed to the GridItem children snippet: the item's GridItemView plus attribute objects for drag and resize handles.

export type GridItemRenderProps = GridItemView & {
    /** Spread on the element that starts a move. */
    dragHandleProps: {
        'data-gridla-drag-handle': string;
    };
    /** Attributes for a resize handle on the given edge. */
    getResizeHandleProps: (edge: GridResizeEdge) => {
        'data-gridla-resize-handle': string;
        'data-gridla-edge': GridResizeEdge;
    };
};
MemberTypeDescription
rectGridRectWhere the item is painted right now (preview-aware).
baseRectGridRectWhere the item was before the current gesture.
activeRect`GridRect \null`
isActiveboolean
isSelectedboolean
isShiftedbooleanTrue when this item moved in the preview because another item pushed it.
isTransferringbooleanTrue while the active item is being previewed in another canvas.
interaction`GridInteraction \null`
dragHandleProps\{ 'data-gridla-drag-handle': string; \}Spread on the element that starts a move.
getResizeHandleProps(edge: GridResizeEdge) =\> \{ "data-gridla-resize-handle": string; "data-gridla-edge": GridResizeEdge; \}Attributes for a resize handle on the given edge.

GridItemView

type · svelte/types.ts

Everything needed to paint one item: its current and pre-gesture rectangles plus its active, selected, shifted, and transferring flags. Returned by gridItemView and passed to the GridItem children snippet.

export type GridItemView = {
    /** Where the item is painted right now (preview-aware). */
    rect: GridRect;
    /** Where the item was before the current gesture. */
    baseRect: GridRect;
    /** Cursor-tracked rect while this item is active; `null` otherwise. */
    activeRect: GridRect | null;
    isActive: boolean;
    isSelected: boolean;
    /** True when this item moved in the preview because another item pushed it. */
    isShifted: boolean;
    /** True while the active item is being previewed in another canvas. */
    isTransferring: boolean;
    interaction: GridInteraction | null;
};
MemberTypeDescription
rectGridRectWhere the item is painted right now (preview-aware).
baseRectGridRectWhere the item was before the current gesture.
activeRect`GridRect \null`
isActiveboolean
isSelectedboolean
isShiftedbooleanTrue when this item moved in the preview because another item pushed it.
isTransferringbooleanTrue while the active item is being previewed in another canvas.
interaction`GridInteraction \null`

GridPreview

type · interaction/types.ts:31

The solver's latest answer for the gesture in progress.

export type GridPreview<TData = unknown> = {
  layout: GridLayout<TData>
  item: GridItem<TData>
  strategy: SolveStrategy
  shiftedSiblings: boolean
  accepted: boolean
}
MemberTypeDescription
layoutGridLayout\<TData\>
itemGridItem\<TData\>
strategySolveStrategy
shiftedSiblingsboolean
acceptedboolean

GridPreviewOutlineProps

type · svelte/types.ts

Props for GridPreviewOutline: div attributes plus the positioning mode (transform by default).

export type GridPreviewOutlineProps = HTMLAttributes<HTMLDivElement> & {
    positioning?: 'transform' | 'absolute';
};
MemberTypeDescription
positioning?`"absolute" \"transform"`

GridProviderProps

type · svelte/types.ts

Props for GridProvider: every SolveOptions field, a controlled or uncontrolled layout, change and transfer callbacks, and the controller settings. layout is bindable (bind:layout).

export type GridProviderProps<TData = unknown> = SolveOptions & {
    /**
     * Stable id of this provider, unique within a `GridTransferScope`. Generated
     * when omitted.
     */
    id?: string;
    /**
     * Controlled layout. Bind it (`bind:layout`) to receive every accepted
     * change, or pair it with `onLayoutChange` and pass the next layout back.
     */
    layout?: GridLayout<TData>;
    /** Initial layout for uncontrolled use. */
    defaultLayout?: GridLayout<TData>;
    /**
     * Called with the next layout after every accepted change. The layout is
     * expressed in the canvas size it was rendered at.
     */
    onLayoutChange?: (layout: GridLayout<TData>, detail: GridChangeDetail) => void;
    /** Fires with the solver strategy on every accepted interactive commit. */
    onCommit?: (detail: GridChangeDetail) => void;
    /** Called when an item moves to another canvas inside a `GridTransferScope`. */
    onTransferOut?: (itemId: string, targetId: string) => void;
    /** Called when an item arrives from another canvas. */
    onTransferIn?: (item: GridItem<TData>, sourceId: string) => void;
    /** Whether items from other canvases may be dropped here. Default `true`. */
    acceptTransfers?: boolean | ((item: GridItem<TData>, sourceId: string) => boolean);
    /** Project the layout onto the measured canvas size. Default `true`. */
    responsive?: boolean;
    /** Minimum pointer travel before a press becomes a drag. Default `4`. */
    dragThreshold?: number;
    /** Pixels moved per arrow key press. Default `8`; Shift multiplies by 4. */
    keyboardStep?: number;
    /** Controlled selection. */
    selectedId?: string | null;
    onSelectedIdChange?: (itemId: string | null) => void;
    children?: Snippet;
};
MemberTypeDescription
id?stringStable id of this provider, unique within a GridTransferScope. Generated when omitted.
layout?GridLayout\<TData\>Controlled layout. Bind it (bind:layout) to receive every accepted change, or pair it with onLayoutChange and pass the next layout back.
defaultLayout?GridLayout\<TData\>Initial layout for uncontrolled use.
onLayoutChange?((layout: GridLayout\<TData\>, detail: GridChangeDetail) =\> void)Called with the next layout after every accepted change. The layout is expressed in the canvas size it was rendered at.
onCommit?((detail: GridChangeDetail) =\> void)Fires with the solver strategy on every accepted interactive commit.
onTransferOut?((itemId: string, targetId: string) =\> void)Called when an item moves to another canvas inside a GridTransferScope.
onTransferIn?((item: GridItem\<TData\>, sourceId: string) =\> void)Called when an item arrives from another canvas.
acceptTransfers?`boolean \((item: GridItem<TData>, sourceId: string) => boolean)`
responsive?booleanProject the layout onto the measured canvas size. Default true.
dragThreshold?numberMinimum pointer travel before a press becomes a drag. Default 4.
keyboardStep?numberPixels moved per arrow key press. Default 8; Shift multiplies by 4.
selectedId?`string \null`
onSelectedIdChange?`((itemId: string \null) => void)`
children?Snippet\<[]\>

GridState

type · interaction/types.ts:43

Controller state held in the store. layout is what interactions operate on; source is what the caller owns.

export type GridState<TData = unknown> = {
  /** The layout the controller was given (or owns). */
  source: GridLayout<TData>
  /** Measured canvas element size, or `null` until measured. */
  size: GridSize | null
  /** `source` projected onto `size`. Interactions operate on this layout. */
  layout: GridLayout<TData>
  interaction: GridInteraction | null
  /** Rect that tracks the pointer during a gesture, in rendered pixels. */
  activeRect: GridRect | null
  preview: GridPreview<TData> | null
  selectedId: string | null
  /** True while the active item is being previewed in another canvas. */
  transferring: boolean
}
MemberTypeDescription
sourceGridLayout\<TData\>The layout the controller was given (or owns).
size`GridSize \null`
layoutGridLayout\<TData\>source projected onto size. Interactions operate on this layout.
interaction`GridInteraction \null`
activeRect`GridRect \null`
preview`GridPreview<TData> \null`
selectedId`string \null`
transferringbooleanTrue while the active item is being previewed in another canvas.

GridTransferScopeProps

type · svelte/types.ts

Props for GridTransferScope: the providers it spans.

export type GridTransferScopeProps = {
    children?: Snippet;
};
MemberTypeDescription
children?Snippet\<[]\>