#Style helpers

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

The inline geometry every adapter puts on items, preview outlines, and built-in resize handles. resizeHandleStyle reads the --gridla-handle-size, --gridla-handle-inset, and --gridla-handle-cursor custom properties so stylesheets can restyle handles; see the styling guide.

import { rectStyle, resizeHandleStyle, styleToText } from 'gridla/interaction'
import type { GridRectStyle, GridResizeHandleStyle, GridResizeHandleStyleOptions } from 'gridla/interaction'

#Functions

#rectStyle

Inline styles that place an element at rect inside a canvas: with a transform (default, keeps layout work off the main thread during gestures) or with left/top ('absolute'). Lengths are px strings.

export function rectStyle(rect: GridRect, positioning: 'transform' | 'absolute'): GridRectStyle

#resizeHandleStyle

Inline styles for a built-in resize handle on edge. Handles sit fully inside the item so they stay hit-testable when the item clips its overflow: corner handles are size squares in the corners, edge handles run along the side and stop inset short of each corner.

The geometry reads three custom properties, each with a fallback, so plain CSS on [data-gridla-resize-handle] (or the handle class) restyles them without fighting the inline declaration:

• --gridla-handle-size: thickness (default 10px).
• --gridla-handle-inset: corner clearance of edge handles (default: the size).
• --gridla-handle-cursor-\<edge\> or --gridla-handle-cursor: the cursor (default: the matching *-resize cursor).

Every adapter's built-in handles use this; call it yourself when you render handles by hand and want the same geometry.

export function resizeHandleStyle(
  edge: GridResizeEdge,
  options: GridResizeHandleStyleOptions = {},
): GridResizeHandleStyle

#styleToText

Serialize a style object with camelCase keys to a style attribute value.

export function styleToText(style: Record<string, string | number | undefined>): string

#Types

#GridRectStyle

Inline geometry that places an element at a rect inside a canvas.

export type GridRectStyle = {
  position: 'absolute'
  left: string
  top: string
  width: string
  height: string
  transform?: string
}

#GridResizeHandleStyle

Inline geometry of a built-in resize handle. Every length is a CSS string that reads a --gridla-handle-* custom property with a fallback, so a stylesheet can restyle the handles without !important.

export type GridResizeHandleStyle = {
  position: 'absolute'
  touchAction: 'none'
  cursor: string
  top?: string
  bottom?: string
  left?: string
  right?: string
  width?: string
  height?: string
}

#GridResizeHandleStyleOptions

Fallback values of resizeHandleStyle, used when the custom properties are unset.

export type GridResizeHandleStyleOptions = {
  /** Thickness of the handle when `--gridla-handle-size` is unset. Default `10px`. */
  size?: number | string
  /**
   * Distance an edge handle keeps from the corners when
   * `--gridla-handle-inset` is unset. Default: the size.
   */
  inset?: number | string
}