Layout types
Pibbl layout is opt-in and immediate-mode. Parents inspect normalized direct-child styles, resolve finite allocations, and render one child descriptor at a time; they do not retain drawing commands. Style is local and never cascades.
AbsoluteStyle
Section titled “AbsoluteStyle”AbsoluteStyle is the declared container style for Absolute, including its
finite box and the independent left/top placement vocabulary for children.
BoxStyle
Section titled “BoxStyle”BoxStyle is the shared declared-box vocabulary: dimensions, min/max limits,
padding, and the local inputs needed to resolve a finite box.
CanvasMeasurementService
Section titled “CanvasMeasurementService”CanvasMeasurementService supplies the caller-owned Canvas measurement
operation used by pure measureElement; it cannot render or acquire runtime
resources.
Constraints
Section titled “Constraints”Constraints defines finite minimum and maximum width/height limits for
layout resolution and pure measurement.
Edges is the normalized finite top/right/bottom/left edge record.
EdgeValues
Section titled “EdgeValues”EdgeValues is the public shorthand accepted for edge values. A scalar applies
to all sides and omitted sides resolve to zero.
FlexItemStyle
Section titled “FlexItemStyle”FlexItemStyle is the direct-child participation style consumed by a Flex
parent; it does not create a CSS cascade.
FlexProps
Section titled “FlexProps”FlexProps accepts recursive PibblNode children for Pibbl’s supported Flexbox
subset.
FlexStyle
Section titled “FlexStyle”FlexStyle is the declared container style for Flex. Reverse/reordered
flexing, advanced intrinsic sizing, margins, and scrolling are unsupported.
FlowProps
Section titled “FlowProps”FlowProps accepts recursive PibblNode children for sequential flow layout.
FlowStyle
Section titled “FlowStyle”FlowStyle configures the direction, wrapping, and declared box for Flow.
GridItemStyle
Section titled “GridItemStyle”GridItemStyle is the direct-child placement style consumed by an explicit
Grid parent.
GridProps
Section titled “GridProps”GridProps accepts recursive PibblNode children for explicit-track grid layout.
GridStyle
Section titled “GridStyle”GridStyle configures the declared box and explicit tracks for Grid; CSS
auto-placement and advanced intrinsic sizing are not supported.
GridTrack
Section titled “GridTrack”GridTrack describes one explicit Grid track in Pibbl’s supported subset.
LayoutBox
Section titled “LayoutBox”LayoutBox is the stable readonly child-local allocation available during
render through useLayoutBox.
LayoutDiagnosticContext
Section titled “LayoutDiagnosticContext”LayoutDiagnosticContext carries component and algorithm context for a public
layout/style validation failure.
LayoutDiagnosticInput
Section titled “LayoutDiagnosticInput”LayoutDiagnosticInput is the structured public input accepted by
layoutDiagnostic to identify property, supplied value, and optional
constraints.
LayoutItemStyle
Section titled “LayoutItemStyle”LayoutItemStyle is the shared direct-child participation vocabulary for
Absolute, Overlay, Flex, and Grid parents.
Length
Section titled “Length”Length is Pibbl’s public numeric/percentage/"auto" length vocabulary.
Resolution requires a definite percentage basis when a percentage is used.
MeasureInput
Section titled “MeasureInput”MeasureInput describes an opt-in primitive’s pure measurement request.
MeasureResult
Section titled “MeasureResult”MeasureResult is the result of measureElement and distinguishes supported
measurement from an unsupported primitive capability.
OverlayStyle
Section titled “OverlayStyle”OverlayStyle is the declared shared-allocation style for Overlay children.
Percentage
Section titled “Percentage”Percentage is the public percentage-length form. It resolves only against a
definite nonnegative reference dimension.
ResolvedBoxStyle
Section titled “ResolvedBoxStyle”ResolvedBoxStyle is the finite box result with its resolved border/content
geometry after box-style validation.
Size is the finite width/height record used by layout and measurement.
API details from source
Section titled “API details from source”
AbsoluteStyle
Section titled “AbsoluteStyle”Supported geometry and presentation properties for Absolute.
type AbsoluteStyle = BoxStyle & LayoutItemStyleRelated API: AbsoluteStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/layout/absolute.ts:55
Properties and methods
Section titled “Properties and methods”
width (optional)
width?: Length | undefinedRelated API: Length.
Horizontal extent in the units of the containing geometry or surface. See Length.
height (optional)
height?: Length | undefinedRelated API: Length.
Vertical extent in the units of the containing geometry or surface. See Length.
minWidth (optional)
minWidth?: number | `${number}%` | undefinedMinimum permitted width. See Length.
maxWidth (optional)
maxWidth?: number | `${number}%` | undefinedMaximum permitted width. See Length.
minHeight (optional)
minHeight?: number | `${number}%` | undefinedMinimum permitted height. See Length.
maxHeight (optional)
maxHeight?: number | `${number}%` | undefinedMaximum permitted height. See Length.
padding (optional)
padding?: EdgeValues | undefinedRelated API: EdgeValues.
Insets between the border box and content box. See EdgeValues.
overflow (optional)
overflow?: "clip" | "visible" | undefinedSelects "visible", "clip" for overflow. See BoxStyle.
transition (optional)
transition?: PibblTransitionBinding | undefinedRelated API: PibblTransitionBinding.
Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
custom (optional)
custom?: unknownApplication-defined style payload passed through the runtime. See SystemStyle.
filter (optional)
filter?: PibblFilter | readonly PibblFilter[] | undefinedRelated API: PibblFilter.
Ordered pixel-only filters applied to the receiving primitive and its descendants. See PibblFilter.
left (optional)
left?: number | `${number}%` | undefinedLeft edge coordinate or inset. See Length.
View source — packages/core/src/lib/style/positioning.ts:127
top (optional)
top?: number | `${number}%` | undefinedTop edge value or top envelope guide. See Length.
View source — packages/core/src/lib/style/positioning.ts:129
alignSelf (optional)
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefinedThis child’s cross-axis or block-axis alignment override. See LayoutItemStyle.
justifySelf (optional)
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefinedThis child’s inline-axis alignment override. See LayoutItemStyle.
flexBasis (optional)
flexBasis?: Length | undefinedRelated API: Length.
Initial main-axis size before flex growth or shrinkage. See Length.
flexGrow (optional)
flexGrow?: number | undefinedRelative share of positive free space assigned to this child. See LayoutItemStyle.
flexShrink (optional)
flexShrink?: number | undefinedRelative factor used when reducing main-axis size. See LayoutItemStyle.
gridColumnStart (optional)
gridColumnStart?: number | undefinedExplicit starting grid column. See LayoutItemStyle.
gridColumnSpan (optional)
gridColumnSpan?: number | undefinedNumber of columns occupied by this child. See LayoutItemStyle.
gridRowStart (optional)
gridRowStart?: number | undefinedExplicit starting grid row. See LayoutItemStyle.
gridRowSpan (optional)
gridRowSpan?: number | undefinedNumber of rows occupied by this child. See LayoutItemStyle.
OverlayStyle
Section titled “OverlayStyle”Supported geometry and presentation properties for Overlay.
interface OverlayStyle extends BoxStyle, LayoutItemStyleRelated API: OverlayStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/layout/overlay.ts:38
Properties and methods
Section titled “Properties and methods”
alignItems (optional)
alignItems?: OverlayAlignment | undefinedDefault alignment of children on the cross or block axis. See OverlayAlignment.
justifyItems (optional)
justifyItems?: OverlayAlignment | undefinedDefault inline-axis alignment of grid or overlay children. See OverlayAlignment.
left (optional)
left?: number | `${number}%` | undefinedLeft edge coordinate or inset. See Length.
View source — packages/core/src/lib/style/positioning.ts:127
top (optional)
top?: number | `${number}%` | undefinedTop edge value or top envelope guide. See Length.
View source — packages/core/src/lib/style/positioning.ts:129
width (optional)
width?: Length | undefinedRelated API: Length.
Horizontal extent in the units of the containing geometry or surface. See Length.
height (optional)
height?: Length | undefinedRelated API: Length.
Vertical extent in the units of the containing geometry or surface. See Length.
minWidth (optional)
minWidth?: number | `${number}%` | undefinedMinimum permitted width. See Length.
maxWidth (optional)
maxWidth?: number | `${number}%` | undefinedMaximum permitted width. See Length.
minHeight (optional)
minHeight?: number | `${number}%` | undefinedMinimum permitted height. See Length.
maxHeight (optional)
maxHeight?: number | `${number}%` | undefinedMaximum permitted height. See Length.
padding (optional)
padding?: EdgeValues | undefinedRelated API: EdgeValues.
Insets between the border box and content box. See EdgeValues.
overflow (optional)
overflow?: "clip" | "visible" | undefinedSelects "visible", "clip" for overflow. See BoxStyle.
alignSelf (optional)
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefinedThis child’s cross-axis or block-axis alignment override. See LayoutItemStyle.
justifySelf (optional)
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefinedThis child’s inline-axis alignment override. See LayoutItemStyle.
flexBasis (optional)
flexBasis?: Length | undefinedRelated API: Length.
Initial main-axis size before flex growth or shrinkage. See Length.
flexGrow (optional)
flexGrow?: number | undefinedRelative share of positive free space assigned to this child. See LayoutItemStyle.
flexShrink (optional)
flexShrink?: number | undefinedRelative factor used when reducing main-axis size. See LayoutItemStyle.
gridColumnStart (optional)
gridColumnStart?: number | undefinedExplicit starting grid column. See LayoutItemStyle.
gridColumnSpan (optional)
gridColumnSpan?: number | undefinedNumber of columns occupied by this child. See LayoutItemStyle.
gridRowStart (optional)
gridRowStart?: number | undefinedExplicit starting grid row. See LayoutItemStyle.
gridRowSpan (optional)
gridRowSpan?: number | undefinedNumber of rows occupied by this child. See LayoutItemStyle.
transition (optional)
transition?: PibblTransitionBinding | undefinedRelated API: PibblTransitionBinding.
Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
custom (optional)
custom?: unknownApplication-defined style payload passed through the runtime. See SystemStyle.
filter (optional)
filter?: PibblFilter | readonly PibblFilter[] | undefinedRelated API: PibblFilter.
Ordered pixel-only filters applied to the receiving primitive and its descendants. See PibblFilter.
FlowProps
Section titled “FlowProps”Authored inputs for Flow, including the declared data and presentation options.
interface FlowProps extends PibblStructuralEventPropsRelated API: FlowProps.
See also
Section titled “See also”View source — packages/core/src/lib/layout/flow.ts:67
Properties and methods
Section titled “Properties and methods”
children
children: PibblNodeInputRelated API: PibblNodeInput.
Descendant content or the callback that supplies it. See PibblNodeInput.
FlowStyle
Section titled “FlowStyle”Supported geometry and presentation properties for Flow.
interface FlowStyle extends BoxStyle, LayoutItemStyleRelated API: FlowStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/layout/flow.ts:48
Properties and methods
Section titled “Properties and methods”
direction (optional)
direction?: FlowDirection | undefinedDirection in which this operation proceeds. See FlowDirection.
wrap (optional)
wrap?: boolean | undefinedWhether content may wrap into additional lines. See FlowStyle.
gap (optional)
gap?: number | undefinedSpacing between adjacent items. See FlowStyle.
lineGap (optional)
lineGap?: number | undefinedSpace between wrapped flow lines. See FlowStyle.
alignItems (optional)
alignItems?: FlowAlignment | undefinedDefault alignment of children on the cross or block axis. See FlowAlignment.
left (optional)
left?: number | `${number}%` | undefinedLeft edge coordinate or inset. See Length.
View source — packages/core/src/lib/style/positioning.ts:127
top (optional)
top?: number | `${number}%` | undefinedTop edge value or top envelope guide. See Length.
View source — packages/core/src/lib/style/positioning.ts:129
width (optional)
width?: Length | undefinedRelated API: Length.
Horizontal extent in the units of the containing geometry or surface. See Length.
height (optional)
height?: Length | undefinedRelated API: Length.
Vertical extent in the units of the containing geometry or surface. See Length.
minWidth (optional)
minWidth?: number | `${number}%` | undefinedMinimum permitted width. See Length.
maxWidth (optional)
maxWidth?: number | `${number}%` | undefinedMaximum permitted width. See Length.
minHeight (optional)
minHeight?: number | `${number}%` | undefinedMinimum permitted height. See Length.
maxHeight (optional)
maxHeight?: number | `${number}%` | undefinedMaximum permitted height. See Length.
padding (optional)
padding?: EdgeValues | undefinedRelated API: EdgeValues.
Insets between the border box and content box. See EdgeValues.
overflow (optional)
overflow?: "clip" | "visible" | undefinedSelects "visible", "clip" for overflow. See BoxStyle.
alignSelf (optional)
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefinedThis child’s cross-axis or block-axis alignment override. See LayoutItemStyle.
justifySelf (optional)
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefinedThis child’s inline-axis alignment override. See LayoutItemStyle.
flexBasis (optional)
flexBasis?: Length | undefinedRelated API: Length.
Initial main-axis size before flex growth or shrinkage. See Length.
flexGrow (optional)
flexGrow?: number | undefinedRelative share of positive free space assigned to this child. See LayoutItemStyle.
flexShrink (optional)
flexShrink?: number | undefinedRelative factor used when reducing main-axis size. See LayoutItemStyle.
gridColumnStart (optional)
gridColumnStart?: number | undefinedExplicit starting grid column. See LayoutItemStyle.
gridColumnSpan (optional)
gridColumnSpan?: number | undefinedNumber of columns occupied by this child. See LayoutItemStyle.
gridRowStart (optional)
gridRowStart?: number | undefinedExplicit starting grid row. See LayoutItemStyle.
gridRowSpan (optional)
gridRowSpan?: number | undefinedNumber of rows occupied by this child. See LayoutItemStyle.
transition (optional)
transition?: PibblTransitionBinding | undefinedRelated API: PibblTransitionBinding.
Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
custom (optional)
custom?: unknownApplication-defined style payload passed through the runtime. See SystemStyle.
filter (optional)
filter?: PibblFilter | readonly PibblFilter[] | undefinedRelated API: PibblFilter.
Ordered pixel-only filters applied to the receiving primitive and its descendants. See PibblFilter.
FlexProps
Section titled “FlexProps”Authored inputs for Flex, including the declared data and presentation options.
interface FlexProps extends PibblStructuralEventPropsRelated API: FlexProps.
See also
Section titled “See also”View source — packages/core/src/lib/layout/flex.ts:89
Properties and methods
Section titled “Properties and methods”
children
children: PibblNodeInputRelated API: PibblNodeInput.
Descendant content or the callback that supplies it. See PibblNodeInput.
FlexStyle
Section titled “FlexStyle”Supported geometry and presentation properties for Flex.
interface FlexStyle extends BoxStyle, LayoutItemStyleRelated API: FlexStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/layout/flex.ts:61
Properties and methods
Section titled “Properties and methods”
width (optional)
width?: Length | undefinedRelated API: Length.
Horizontal extent in the units of the containing geometry or surface. See Length.
height (optional)
height?: Length | undefinedRelated API: Length.
Vertical extent in the units of the containing geometry or surface. See Length.
minWidth (optional)
minWidth?: number | `${number}%` | undefinedMinimum permitted width. See Length.
transition (optional)
transition?: PibblTransitionBinding | undefinedRelated API: PibblTransitionBinding.
Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
flexDirection (optional)
flexDirection?: FlexDirection | undefinedThe main axis along which flex children are placed. See FlexDirection.
flexWrap (optional)
flexWrap?: FlexWrap | undefinedWhether children may wrap onto additional flex lines. See FlexWrap.
justifyContent (optional)
justifyContent?: MainAlignment | undefinedDistribution of children along the main axis. See MainAlignment.
alignItems (optional)
alignItems?: CrossAlignment | undefinedDefault alignment of children on the cross or block axis. See CrossAlignment.
alignContent (optional)
alignContent?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefinedDistribution of wrapped flex lines within the available cross-axis space. See CrossAlignment, MainAlignment.
gap (optional)
gap?: number | undefinedSpacing between adjacent items. See FlexStyle.
rowGap (optional)
rowGap?: number | undefinedSpace between adjacent rows or items on the row axis. See FlexStyle.
columnGap (optional)
columnGap?: number | undefinedSpace between adjacent columns or items on the column axis. See FlexStyle.
left (optional)
left?: number | `${number}%` | undefinedLeft edge coordinate or inset. See Length.
View source — packages/core/src/lib/style/positioning.ts:127
top (optional)
top?: number | `${number}%` | undefinedTop edge value or top envelope guide. See Length.
View source — packages/core/src/lib/style/positioning.ts:129
maxWidth (optional)
maxWidth?: number | `${number}%` | undefinedMaximum permitted width. See Length.
minHeight (optional)
minHeight?: number | `${number}%` | undefinedMinimum permitted height. See Length.
maxHeight (optional)
maxHeight?: number | `${number}%` | undefinedMaximum permitted height. See Length.
padding (optional)
padding?: EdgeValues | undefinedRelated API: EdgeValues.
Insets between the border box and content box. See EdgeValues.
overflow (optional)
overflow?: "clip" | "visible" | undefinedSelects "visible", "clip" for overflow. See BoxStyle.
alignSelf (optional)
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefinedThis child’s cross-axis or block-axis alignment override. See LayoutItemStyle.
justifySelf (optional)
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefinedThis child’s inline-axis alignment override. See LayoutItemStyle.
flexBasis (optional)
flexBasis?: Length | undefinedRelated API: Length.
Initial main-axis size before flex growth or shrinkage. See Length.
flexGrow (optional)
flexGrow?: number | undefinedRelative share of positive free space assigned to this child. See LayoutItemStyle.
flexShrink (optional)
flexShrink?: number | undefinedRelative factor used when reducing main-axis size. See LayoutItemStyle.
gridColumnStart (optional)
gridColumnStart?: number | undefinedExplicit starting grid column. See LayoutItemStyle.
gridColumnSpan (optional)
gridColumnSpan?: number | undefinedNumber of columns occupied by this child. See LayoutItemStyle.
gridRowStart (optional)
gridRowStart?: number | undefinedExplicit starting grid row. See LayoutItemStyle.
gridRowSpan (optional)
gridRowSpan?: number | undefinedNumber of rows occupied by this child. See LayoutItemStyle.
custom (optional)
custom?: unknownApplication-defined style payload passed through the runtime. See SystemStyle.
filter (optional)
filter?: PibblFilter | readonly PibblFilter[] | undefinedRelated API: PibblFilter.
Ordered pixel-only filters applied to the receiving primitive and its descendants. See PibblFilter.
GridProps
Section titled “GridProps”Authored inputs for Grid, including the declared data and presentation options.
interface GridProps extends PibblStructuralEventPropsRelated API: GridProps.
See also
Section titled “See also”View source — packages/core/src/lib/layout/grid.ts:87
Properties and methods
Section titled “Properties and methods”
children
children: PibblNodeInputRelated API: PibblNodeInput.
Descendant content or the callback that supplies it. See PibblNodeInput.
GridStyle
Section titled “GridStyle”Supported geometry and presentation properties for Grid.
interface GridStyle extends BoxStyle, LayoutItemStyleRelated API: GridStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/layout/grid.ts:64
Properties and methods
Section titled “Properties and methods”
gridTemplateColumns
gridTemplateColumns: readonly GridTrack[]Related API: GridTrack.
Explicit grid column track definitions. See GridTrack.
gridTemplateRows
gridTemplateRows: readonly GridTrack[]Related API: GridTrack.
Explicit grid row track definitions. See GridTrack.
justifyItems (optional)
justifyItems?: GridAlignment | undefinedDefault inline-axis alignment of grid or overlay children. See GridAlignment.
alignItems (optional)
alignItems?: GridAlignment | undefinedDefault alignment of children on the cross or block axis. See GridAlignment.
gap (optional)
gap?: number | undefinedSpacing between adjacent items. See GridStyle.
rowGap (optional)
rowGap?: number | undefinedSpace between adjacent rows or items on the row axis. See GridStyle.
columnGap (optional)
columnGap?: number | undefinedSpace between adjacent columns or items on the column axis. See GridStyle.
width (optional)
width?: Length | undefinedRelated API: Length.
Horizontal extent in the units of the containing geometry or surface. See Length.
height (optional)
height?: Length | undefinedRelated API: Length.
Vertical extent in the units of the containing geometry or surface. See Length.
minWidth (optional)
minWidth?: number | `${number}%` | undefinedMinimum permitted width. See Length.
transition (optional)
transition?: PibblTransitionBinding | undefinedRelated API: PibblTransitionBinding.
Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
left (optional)
left?: number | `${number}%` | undefinedLeft edge coordinate or inset. See Length.
View source — packages/core/src/lib/style/positioning.ts:127
top (optional)
top?: number | `${number}%` | undefinedTop edge value or top envelope guide. See Length.
View source — packages/core/src/lib/style/positioning.ts:129
maxWidth (optional)
maxWidth?: number | `${number}%` | undefinedMaximum permitted width. See Length.
minHeight (optional)
minHeight?: number | `${number}%` | undefinedMinimum permitted height. See Length.
maxHeight (optional)
maxHeight?: number | `${number}%` | undefinedMaximum permitted height. See Length.
padding (optional)
padding?: EdgeValues | undefinedRelated API: EdgeValues.
Insets between the border box and content box. See EdgeValues.
overflow (optional)
overflow?: "clip" | "visible" | undefinedSelects "visible", "clip" for overflow. See BoxStyle.
alignSelf (optional)
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefinedThis child’s cross-axis or block-axis alignment override. See LayoutItemStyle.
justifySelf (optional)
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefinedThis child’s inline-axis alignment override. See LayoutItemStyle.
flexBasis (optional)
flexBasis?: Length | undefinedRelated API: Length.
Initial main-axis size before flex growth or shrinkage. See Length.
flexGrow (optional)
flexGrow?: number | undefinedRelative share of positive free space assigned to this child. See LayoutItemStyle.
flexShrink (optional)
flexShrink?: number | undefinedRelative factor used when reducing main-axis size. See LayoutItemStyle.
gridColumnStart (optional)
gridColumnStart?: number | undefinedExplicit starting grid column. See LayoutItemStyle.
gridColumnSpan (optional)
gridColumnSpan?: number | undefinedNumber of columns occupied by this child. See LayoutItemStyle.
gridRowStart (optional)
gridRowStart?: number | undefinedExplicit starting grid row. See LayoutItemStyle.
gridRowSpan (optional)
gridRowSpan?: number | undefinedNumber of rows occupied by this child. See LayoutItemStyle.
custom (optional)
custom?: unknownApplication-defined style payload passed through the runtime. See SystemStyle.
filter (optional)
filter?: PibblFilter | readonly PibblFilter[] | undefinedRelated API: PibblFilter.
Ordered pixel-only filters applied to the receiving primitive and its descendants. See PibblFilter.
GridTrack
Section titled “GridTrack”A fixed logical size, percentage of available space, or fractional share of remaining grid space.
type GridTrack = number | `${number}%` | `${number}fr`Related API: GridTrack.
See also
Section titled “See also”View source — packages/core/src/lib/layout/grid.ts:49
BoxStyle
Section titled “BoxStyle”Declared box dimensions, size limits, padding, and overflow behavior.
interface BoxStyle extends SystemStyleRelated API: BoxStyle, SystemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:79
Properties and methods
Section titled “Properties and methods”
width (optional)
width?: Length | undefinedRelated API: Length.
Horizontal extent in the units of the containing geometry or surface. See Length.
height (optional)
height?: Length | undefinedRelated API: Length.
Vertical extent in the units of the containing geometry or surface. See Length.
minWidth (optional)
minWidth?: number | `${number}%` | undefinedMinimum permitted width. See Length.
maxWidth (optional)
maxWidth?: number | `${number}%` | undefinedMaximum permitted width. See Length.
minHeight (optional)
minHeight?: number | `${number}%` | undefinedMinimum permitted height. See Length.
maxHeight (optional)
maxHeight?: number | `${number}%` | undefinedMaximum permitted height. See Length.
padding (optional)
padding?: EdgeValues | undefinedRelated API: EdgeValues.
Insets between the border box and content box. See EdgeValues.
overflow (optional)
overflow?: "clip" | "visible" | undefinedSelects "visible", "clip" for overflow. See BoxStyle.
transition (optional)
transition?: PibblTransitionBinding | undefinedRelated API: PibblTransitionBinding.
Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
custom (optional)
custom?: unknownApplication-defined style payload passed through the runtime. See SystemStyle.
filter (optional)
filter?: PibblFilter | readonly PibblFilter[] | undefinedRelated API: PibblFilter.
Ordered pixel-only filters applied to the receiving primitive and its descendants. See PibblFilter.
EdgeValues
Section titled “EdgeValues”One inset for every edge or independently specified top, right, bottom, and left insets.
type EdgeValues = | number | Readonly<{ /** Top edge value or top envelope guide. See {@link EdgeValues}. */ top?: number; /** Right edge coordinate or inset. See {@link EdgeValues}. */ right?: number; /** Bottom edge value or bottom envelope guide. See {@link EdgeValues}. */ bottom?: number; /** Left edge coordinate or inset. See {@link EdgeValues}. */ left?: number; }>Related API: EdgeValues.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:56
FlexItemStyle
Section titled “FlexItemStyle”The supported flex sizing and cross-axis alignment properties of a child.
type FlexItemStyle = Pick< LayoutItemStyle, 'flexBasis' | 'flexGrow' | 'flexShrink'> & { /** This child's cross-axis or block-axis alignment override. See {@link FlexItemStyle}. */ alignSelf?: 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center';}Related API: FlexItemStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:145
Properties and methods
Section titled “Properties and methods”
flexBasis (optional)
flexBasis?: Length | undefinedRelated API: Length.
Initial main-axis size before flex growth or shrinkage. See Length.
flexGrow (optional)
flexGrow?: number | undefinedRelative share of positive free space assigned to this child. See LayoutItemStyle.
flexShrink (optional)
flexShrink?: number | undefinedRelative factor used when reducing main-axis size. See LayoutItemStyle.
alignSelf (optional)
alignSelf?: "auto" | "center" | "flex-end" | "flex-start" | "stretch" | undefinedThis child’s cross-axis or block-axis alignment override. See FlexItemStyle.
GridItemStyle
Section titled “GridItemStyle”Explicit grid cell placement, spans, and alignment of a child.
interface GridItemStyle extends SystemStyleRelated API: GridItemStyle, SystemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:159
Properties and methods
Section titled “Properties and methods”
gridColumnStart (optional)
gridColumnStart?: number | undefinedExplicit starting grid column. See GridItemStyle.
gridColumnSpan (optional)
gridColumnSpan?: number | undefinedNumber of columns occupied by this child. See GridItemStyle.
gridRowStart (optional)
gridRowStart?: number | undefinedExplicit starting grid row. See GridItemStyle.
gridRowSpan (optional)
gridRowSpan?: number | undefinedNumber of rows occupied by this child. See GridItemStyle.
alignSelf (optional)
alignSelf?: "auto" | "center" | "end" | "start" | "stretch" | undefinedThis child’s cross-axis or block-axis alignment override. See GridItemStyle.
justifySelf (optional)
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefinedThis child’s inline-axis alignment override. See GridItemStyle.
transition (optional)
transition?: PibblTransitionBinding | undefinedRelated API: PibblTransitionBinding.
Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
custom (optional)
custom?: unknownApplication-defined style payload passed through the runtime. See SystemStyle.
filter (optional)
filter?: PibblFilter | readonly PibblFilter[] | undefinedRelated API: PibblFilter.
Ordered pixel-only filters applied to the receiving primitive and its descendants. See PibblFilter.
LayoutItemStyle
Section titled “LayoutItemStyle”Parent-layout participation: positioning, self-alignment, flex sizing, and explicit grid placement.
interface LayoutItemStyle extends PositioningStyleRelated API: LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:119
Properties and methods
Section titled “Properties and methods”
left (optional)
left?: number | `${number}%` | undefinedLeft edge coordinate or inset. See Length.
View source — packages/core/src/lib/style/positioning.ts:127
top (optional)
top?: number | `${number}%` | undefinedTop edge value or top envelope guide. See Length.
View source — packages/core/src/lib/style/positioning.ts:129
alignSelf (optional)
alignSelf?: "auto" | "center" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | undefinedThis child’s cross-axis or block-axis alignment override. See LayoutItemStyle.
justifySelf (optional)
justifySelf?: "auto" | "center" | "end" | "start" | "stretch" | undefinedThis child’s inline-axis alignment override. See LayoutItemStyle.
flexBasis (optional)
flexBasis?: Length | undefinedRelated API: Length.
Initial main-axis size before flex growth or shrinkage. See Length.
flexGrow (optional)
flexGrow?: number | undefinedRelative share of positive free space assigned to this child. See LayoutItemStyle.
flexShrink (optional)
flexShrink?: number | undefinedRelative factor used when reducing main-axis size. See LayoutItemStyle.
gridColumnStart (optional)
gridColumnStart?: number | undefinedExplicit starting grid column. See LayoutItemStyle.
gridColumnSpan (optional)
gridColumnSpan?: number | undefinedNumber of columns occupied by this child. See LayoutItemStyle.
gridRowStart (optional)
gridRowStart?: number | undefinedExplicit starting grid row. See LayoutItemStyle.
gridRowSpan (optional)
gridRowSpan?: number | undefinedNumber of rows occupied by this child. See LayoutItemStyle.
transition (optional)
transition?: PibblTransitionBinding | undefinedRelated API: PibblTransitionBinding.
Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
custom (optional)
custom?: unknownApplication-defined style payload passed through the runtime. See SystemStyle.
filter (optional)
filter?: PibblFilter | readonly PibblFilter[] | undefinedRelated API: PibblFilter.
Ordered pixel-only filters applied to the receiving primitive and its descendants. See PibblFilter.
Length
Section titled “Length”A layout length in logical units, a parent-relative percentage, or automatic sizing.
type Length = number | Percentage | 'auto'Related API: Length, Percentage.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:33
ResolvedBoxStyle
Section titled “ResolvedBoxStyle”Resolved border and content boxes after sizing and padding are applied.
interface ResolvedBoxStyleRelated API: ResolvedBoxStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:104
Properties and methods
Section titled “Properties and methods”
borderBox
borderBox: LayoutBoxRelated API: LayoutBox.
The resolved outer rectangle including padding. See LayoutBox.
contentBox
contentBox: LayoutBoxRelated API: LayoutBox.
The resolved rectangle available to content after padding. See LayoutBox.
Percentage
Section titled “Percentage”A percentage string resolved against the relevant parent layout dimension.
type Percentage = `${number}%`Related API: Percentage.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:24
LayoutDiagnosticContext
Section titled “LayoutDiagnosticContext”Component and source context attached to a layout diagnostic.
interface LayoutDiagnosticContextRelated API: LayoutDiagnosticContext.
See also
Section titled “See also”View source — packages/core/src/lib/style/diagnostics.ts:13
Properties and methods
Section titled “Properties and methods”
component (optional)
component?: string | undefinedComponent identity or diagnostic name associated with this value. See LayoutDiagnosticContext.
algorithm (optional)
algorithm?: string | undefinedName of the layout algorithm producing this diagnostic or resolution. See LayoutDiagnosticContext.
constraints (optional)
constraints?: Readonly<Constraints> | undefinedRelated API: Constraints.
Sizing limits and available dimensions for this operation. See Constraints.
LayoutDiagnosticInput
Section titled “LayoutDiagnosticInput”Validation-failure details used to construct a layout diagnostic.
interface LayoutDiagnosticInput extends LayoutDiagnosticContextRelated API: LayoutDiagnosticInput, LayoutDiagnosticContext.
See also
Section titled “See also”View source — packages/core/src/lib/style/diagnostics.ts:34
Properties and methods
Section titled “Properties and methods”
property
property: stringName of the affected input property. See LayoutDiagnosticInput.
value
value: unknownValue associated with this sample, input, or result. See LayoutDiagnosticInput.
reason
reason: stringReason the operation could not produce its ordinary result. See LayoutDiagnosticInput .
component (optional)
component?: string | undefinedComponent identity or diagnostic name associated with this value. See LayoutDiagnosticContext.
algorithm (optional)
algorithm?: string | undefinedName of the layout algorithm producing this diagnostic or resolution. See LayoutDiagnosticContext.
constraints (optional)
constraints?: Readonly<Constraints> | undefinedRelated API: Constraints.
Sizing limits and available dimensions for this operation. See Constraints.
Constraints
Section titled “Constraints”Available and limiting dimensions supplied to layout and measurement.
interface ConstraintsRelated API: Constraints.
See also
Section titled “See also”View source — packages/core/src/lib/layout/types.ts:29
Properties and methods
Section titled “Properties and methods”
minWidth
minWidth: numberMinimum permitted width. See Constraints.
maxWidth
maxWidth: numberMaximum permitted width. See Constraints.
minHeight
minHeight: numberMinimum permitted height. See Constraints.
maxHeight
maxHeight: numberMaximum permitted height. See Constraints.
Resolved numeric insets for the four sides of a box.
interface EdgesRelated API: Edges.
See also
Section titled “See also”View source — packages/core/src/lib/layout/types.ts:73
Properties and methods
Section titled “Properties and methods”
top
top: numberTop edge value or top envelope guide. See Edges.
right
right: numberRight edge coordinate or inset. See Edges.
bottom
bottom: numberBottom edge value or bottom envelope guide. See Edges.
left
left: numberLeft edge coordinate or inset. See Edges.
LayoutBox
Section titled “LayoutBox”An axis-aligned rectangle in the layout coordinate system.
interface LayoutBox extends SizeSee also
Section titled “See also”View source — packages/core/src/lib/layout/types.ts:48
Properties and methods
Section titled “Properties and methods”
x
x: numberHorizontal coordinate or displacement in the containing coordinate system. See LayoutBox.
y
y: numberVertical coordinate or displacement in the containing coordinate system. See LayoutBox .
width
width: numberHorizontal extent in the units of the containing geometry or surface. See Size.
height
height: numberVertical extent in the units of the containing geometry or surface. See Size.
Width and height in logical Canvas units.
interface SizeRelated API: Size.
See also
Section titled “See also”View source — packages/core/src/lib/layout/types.ts:15
Properties and methods
Section titled “Properties and methods”
width
width: numberHorizontal extent in the units of the containing geometry or surface. See Size.
height
height: numberVertical extent in the units of the containing geometry or surface. See Size.
CanvasMeasurementService
Section titled “CanvasMeasurementService”Canvas text measurement services supplied to pure layout measurement.
interface CanvasMeasurementServiceRelated API: CanvasMeasurementService.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:328
Properties and methods
Section titled “Properties and methods”
measureText
measureText: (text: string, font: string) => TextMetricsMeasures text using the requested Canvas font configuration. See CanvasMeasurementService.
Parameters
Section titled “Parameters”-
text— Text to measure. -
font— Canvas font string used for measurement.
Returns
Section titled “Returns”Canvas text metrics for the supplied text and font.
MeasureInput
Section titled “MeasureInput”Declared style, props, and constraints passed to a primitive’s measurement callback.
interface MeasureInput<P, S extends SystemStyle = SystemStyle>Related API: MeasureInput, SystemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:372
Properties and methods
Section titled “Properties and methods”
props
props: Readonly<P>Component props supplied to evaluation or measurement. See MeasureInput.
style
style: Readonly<S>Declared presentation and layout properties. See NormalizedStyle.
constraints
constraints: Readonly<Constraints>Related API: Constraints.
Sizing limits and available dimensions for this operation. See Constraints.
service
service: CanvasMeasurementServiceRelated API: CanvasMeasurementService.
Measurement services available while evaluating this input. See CanvasMeasurementService.
measureElement
measureElement: (element: PibblElement<any>, constraints: Readonly<Constraints>) => MeasureResultRelated API: measureElement, PibblElement, Constraints, MeasureResult.
Measures a nested element using the current measurement context. See MeasureResult.
Parameters
Section titled “Parameters”-
element— Child element to measure. See PibblElement. -
constraints— Available dimensions in logical units. See Constraints.
Returns
Section titled “Returns”Measured dimensions or an unsupported measurement result. See MeasureResult.
MeasureResult
Section titled “MeasureResult”Measured dimensions, or an explicit unsupported result with a diagnostic reason.
type MeasureResult = | { /** The literal "measured" identifying this variant. See {@link MeasureResult}. */ status: "measured"; /** Measured logical width and height. See {@link Size}. */ size: Readonly<Size>; } | { /** The literal "unsupported" identifying this variant. See {@link MeasureResult}. */ status: "unsupported"; /** Reason the operation could not produce its ordinary result. See {@link MeasureResult}. */ reason: string; }Related API: MeasureResult, Size.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:347
Properties and methods
Section titled “Properties and methods”
status
status: "measured" | "unsupported"The literal “measured” identifying this variant. See MeasureResult. The literal “unsupported” identifying this variant. See MeasureResult.
Implementation guidance for agents
Section titled “Implementation guidance for agents”Read the Drawing, layout, and effects companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.
Complete minimal examples
Section titled “Complete minimal examples”- Absolute and overlay layout: Position a block absolutely and center content within an overlay. Plain source
- Box resolution: Resolve padding, percentages, and a constrained box with typed diagnostics. Plain source
- Intrinsic measurement: Measure a Text element with a Canvas service and display its computed dimensions. Plain source
- Flow and flex layout: Stack a banner with a flexible row of marks. Plain source
- Grid and responsive style: Place marks on explicit grid tracks and apply a local width rule. Plain source
- Allocated layout box: Read the current canvas allocation and draw an inset panel. Plain source
Documentation version
Section titled “Documentation version”Documentation built with @pibbl/core 0.0.2, revision 380919b. ALPHA — NOT FOR PRODUCTION USE.