Style and primitive types
Styles are local, closed contracts: there is no inheritance or cascade. Author
input is specified, then normalized, then resolved against a finite allocation.
definePrimitive exposes the extension seam without turning Pibbl into a retained
scene graph.
ArcStyle
Section titled “ArcStyle”ArcStyle is the stroke-only local style for an open circular sweep: radius,
finite radian angles, optional center/direction, paint, and interaction fields.
CircleStyle
Section titled “CircleStyle”CircleStyle requires radius and accepts optional cx/cy, local paint,
events, focus geometry, and applicable declared-box fields.
ClipStyle
Section titled “ClipStyle”ClipStyle supplies a clipping Path2D, fill rule, local composition fields,
and applicable filter behavior for Clip.
CursorStyle
Section titled “CursorStyle”CursorStyle is the local CSS cursor vocabulary used by primitives and the
cursor hook; cursor regions use original logical geometry.
EllipseStyle
Section titled “EllipseStyle”EllipseStyle requires radiusX and radiusY and accepts optional center and
finite radian rotation with local paint and interaction fields.
FillStyle
Section titled “FillStyle”FillStyle is the shared local fill-paint vocabulary.
GStyle
Section titled “GStyle”GStyle is the local transform/composition style for Group.
HorizontalLineStyle
Section titled “HorizontalLineStyle”HorizontalLineStyle is the local stroke and allocation-aware endpoint style
for HorizontalLine.
ImgStyle
Section titled “ImgStyle”ImgStyle is the local geometry, border, paint, and interaction style for
browser-decoded images.
LayerStyle
Section titled “LayerStyle”LayerStyle is the local presentation style for persistent offscreen Layer
content, including its composition-boundary filter behavior.
LineStyle
Section titled “LineStyle”LineStyle is the local numeric-coordinate and stroke-interaction style for a
polyline Line.
NormalizedStyle
Section titled “NormalizedStyle”NormalizedStyle is Pibbl’s immutable parsed style stage: shorthands and
component defaults are resolved, but no parent-derived geometry is retained.
PaintStyle
Section titled “PaintStyle”PaintStyle is the shared local paint vocabulary, including opacity and
applicable Canvas painting settings.
PathStyle
Section titled “PathStyle”PathStyle is the local paint and interaction style for a caller-owned Path2D.
PibblResponsiveStyle
Section titled “PibblResponsiveStyle”PibblResponsiveStyle<S> is the primitive’s ordinary signal-capable style plus an
optional readonly when list. Required base fields stay required. Whole-style
signals and signals in base or patch fields are supported; conditions and lists
are plain values. Use satisfies PibblResponsiveStyle<FlowStyle> for reusable
styles. Unmatched patch signals are not read. No styles cascade or inherit.
The responsive local styles guide explains
outer placement versus inner content. Custom primitives must leave when out
of their specified, normalized, and resolved styles: Pibbl supplies that field on
inputs and removes it before callbacks.
PibblSizeQuery
Section titled “PibblSizeQuery”PibblSizeQuery requires at least one inclusive, finite nonnegative bound:
minWidth, maxWidth, minHeight, or maxHeight. All bounds must match the
available containing size in logical units. A direct Grid item’s rules see the
Grid content box; rules inside the placed component see its assigned cell.
PibblStyleRule
Section titled “PibblStyleRule”PibblStyleRule<S> pairs a query with a partial local style patch. Matching
patches apply in list order, with the last assignment winning. Patches cannot
contain another when; objects and arrays replace rather than deep-merge.
PixelGridAlignment
Section titled “PixelGridAlignment”PixelGridAlignment is "none" | "round" | "ceil" | "floor", the supported
numeric alignment modes for path helpers and applicable primitive geometry.
PolygonStyle
Section titled “PolygonStyle”PolygonStyle requires finite numeric coordinate pairs and supports local
paint, interaction, and rounded-corner fields; fewer than three points are
safe empty geometry.
PrimitiveCapabilities
Section titled “PrimitiveCapabilities”PrimitiveCapabilities declares the optional normalization, resolution, and
pure measurement capabilities of a primitive made with definePrimitive.
PrimitiveInput
Section titled “PrimitiveInput”PrimitiveInput is the public element input shape for a primitive’s props and
local style.
PrimitiveInputOf
Section titled “PrimitiveInputOf”PrimitiveInputOf<T> derives that public input shape from a primitive type.
PrimitiveProgramProps
Section titled “PrimitiveProgramProps”PrimitiveProgramProps is the props portion of a primitive input after Pibbl’s
reserved key and style metadata are separated.
PrimitiveRender
Section titled “PrimitiveRender”PrimitiveRender is the render callback contract supplied to definePrimitive.
It executes in Pibbl’s isolated render traversal, not as a standalone function.
RectStyle
Section titled “RectStyle”RectStyle is the local signed-box, paint, interaction, and rounded-corner
style for Rectangle.
RegularPolygonStyle
Section titled “RegularPolygonStyle”RegularPolygonStyle requires integer sides and exactly one of circumradius,
inradius, or side length, with local paint and rounded-corner fields.
ResolvedStyle
Section titled “ResolvedStyle”ResolvedStyle is Pibbl’s immutable finite style stage for the current containing
box and allocation; it is passed to primitive rendering.
RoundedCornerStyle
Section titled “RoundedCornerStyle”RoundedCornerStyle is the shared component corner vocabulary. Per-corner
entries fall back through cornerRadii?.[i] ?? cornerRadius ?? 0.
SpecifiedStyle
Section titled “SpecifiedStyle”SpecifiedStyle is the immutable author-supplied local style stored on an
element before parsing and resolution.
StarStyle
Section titled “StarStyle”StarStyle requires integer points and ordered nonnegative outer/inner radii,
forming one concave alternating outline rather than intersecting triangles.
StrokeStyle
Section titled “StrokeStyle”StrokeStyle is the shared local stroke-paint and interaction-width vocabulary.
StyleResolutionContext
Section titled “StyleResolutionContext”StyleResolutionContext gives primitive style resolution its allocation,
percentage basis, constraints, component identity, and algorithm context.
SvgPathStyle
Section titled “SvgPathStyle”SvgPathStyle is the local paint and interaction style for browser-parsed SVG
path-data geometry.
SystemStyle
Section titled “SystemStyle”SystemStyle is the opt-in base style with optional custom and framework-
owned filter. It has no index signature, so component styles remain closed.
TextStyle
Section titled “TextStyle”TextStyle is the local paint, wrapping, fitting, and measurement style for
recursive textual content.
VerticalLineStyle
Section titled “VerticalLineStyle”VerticalLineStyle is the local stroke and allocation-aware endpoint style for
VerticalLine.
WedgeStyle
Section titled “WedgeStyle”WedgeStyle is the local center-closed circular-sector style. Partial sweeps
include radial edges; full turns omit them for a seam-free circular stroke.
API details from source
Section titled “API details from source”
ArcStyle
Section titled “ArcStyle”Supported geometry and presentation properties for Arc.
interface ArcStyle extends SystemStyle, Omit<PaintStyle, "fill">, CursorStyle, BoxStyle, LayoutItemStyleRelated API: ArcStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/arc.ts:55
Properties and methods
Section titled “Properties and methods”
radius
radius: number | `${number}%`Radius in the coordinate system of this geometry or effect. See Length.
startAngle
startAngle: numberAngle at which the arc or slice begins. See ArcStyle.
endAngle
endAngle: numberAngle at which the arc or slice ends. See ArcStyle.
cx (optional)
cx?: number | `${number}%` | undefinedHorizontal coordinate of the center. See Length.
cy (optional)
cy?: number | `${number}%` | undefinedVertical coordinate of the center. See Length.
counterclockwise (optional)
counterclockwise?: boolean | undefinedWhether the arc follows the counterclockwise direction. See ArcStyle.
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See ArcStyle.
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.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
CircleStyle
Section titled “CircleStyle”Supported geometry and presentation properties for Circle.
interface CircleStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyleRelated API: CircleStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/circle.ts:50
Properties and methods
Section titled “Properties and methods”
radius
radius: number | `${number}%`Radius in the coordinate system of this geometry or effect. See Length.
cx (optional)
cx?: number | `${number}%` | undefinedHorizontal coordinate of the center. See Length.
cy (optional)
cy?: number | `${number}%` | undefinedVertical coordinate of the center. See Length.
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See CircleStyle.
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.
fill (optional)
fill?: FillStyle | undefinedRelated API: FillStyle.
Paint used for the interior. See FillStyle.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
ClipStyle
Section titled “ClipStyle”Supported geometry and presentation properties for Clip.
interface ClipStyle extends SystemStyle, BoxStyle, LayoutItemStyleRelated API: ClipStyle, SystemStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/clip.ts:38
Properties and methods
Section titled “Properties and methods”
d
d: Path2D | PathGeometryRelated API: PathGeometry.
Geometry to draw or clip, supplied in the declared path representation. See PathGeometry.
fillRule (optional)
fillRule?: CanvasFillRule | undefinedCanvas winding rule used to determine the path interior. See ClipStyle.
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.
EllipseStyle
Section titled “EllipseStyle”Supported geometry and presentation properties for Ellipse.
interface EllipseStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyleRelated API: EllipseStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/ellipse.ts:50
Properties and methods
Section titled “Properties and methods”
radiusX
radiusX: number | `${number}%`Horizontal ellipse radius. See Length.
View source — packages/core/src/lib/components/ellipse.ts:53
radiusY
radiusY: number | `${number}%`Vertical ellipse radius. See Length.
View source — packages/core/src/lib/components/ellipse.ts:55
cx (optional)
cx?: number | `${number}%` | undefinedHorizontal coordinate of the center. See Length.
View source — packages/core/src/lib/components/ellipse.ts:57
cy (optional)
cy?: number | `${number}%` | undefinedVertical coordinate of the center. See Length.
View source — packages/core/src/lib/components/ellipse.ts:59
rotation (optional)
rotation?: number | undefinedRotation applied to the containing geometry. See EllipseStyle.
View source — packages/core/src/lib/components/ellipse.ts:61
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See EllipseStyle.
View source — packages/core/src/lib/components/ellipse.ts:66
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.
fill (optional)
fill?: FillStyle | undefinedRelated API: FillStyle.
Paint used for the interior. See FillStyle.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
GStyle
Section titled “GStyle”Transforms, layout participation, and shared style properties for Group.
interface GStyle extends SystemStyle, BoxStyle, LayoutItemStyleRelated API: GStyle, SystemStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/g.ts:43
Properties and methods
Section titled “Properties and methods”
scaleX (optional)
scaleX?: number | undefinedHorizontal scale factor. See GStyle.
scaleY (optional)
scaleY?: number | undefinedVertical scale factor. See GStyle.
rotationDegrees (optional)
rotationDegrees?: number | undefinedClockwise rotation in degrees.
rotationOrigin (optional)
rotationOrigin?: [number, number] | undefinedPoint around which the rotation is applied. See GStyle.
translateX (optional)
translateX?: number | undefinedHorizontal translation in the current logical coordinate system. See GStyle.
translateY (optional)
translateY?: number | undefinedVertical translation in the current logical coordinate system. See GStyle.
skewX (optional)
skewX?: number | undefinedHorizontal skew angle in degrees.
skewY (optional)
skewY?: number | undefinedVertical skew angle in degrees.
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.
HorizontalLineStyle
Section titled “HorizontalLineStyle”Supported geometry and presentation properties for HorizontalLine.
interface HorizontalLineStyle extends SystemStyle, BoxStyle, LayoutItemStyle, Omit<LineStyle, 'coords'>Related API: HorizontalLineStyle, SystemStyle, BoxStyle, LayoutItemStyle, LineStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/horizontal-line.ts:50
Properties and methods
Section titled “Properties and methods”
y
y: number | `${number}%`Vertical coordinate or displacement in the containing coordinate system. See Length.
View source — packages/core/src/lib/components/horizontal-line.ts:55
x1 (optional)
x1?: number | `${number}%` | undefinedHorizontal coordinate of the first endpoint. See Length.
View source — packages/core/src/lib/components/horizontal-line.ts:57
x2 (optional)
x2?: number | `${number}%` | undefinedHorizontal coordinate of the second endpoint. See Length.
View source — packages/core/src/lib/components/horizontal-line.ts:59
alignToPixelGrid (optional)
alignToPixelGrid?: PixelGridAlignment | undefinedRelated API: PixelGridAlignment.
Pixel-grid alignment policy applied to the resolved geometry. See PixelGridAlignment.
View source — packages/core/src/lib/components/horizontal-line.ts:63
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See HorizontalLineStyle.
View source — packages/core/src/lib/components/horizontal-line.ts:68
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.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
LayerStyle
Section titled “LayerStyle”Supported geometry and presentation properties for Layer.
interface LayerStyle extends SystemStyle, BoxStyle, LayoutItemStyleRelated API: LayerStyle, SystemStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/layer.ts:67
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
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.
LineStyle
Section titled “LineStyle”Supported geometry and presentation properties for Line.
interface LineStyle extends SystemStyle, BoxStyle, LayoutItemStyle, Omit<PaintStyle, 'fill'>, CursorStyleRelated API: LineStyle, SystemStyle, BoxStyle, LayoutItemStyle, PaintStyle, CursorStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/line.ts:51
Properties and methods
Section titled “Properties and methods”
coords
coords: [number, number][]Ordered coordinate pairs describing the path vertices. See LineStyle.
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See LineStyle.
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.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
PolygonStyle
Section titled “PolygonStyle”Supported geometry and presentation properties for Polygon.
interface PolygonStyle extends RoundedCornerStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyleRelated API: PolygonStyle, RoundedCornerStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/polygon.ts:49
Properties and methods
Section titled “Properties and methods”
coords
coords: [number, number][]Ordered coordinate pairs describing the path vertices. See PolygonStyle.
View source — packages/core/src/lib/components/polygon.ts:58
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See PolygonStyle.
View source — packages/core/src/lib/components/polygon.ts:63
cornerRadius (optional)
cornerRadius?: number | `${number}%` | undefinedUniform corner radius used where no per-corner override is supplied. See Length.
cornerRadii (optional)
cornerRadii?: readonly (number | `${number}%` | null | undefined)[] | undefinedPer-corner radii; nullish entries use the uniform corner radius. See Length.
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.
fill (optional)
fill?: FillStyle | undefinedRelated API: FillStyle.
Paint used for the interior. See FillStyle.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
RegularPolygonStyle
Section titled “RegularPolygonStyle”Supported geometry and presentation properties for RegularPolygon.
type RegularPolygonStyle = RegularPolygonCommonStyle & RegularPolygonSizeStyle & SystemStyle & PaintStyle & CursorStyle & BoxStyle & LayoutItemStyleRelated API: RegularPolygonStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/regular-polygon.ts:130
Properties and methods
Section titled “Properties and methods”
sides
sides: numberNumber of sides of the regular polygon. See RegularPolygonCommonStyle.
View source — packages/core/src/lib/components/regular-polygon.ts:57
cx (optional)
cx?: number | `${number}%` | undefinedHorizontal coordinate of the center. See Length.
View source — packages/core/src/lib/components/regular-polygon.ts:59
cy (optional)
cy?: number | `${number}%` | undefinedVertical coordinate of the center. See Length.
View source — packages/core/src/lib/components/regular-polygon.ts:61
rotation (optional)
rotation?: number | undefinedRotation applied to the containing geometry. See RegularPolygonCommonStyle.
View source — packages/core/src/lib/components/regular-polygon.ts:63
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See RegularPolygonCommonStyle.
View source — packages/core/src/lib/components/regular-polygon.ts:68
cornerRadius (optional)
cornerRadius?: number | `${number}%` | undefinedUniform corner radius used where no per-corner override is supplied. See Length.
cornerRadii (optional)
cornerRadii?: readonly (number | `${number}%` | null | undefined)[] | undefinedPer-corner radii; nullish entries use the uniform corner radius. See Length.
circumradius (optional)
circumradius?: number | `${number}%` | undefinedDistance from the polygon center to a vertex. See Length. Not accepted in this variant; use the alternative fields instead. See RegularPolygonSizeStyle.
View source — packages/core/src/lib/components/regular-polygon.ts:79
inradius (optional)
inradius?: number | `${number}%` | undefinedNot accepted in this variant; use the alternative fields instead. See RegularPolygonSizeStyle. Distance from the polygon center to an edge. See Length.
View source — packages/core/src/lib/components/regular-polygon.ts:84
sideLength (optional)
sideLength?: number | `${number}%` | undefinedNot accepted in this variant; use the alternative fields instead. See RegularPolygonSizeStyle. Length of one polygon edge. See Length.
View source — packages/core/src/lib/components/regular-polygon.ts:89
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.
fill (optional)
fill?: FillStyle | undefinedRelated API: FillStyle.
Paint used for the interior. See FillStyle.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
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.
StarStyle
Section titled “StarStyle”Supported geometry and presentation properties for Star.
interface StarStyle extends RoundedCornerStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyleRelated API: StarStyle, RoundedCornerStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/star.ts:61
Properties and methods
Section titled “Properties and methods”
points
points: numberPoints defining the geometry or reported by the contact query. See StarStyle.
cx (optional)
cx?: number | `${number}%` | undefinedHorizontal coordinate of the center. See Length.
cy (optional)
cy?: number | `${number}%` | undefinedVertical coordinate of the center. See Length.
outerRadius
outerRadius: number | `${number}%`Radius of the outer boundary. See Length.
innerRadius
innerRadius: number | `${number}%`Radius of the inner boundary. See Length.
rotation (optional)
rotation?: number | undefinedRotation applied to the containing geometry. See StarStyle.
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See StarStyle.
cornerRadii (optional)
cornerRadii?: readonly (number | `${number}%` | null | undefined)[] | undefinedPer-corner radii; nullish entries use the uniform corner radius. See Length.
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
cornerRadius (optional)
cornerRadius?: number | `${number}%` | undefinedUniform corner radius used where no per-corner override is supplied. See Length.
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.
fill (optional)
fill?: FillStyle | undefinedRelated API: FillStyle.
Paint used for the interior. See FillStyle.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
VerticalLineStyle
Section titled “VerticalLineStyle”Supported geometry and presentation properties for VerticalLine.
interface VerticalLineStyle extends SystemStyle, BoxStyle, LayoutItemStyle, Omit<LineStyle, 'coords'>Related API: VerticalLineStyle, SystemStyle, BoxStyle, LayoutItemStyle, LineStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/vertical-line.ts:50
Properties and methods
Section titled “Properties and methods”
x
x: number | `${number}%`Horizontal coordinate or displacement in the containing coordinate system. See Length .
View source — packages/core/src/lib/components/vertical-line.ts:56
y1 (optional)
y1?: number | `${number}%` | undefinedVertical coordinate of the first endpoint. See Length.
View source — packages/core/src/lib/components/vertical-line.ts:58
y2 (optional)
y2?: number | `${number}%` | undefinedVertical coordinate of the second endpoint. See Length.
View source — packages/core/src/lib/components/vertical-line.ts:60
alignToPixelGrid (optional)
alignToPixelGrid?: PixelGridAlignment | undefinedRelated API: PixelGridAlignment.
Pixel-grid alignment policy applied to the resolved geometry. See PixelGridAlignment.
View source — packages/core/src/lib/components/vertical-line.ts:64
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See VerticalLineStyle.
View source — packages/core/src/lib/components/vertical-line.ts:69
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.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
WedgeStyle
Section titled “WedgeStyle”Supported geometry and presentation properties for Wedge.
interface WedgeStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyleRelated API: WedgeStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/components/wedge.ts:55
Properties and methods
Section titled “Properties and methods”
radius
radius: number | `${number}%`Radius in the coordinate system of this geometry or effect. See Length.
startAngle
startAngle: numberAngle at which the arc or slice begins. See WedgeStyle.
endAngle
endAngle: numberAngle at which the arc or slice ends. See WedgeStyle.
cx (optional)
cx?: number | `${number}%` | undefinedHorizontal coordinate of the center. See Length.
cy (optional)
cy?: number | `${number}%` | undefinedVertical coordinate of the center. See Length.
counterclockwise (optional)
counterclockwise?: boolean | undefinedWhether the arc follows the counterclockwise direction. See WedgeStyle.
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See WedgeStyle.
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.
fill (optional)
fill?: FillStyle | undefinedRelated API: FillStyle.
Paint used for the interior. See FillStyle.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
CursorStyle
Section titled “CursorStyle”Cursor presentation for an interactive primitive.
interface CursorStyle extends SystemStyleRelated API: CursorStyle, SystemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:210
Properties and methods
Section titled “Properties and methods”
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
ImgStyle
Section titled “ImgStyle”Image source, sizing, opacity, outline, and pixel-grid alignment.
interface ImgStyle extends SystemStyle, CursorStyle, BoxStyle, LayoutItemStyleRelated API: ImgStyle, SystemStyle, CursorStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:343
Properties and methods
Section titled “Properties and methods”
src
src: stringImage URL loaded by the drawing primitive. See ImgStyle.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See ImgStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See ImgStyle.
alignToPixelGrid (optional)
alignToPixelGrid?: PixelGridAlignment | undefinedRelated API: PixelGridAlignment.
Pixel-grid alignment policy applied to the resolved geometry. See PixelGridAlignment.
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.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
PaintStyle
Section titled “PaintStyle”Fill, stroke, stroke width, and opacity shared by drawing primitives.
interface PaintStyle extends SystemStyleRelated API: PaintStyle, SystemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:191
Properties and methods
Section titled “Properties and methods”
fill (optional)
fill?: FillStyle | undefinedRelated API: FillStyle.
Paint used for the interior. See FillStyle.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
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.
PathStyle
Section titled “PathStyle”Geometry, paint, layout, and interaction width for drawing a path.
interface PathStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyleRelated API: PathStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:225
Properties and methods
Section titled “Properties and methods”
d
d: Path2D | PathGeometryRelated API: PathGeometry.
Geometry to draw or clip, supplied in the declared path representation. See PathGeometry.
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See PathStyle.
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.
fill (optional)
fill?: FillStyle | undefinedRelated API: FillStyle.
Paint used for the interior. See FillStyle.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
RectStyle
Section titled “RectStyle”Rectangle dimensions, paint, corner rounding, and pixel-grid alignment.
interface RectStyle extends RoundedCornerStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyleRelated API: RectStyle, RoundedCornerStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:251
Properties and methods
Section titled “Properties and methods”
width
width: LengthRelated API: Length.
Horizontal extent in the units of the containing geometry or surface. See Length.
height
height: LengthRelated API: Length.
Vertical extent in the units of the containing geometry or surface. See Length.
alignToPixelGrid (optional)
alignToPixelGrid?: PixelGridAlignment | undefinedRelated API: PixelGridAlignment.
Pixel-grid alignment policy applied to the resolved geometry. See PixelGridAlignment.
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See RectStyle.
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
cornerRadius (optional)
cornerRadius?: number | `${number}%` | undefinedUniform corner radius used where no per-corner override is supplied. See Length.
cornerRadii (optional)
cornerRadii?: readonly (number | `${number}%` | null | undefined)[] | undefinedPer-corner radii; nullish entries use the uniform corner radius. 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.
fill (optional)
fill?: FillStyle | undefinedRelated API: FillStyle.
Paint used for the interior. See FillStyle.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
SvgPathStyle
Section titled “SvgPathStyle”SVG path data together with paint, layout, and interaction styling.
interface SvgPathStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyleRelated API: SvgPathStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:284
Properties and methods
Section titled “Properties and methods”
d
d: stringGeometry to draw or clip, supplied in the declared path representation. See SvgPathStyle.
lineInteractionWidth (optional)
lineInteractionWidth?: number | undefinedWidth used for line hit testing independently of the visible stroke width. See SvgPathStyle.
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.
fill (optional)
fill?: FillStyle | undefinedRelated API: FillStyle.
Paint used for the interior. See FillStyle.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
TextStyle
Section titled “TextStyle”Font, alignment, wrapping, overflow fitting, paint, and layout of Canvas text.
interface TextStyle extends SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyleRelated API: TextStyle, SystemStyle, PaintStyle, CursorStyle, BoxStyle, LayoutItemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:316
Properties and methods
Section titled “Properties and methods”
lineHeight (optional)
lineHeight?: number | undefinedSpacing between successive text lines. See TextStyle.
wrap (optional)
wrap?: boolean | undefinedWhether content may wrap into additional lines. See TextStyle.
fit (optional)
fit?: TextFit | undefinedRelated API: TextFit.
Policy for fitting content within its available box. See TextFit.
font (optional)
font?: string | undefinedCanvas font string used to draw or measure text. See TextStyle.
textBaseline (optional)
textBaseline?: CanvasTextBaseline | undefinedCanvas baseline used when placing text. See TextStyle.
textAlign (optional)
textAlign?: CanvasTextAlign | undefinedCanvas horizontal alignment used when placing text. See TextStyle.
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.
fill (optional)
fill?: FillStyle | undefinedRelated API: FillStyle.
Paint used for the interior. See FillStyle.
stroke (optional)
stroke?: StrokeStyle | undefinedRelated API: StrokeStyle.
Paint used for the outline. See StrokeStyle.
strokeWidth (optional)
strokeWidth?: number | undefinedWidth of the painted outline. See PaintStyle.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See PaintStyle.
cursor (optional)
cursor?: string | undefinedCursor shown while this target owns pointer presentation. See CursorStyle.
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.
RoundedCornerStyle
Section titled “RoundedCornerStyle”Uniform and per-vertex corner radii for supported drawing primitives.
interface RoundedCornerStyleRelated API: RoundedCornerStyle.
See also
Section titled “See also”View source — packages/core/src/lib/style/types.ts:43
Properties and methods
Section titled “Properties and methods”
cornerRadius (optional)
cornerRadius?: number | `${number}%` | undefinedUniform corner radius used where no per-corner override is supplied. See Length.
cornerRadii (optional)
cornerRadii?: readonly (number | `${number}%` | null | undefined)[] | undefinedPer-corner radii; nullish entries use the uniform corner radius. See Length.
PibblSizeQuery
Section titled “PibblSizeQuery”Conditions on the available containing size, in logical units. All bounds are inclusive.
Full type declaration
type PibblSizeQuery = Readonly< { /** Minimum permitted width. See {@link PibblSizeQuery}. */ minWidth?: number; /** Maximum permitted width. See {@link PibblSizeQuery}. */ maxWidth?: number; /** Minimum permitted height. See {@link PibblSizeQuery}. */ minHeight?: number; /** Maximum permitted height. See {@link PibblSizeQuery}. */ maxHeight?: number; } & ( | { /** Minimum permitted width. See {@link PibblSizeQuery}. */ minWidth: number; } | { /** Maximum permitted width. See {@link PibblSizeQuery}. */ maxWidth: number; } | { /** Minimum permitted height. See {@link PibblSizeQuery}. */ minHeight: number; } | { /** Maximum permitted height. See {@link PibblSizeQuery}. */ maxHeight: number; } )>Related API: PibblSizeQuery.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:163
Properties and methods
Section titled “Properties and methods”
minWidth (optional)
minWidth?: number | undefinedMinimum permitted width. See PibblSizeQuery.
maxWidth (optional)
maxWidth?: number | undefinedMaximum permitted width. See PibblSizeQuery.
minHeight (optional)
minHeight?: number | undefinedMinimum permitted height. See PibblSizeQuery.
maxHeight (optional)
maxHeight?: number | undefinedMaximum permitted height. See PibblSizeQuery.
PibblStyleRule
Section titled “PibblStyleRule”A conditional style contribution selected by a responsive size query.
type PibblStyleRule<S extends SystemStyle> = Readonly<{ /** Query that selects a style rule or resolves a hover result. See {@link PibblSizeQuery}. */ query: PibblSizeQuery; /** Declared presentation and layout properties. See {@link SignalStyle}. */ style: Partial<SignalStyle<S>> & { /** Not accepted in this variant; use the alternative fields instead. See {@link PibblStyleRule}. */ readonly when?: never; };}>Related API: PibblStyleRule, SystemStyle, PibblSizeQuery.
See also
Section titled “See also”SignalStyle
View source — packages/core/src/lib/types.ts:201
Properties and methods
Section titled “Properties and methods”
query
query: PibblSizeQueryRelated API: PibblSizeQuery.
Query that selects a style rule or resolves a hover result. See PibblSizeQuery.
style
style: Partial<Readonly<{ [K in keyof S]: K extends "custom" ? S[K] : SignalValue<S[K]>; }>> & { readonly when?: never; }Related API: SignalValue.
Declared presentation and layout properties. See SignalStyle.
PibblResponsiveStyle
Section titled “PibblResponsiveStyle”Local ordered patches. Layout-item rules query the parent; internal rules query the assigned box.
type PibblResponsiveStyle<S extends SystemStyle> = SignalStyle<S> & Readonly<{ /** * Ordered local patches against the available containing size, not this * receiver's final size. All matches merge in order; later fields win. * Hoist stable lists for Layer cache reuse. Intrinsic responsive measurement * is unsupported: use a definite allocation and adapt its inner content. */ when?: readonly PibblStyleRule<S>[];}>Related API: PibblResponsiveStyle, SystemStyle, Layer, PibblStyleRule.
See also
Section titled “See also”SignalStyle
View source — packages/core/src/lib/types.ts:219
Properties and methods
Section titled “Properties and methods”
transition (optional)
transition?: { [K in keyof S]: K extends "custom" ? S[K] : SignalValue<S[K]>; }["transition"] | undefinedRelated API: SignalValue.
Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
custom (optional)
custom?: { [K in keyof S]: K extends "custom" ? S[K] : SignalValue<S[K]>; }["custom"] | undefinedRelated API: SignalValue.
Application-defined style payload passed through the runtime. See SystemStyle.
filter (optional)
filter?: { [K in keyof S]: K extends "custom" ? S[K] : SignalValue<S[K]>; }["filter"] | undefinedRelated API: SignalValue.
Ordered pixel-only filters applied to the receiving primitive and its descendants. See PibblFilter.
when (optional)
when?: readonly Readonly<{ query: PibblSizeQuery; style: Partial<Readonly<{ [K in keyof S]: K extends "custom" ? S[K] : SignalValue<S[K]>; }>> & { readonly when?: never; }; }>[] | undefinedRelated API: PibblSizeQuery, SignalValue.
Ordered local patches against the available containing size, not this receiver’s final size. All matches merge in order; later fields win. Hoist stable lists for Layer cache reuse. Intrinsic responsive measurement is unsupported: use a definite allocation and adapt its inner content.
PrimitiveInputOf
Section titled “PrimitiveInputOf”Extracts the authored-input type from a branded primitive component.
type PrimitiveInputOf<C> = C extends PibblPrimitiveComponent<any, infer I> ? I : neverRelated API: PrimitiveInputOf, PibblPrimitiveComponent.
See also
Section titled “See also”View source — packages/core/src/lib/element/types.ts:141
PrimitiveCapabilities
Section titled “PrimitiveCapabilities”Declares the style and measurement features supported by a custom primitive.
interface PrimitiveCapabilities<P, S extends SystemStyle = SystemStyle, N extends SystemStyle = S, R extends SystemStyle = N>Related API: PrimitiveCapabilities, SystemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:429
Properties and methods
Section titled “Properties and methods”
preserveSignalProps (optional)
preserveSignalProps?: readonly PreservedSignalPropKey<P>[] | undefinedNames props whose signal identity is preserved for the primitive program. See PreservedSignalPropKey.
childInput (optional)
childInput?: "structural" | "text" | undefinedDeclares how the primitive receives and resolves its children. See PrimitiveCapabilities.
normalizeStyle (optional)
normalizeStyle?: ((style: SpecifiedStyle<S>) => NormalizedStyle<N>) | undefinedRelated API: SpecifiedStyle, NormalizedStyle.
Applies primitive defaults and shorthand normalization before layout resolution. See SpecifiedStyle, NormalizedStyle.
Parameters
Section titled “Parameters”style— Specified style values before normalization. See SpecifiedStyle.
Returns
Section titled “Returns”Normalized style with the primitive’s shorthand and defaults applied. See NormalizedStyle .
resolveStyle (optional)
resolveStyle?: ((style: NormalizedStyle<N>, context: Readonly<StyleResolutionContext>) => ResolvedStyle<R>) | undefinedRelated API: NormalizedStyle, StyleResolutionContext, ResolvedStyle.
Resolves normalized style using the current layout context. See NormalizedStyle, StyleResolutionContext, ResolvedStyle.
Parameters
Section titled “Parameters”-
style— Normalized style to resolve. See NormalizedStyle. -
context— Layout and diagnostic context for resolution. See StyleResolutionContext .
Returns
Section titled “Returns”Resolved style ready for rendering. See ResolvedStyle.
measure (optional)
measure?: ((input: MeasureInput<PrimitiveProgramProps<P>, N>) => MeasureResult) | undefinedRelated API: MeasureInput, PrimitiveProgramProps, MeasureResult.
Measures declared primitive inputs without painting or retaining draw commands. See MeasureInput, PrimitiveProgramProps, MeasureResult.
Parameters
Section titled “Parameters”input— Props, normalized style, constraints, and nested measurement services. See MeasureInput , PrimitiveProgramProps .
Returns
Section titled “Returns”Measured dimensions or an unsupported measurement result. See MeasureResult.
PrimitiveInput
Section titled “PrimitiveInput”The authored props and signal-capable inputs accepted by a primitive.
type PrimitiveInput<P, S extends SystemStyle = SystemStyle> = SignalProgramProps<P> & StyleField<PibblResponsiveStyle<SpecifiedStyle<S>>>Related API: PrimitiveInput, SystemStyle, PibblResponsiveStyle, SpecifiedStyle.
See also
Section titled “See also”SignalProgramProps
View source — packages/core/src/lib/types.ts:249
Properties and methods
Section titled “Properties and methods”
style (optional)
style?: Signal<PibblResponsiveStyle<Readonly<S>> | undefined> | Signal<PibblResponsiveStyle<Readonly<S>>> | PibblResponsiveStyle<Readonly<S>> | undefinedRelated API: Signal, PibblResponsiveStyle.
Declared presentation and layout properties. See SignalValue.
PrimitiveProgramProps
Section titled “PrimitiveProgramProps”Resolved props passed into a primitive’s rendering program.
type PrimitiveProgramProps<P> = 0 extends 1 & P ? P : Extract<UnionKeys<P>, PrimitiveReservedKey> extends never ? P : neverRelated API: PrimitiveProgramProps.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:100
PrimitiveRender
Section titled “PrimitiveRender”The synchronous drawing callback of a custom primitive.
type PrimitiveRender<P, R extends SystemStyle = SystemStyle> = ( props: Readonly<PrimitiveProgramProps<P>>, style: ResolvedStyle<R>, context: RenderingContext2D,) => import('./element/types.js').PibblNodeInput | voidRelated API: PrimitiveRender, SystemStyle, PrimitiveProgramProps, ResolvedStyle, RenderingContext2D, PibblNodeInput.
Parameters
Section titled “Parameters”-
props— Component’s resolved non-style inputs. See PrimitiveProgramProps. -
style— Resolved primitive style. See ResolvedStyle. -
context— Active Canvas 2D context. See RenderingContext2D.
Returns
Section titled “Returns”Child nodes to traverse after the primitive, or no children.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:411
FillStyle
Section titled “FillStyle”A Canvas fill or Pibbl texture paint accepted by drawing primitives.
type FillStyle = CanvasRenderingContext2D["fillStyle"] | import('./textures/texture.js').TexturePaintRelated API: FillStyle, TexturePaint.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:638
PixelGridAlignment
Section titled “PixelGridAlignment”Policy for aligning drawing geometry to the pixel grid.
type PixelGridAlignment = "none" | "round" | "ceil" | "floor"Related API: PixelGridAlignment.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:688
NormalizedStyle
Section titled “NormalizedStyle”Style after default values and shorthand normalization have been applied.
type NormalizedStyle<N extends SystemStyle> = Readonly<N>Related API: NormalizedStyle, SystemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:286
Properties and methods
Section titled “Properties and methods”
transition (optional)
transition?: N["transition"] | undefinedVisibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
custom (optional)
custom?: N["custom"] | undefinedApplication-defined style payload passed through the runtime. See SystemStyle.
filter (optional)
filter?: N["filter"] | undefinedOrdered pixel-only filters applied to the receiving primitive and its descendants. See PibblFilter.
ResolvedStyle
Section titled “ResolvedStyle”Style after input resolution, normalization, and layout resolution.
type ResolvedStyle<R extends SystemStyle> = Readonly<R>Related API: ResolvedStyle, SystemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:294
Properties and methods
Section titled “Properties and methods”
transition (optional)
transition?: R["transition"] | undefinedVisibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
custom (optional)
custom?: R["custom"] | undefinedApplication-defined style payload passed through the runtime. See SystemStyle.
filter (optional)
filter?: R["filter"] | undefinedOrdered pixel-only filters applied to the receiving primitive and its descendants. See PibblFilter.
SpecifiedStyle
Section titled “SpecifiedStyle”The caller-specified style before normalization and layout resolution.
type SpecifiedStyle<S extends SystemStyle> = Readonly<S>Related API: SpecifiedStyle, SystemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:278
Properties and methods
Section titled “Properties and methods”
transition (optional)
transition?: S["transition"] | undefinedVisibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
custom (optional)
custom?: S["custom"] | undefinedApplication-defined style payload passed through the runtime. See SystemStyle.
filter (optional)
filter?: S["filter"] | undefinedOrdered pixel-only filters applied to the receiving primitive and its descendants. See PibblFilter.
StyleResolutionContext
Section titled “StyleResolutionContext”Parent and measurement context available during primitive style resolution.
interface StyleResolutionContextRelated API: StyleResolutionContext.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:303
Properties and methods
Section titled “Properties and methods”
allocation
allocation: Readonly<LayoutBox>Related API: LayoutBox.
The layout rectangle assigned by the parent. See LayoutBox.
percentageBasis
percentageBasis: Readonly<LayoutBox>Related API: LayoutBox.
The containing rectangle against which percentages resolve. See LayoutBox.
constraints
constraints: Readonly<Constraints>Related API: Constraints.
Sizing limits and available dimensions for this operation. See Constraints.
component
component: stringComponent identity or diagnostic name associated with this value. See StyleResolutionContext.
algorithm
algorithm: "render-dispatch"Name of the layout algorithm producing this diagnostic or resolution. See StyleResolutionContext.
StrokeStyle
Section titled “StrokeStyle”A Canvas stroke or Pibbl texture paint accepted by drawing primitives.
type StrokeStyle = CanvasRenderingContext2D["strokeStyle"] | import('./textures/texture.js').TexturePaintRelated API: StrokeStyle, TexturePaint.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:646
SystemStyle
Section titled “SystemStyle”Transition bindings, pixel filters, and application-defined style extensions understood by the runtime.
interface SystemStyleRelated API: SystemStyle.
See also
Section titled “See also”View source — packages/core/src/lib/types.ts:67
Properties and methods
Section titled “Properties and methods”
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.
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”- Rounded and circular marks: Draw a circle, ellipse, rounded rectangle, arc, and wedge with typed props and styles. Plain source
- Drawing composition: Group, cache, and clip a drawing, then add text and an embedded thumbnail. Plain source
- Lines and authored paths: Combine polyline, axis-aligned strokes, mutable geometry, and SVG path data. Plain source
- Define a Canvas primitive: Supply synchronous drawing, style normalization, resolution, and opt-in measurement. Plain source
- Grid and responsive style: Place marks on explicit grid tracks and apply a local width rule. Plain source
- Memoized hit paths: Rectangle, line, and SVG path hooks define three independent geometric click targets. Plain source
- Polygon marks: Draw a rounded triangle, regular hexagon, and five-point star. Plain source
Documentation version
Section titled “Documentation version”Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.