SDK ReferenceLayout Introspection

Layout Introspection (layout.ts)

Functions for CSS display detection, flex/grid axis analysis, and child slot measurement.

Display Detection

detectLayout(el)

Inspects a container element’s computed styles to determine its layout mode, flex direction, gap, and grid configuration.

function detectLayout(el: HTMLElement): LayoutInfo

Returns:

interface LayoutInfo {
  display: LayoutMode
  flexDirection: string
  gap: string
  gridTemplateColumns: string
  gridTemplateRows: string
}

Flow Axis Analysis

getFlowAxis(mode, dir)

Determines the primary layout flow axis based on display mode and flex direction.

function getFlowAxis(mode: LayoutMode, dir: string | null): "x" | "y"

getFlowSign(dir)

Returns the flow order direction indicator.

function getFlowSign(dir: string | null): 1 | -1

getLayoutLabel(mode, direction?)

Formats a human-readable display label (e.g., “Flex Row”, “Grid”, “Block”).

function getLayoutLabel(mode: LayoutMode, direction?: string | null): string

Child Slot Measurement

detectChildSlots(container)

Measures the bounding rectangles of all direct children to calculate target placement indices for drag-and-drop.

function detectChildSlots(container: HTMLElement): ChildSlot[]
interface ChildSlot {
  index: number
  rect: Rect
}

Grid Track Parsing

parseGridTracks(el)

Evaluates the resolved CSS Grid column and row tracks of a container element.

function parseGridTracks(el: HTMLElement): {
  columns: GridTrack[]
  rows: GridTrack[]
}
interface GridTrack {
  start: number   // Track start position (px)
  end: number     // Track end position (px)
  size: number    // Track size (px)
}

Type Definitions

type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse"
type FlexWrap = "nowrap" | "wrap" | "wrap-reverse"
Viewport MathOverlay Renderer