Elements and component types

Read as Markdown

Pibbl components are synchronous functions over a branded recursive element protocol. Component pages describe each runtime value; this page owns their type contracts and the pure create*Path option objects.

AbsoluteProps

AbsoluteProps accepts recursive PibblNode children for Absolute.

ArcPathOptions

ArcPathOptions supplies numeric radius, center, radian sweep, and optional direction to createArcPath; invalid numeric structure throws RangeError.

ArcProps

ArcProps is the public input for the open, stroke-only Arc component.

CirclePathOptions

CirclePathOptions supplies a nonnegative numeric radius and optional center to createCirclePath.

CircleProps

CircleProps is the public input for the Circle drawing component.

ClipProps

ClipProps supplies a Path2D, fill rule, and recursive PibblNode children to Clip.

EllipsePathOptions

EllipsePathOptions supplies numeric nonnegative radii, optional center, and finite radian rotation to createEllipsePath.

EllipseProps

EllipseProps is the public input for the rotated Ellipse component.

FocusManagementProps

FocusManagementProps wraps one recursive PibblNode subtree and enables logical Canvas focus without generating semantic DOM.

GroupProps

GroupProps accepts recursive PibblNode children for transformed composition.

HorizontalLineProps

HorizontalLineProps is the public input for the allocation-aware horizontal line helper.

ImageProps

ImageProps is the public input for the browser-decoded Image component.

KeyboardNavigationProps

KeyboardNavigationProps wraps recursive PibblNode children in a transparent directional-navigation boundary inside focus management.

LayerProps

LayerProps accepts recursive PibblNode children for a persistent offscreen Pibbl instance; browser OffscreenCanvas support is required.

LinePathOptions

LinePathOptions supplies finite numeric coordinates and optional closePath to createLinePath.

LineProps

LineProps is the public input for the ordered polyline Line component.

OverlayProps

OverlayProps accepts recursive PibblNode children for shared-box placement.

PathProps

PathProps requires a caller-owned Path2D for the Path drawing component.

PibblComponent

PibblComponent<P> is a synchronous (props: P) => PibblNode | void function. Components do not return promises and use normal function identity for runtime state ownership.

PibblContainerChild

PibblContainerChild aliases the recursive node contract accepted by container components such as Group, Layer, and the layout components.

PibblElement

PibblElement<P> is Pibbl’s immutable branded descriptor with a component type, readonly props, and an optional normalized key. Construct it with JSX or createElement, not object literals.

PibblElementType

PibblElementType<P> is the supported vocabulary of synchronous Pibbl component types accepted by element construction.

PibblEmptyNode

PibblKey

PibblKey is string | number; element construction normalizes it to a string and never delivers it through component props.

PibblNode

PibblNode is one element, an empty node, a recursive readonly array, or a finite synchronous iterable. Infinite iterables are unsupported.

PibblNodeInput

PibblNodeInput is the component-owned authoring grammar for structural children and component results. It accepts PibblNode, direct signals that replace one complete resolved node structure, and recursive arrays or finite iterables containing those inputs. Signal results are resolved one level only.

PibblPhysics2DPropExtension

PibblPhysics2DPropExtension is the empty declaration-merging base used by the optional official 2D physics module to type supported Canvas component props.

PibblPrimitiveComponent

PibblPrimitiveComponent is the capability-bearing component type created by definePrimitive for platform/component-library authors.

PibblRenderResult

PibblRenderResult is PibblNode | void, the output permitted from a synchronous Pibbl component.

PibblTextChild

PibblTextChild is recursive textual content for Text: strings, numbers, booleans, nullish values, readonly arrays, and finite synchronous iterables.

PibblTextInput

PibblTextInput is the Text authoring grammar. It accepts PibblTextChild, direct signals that replace one complete resolved text structure, and recursive arrays or finite iterables containing those inputs. It does not unwrap signals inside a structure returned by another signal.

PolygonPathOptions

PolygonPathOptions supplies finite numeric coordinates and optional numeric corner radii to createPolygonPath.

PolygonProps

PolygonProps is the public input for the closed numeric-coordinate polygon.

RectanglePathOptions

RectanglePathOptions supplies signed numeric dimensions, optional position, and numeric corner radii to createRectanglePath.

RectangleProps

RectangleProps is the public input for the local rectangle component.

RegularPolygonNumericSize

RegularPolygonNumericSize is the exact-one numeric size union for generated regular polygon paths: circumradius, inradius, or side length.

RegularPolygonPathOptions

RegularPolygonPathOptions combines integer sides, one numeric size mode, optional position/rotation, and numeric corner options for the pure creator.

RegularPolygonPathPosition

RegularPolygonPathPosition supplies the optional numeric center and rotation shared by regular-polygon path construction.

RegularPolygonProps

RegularPolygonProps is the public input for the generated regular polygon.

RoundedCornerPathOptions

RoundedCornerPathOptions supplies numeric cornerRadius and cornerRadii for the pure rectangle and polygon path constructors.

StarPathOptions

StarPathOptions supplies integer points, ordered nonnegative radii, optional position/rotation, and numeric corners to createStarPath.

StarProps

StarProps is the public input for the generated concave Star component.

SvgPathOptions

SvgPathOptions supplies SVG d text to the browser-parsed pure path creator.

SvgPathProps

SvgPathProps is the public input for browser-parsed SvgPath geometry.

TextFit

TextFit describes the supported local text fitting behavior; text shaping, rasterization, and measurement remain browser behavior.

TextProps

TextProps accepts recursive PibblTextChild content and the local text style.

VerticalLineProps

VerticalLineProps is the public input for the allocation-aware vertical line.

WedgePathOptions

WedgePathOptions supplies numeric circular-sweep values to the center-closed createWedgePath function.

WedgeProps

WedgeProps is the public input for the center-closed Wedge component.

API details from source

PibblPhysics2DPropExtension

Empty declaration-merging base for the optional official 2D physics package.

interface PibblPhysics2DPropExtension

Related API: PibblPhysics2DPropExtension.

Properties and methods

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

ArcProps

Authored inputs for Arc, including the declared data and presentation options.

interface ArcProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

CircleProps

Authored inputs for Circle, including the declared data and presentation options.

interface CircleProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

ClipProps

Authored inputs for Clip, including the declared data and presentation options.

interface ClipProps extends PibblStructuralEventProps

Related API: ClipProps.

Properties and methods

children

children: PibblNodeInput

Related API: PibblNodeInput.

Descendant content or the callback that supplies it. See PibblNodeInput.

View source — packages/core/src/lib/components/clip.ts:26

EllipseProps

Authored inputs for Ellipse, including the declared data and presentation options.

interface EllipseProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

GroupProps

Authored inputs for Group, including the declared data and presentation options.

interface GroupProps extends PibblStructuralEventProps, PibblPhysics2DPropExtension

Related API: GroupProps, PibblPhysics2DPropExtension.

Properties and methods

children

children: PibblNodeInput

Related API: PibblNodeInput.

Descendant content or the callback that supplies it. See PibblNodeInput.

View source — packages/core/src/lib/components/g.ts:30

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

HorizontalLineProps

Authored inputs for HorizontalLine, including the declared data and presentation options.

interface HorizontalLineProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

ImageProps

Authored inputs for Image, including the declared data and presentation options.

interface ImageProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

LayerProps

Authored inputs for Layer, including the declared data and presentation options.

interface LayerProps extends PibblStructuralEventProps

Related API: LayerProps.

Properties and methods

children

children: PibblNodeInput

Related API: PibblNodeInput.

Descendant content or the callback that supplies it. See PibblNodeInput.

View source — packages/core/src/lib/components/layer.ts:56

LineProps

Authored inputs for Line, including the declared data and presentation options.

interface LineProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

PathProps

Authored inputs for Path, including the declared data and presentation options.

interface PathProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

PolygonProps

Authored inputs for Polygon, including the declared data and presentation options.

interface PolygonProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

RegularPolygonProps

Authored inputs for RegularPolygon, including the declared data and presentation options.

interface RegularPolygonProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

RectangleProps

Authored inputs for Rectangle, including the declared data and presentation options.

interface RectangleProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

StarProps

Authored inputs for Star, including the declared data and presentation options.

interface StarProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

SvgPathProps

Authored inputs for SvgPath, including the declared data and presentation options.

interface SvgPathProps extends PathProps, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

TextProps

Authored inputs for Text, including the declared data and presentation options.

interface TextProps extends
    PibblEventHandlers,
    PibblEventFocusOptions,
    PibblEventParticipationOptions,
    PibblPhysics2DPropExtension

Properties and methods

children (optional)

children?: PibblTextInput

Related API: PibblTextInput.

Descendant content or the callback that supplies it. See PibblTextInput.

View source — packages/core/src/lib/components/text.ts:46

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

VerticalLineProps

Authored inputs for VerticalLine, including the declared data and presentation options.

interface VerticalLineProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

WedgeProps

Authored inputs for Wedge, including the declared data and presentation options.

interface WedgeProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension

Properties and methods

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/core/src/lib/events/types.ts:126

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblEventFocusOptions.

View source — packages/core/src/lib/events/types.ts:137

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/core/src/lib/events/types.ts:139

physics (optional)

readonly physics?: PibblPhysicsAttachment2D | undefined

Related API: PibblPhysicsAttachment2D.

View source — packages/core/src/features/physics/lib/2d/types.ts:321

ArcPathOptions

Geometry and construction options for a arc path.

interface ArcPathOptions

Related API: ArcPathOptions.

Properties and methods

cx (optional)

cx?: number | undefined

Horizontal coordinate of the center. See ArcPathOptions.

View source — packages/core/src/lib/geometry/circular-sweep.ts:21

cy (optional)

cy?: number | undefined

Vertical coordinate of the center. See ArcPathOptions.

View source — packages/core/src/lib/geometry/circular-sweep.ts:23

radius

radius: number

Radius in the coordinate system of this geometry or effect. See ArcPathOptions.

View source — packages/core/src/lib/geometry/circular-sweep.ts:25

startAngle

startAngle: number

Angle at which the arc or slice begins. See ArcPathOptions.

View source — packages/core/src/lib/geometry/circular-sweep.ts:27

endAngle

endAngle: number

Angle at which the arc or slice ends. See ArcPathOptions.

View source — packages/core/src/lib/geometry/circular-sweep.ts:29

counterclockwise (optional)

counterclockwise?: boolean | undefined

Whether the arc follows the counterclockwise direction. See ArcPathOptions.

View source — packages/core/src/lib/geometry/circular-sweep.ts:31

WedgePathOptions

Geometry and construction options for a wedge path.

type WedgePathOptions = ArcPathOptions

Related API: WedgePathOptions, ArcPathOptions.

Properties and methods

cx (optional)

cx?: number | undefined

Horizontal coordinate of the center. See ArcPathOptions.

View source — packages/core/src/lib/geometry/circular-sweep.ts:21

cy (optional)

cy?: number | undefined

Vertical coordinate of the center. See ArcPathOptions.

View source — packages/core/src/lib/geometry/circular-sweep.ts:23

radius

radius: number

Radius in the coordinate system of this geometry or effect. See ArcPathOptions.

View source — packages/core/src/lib/geometry/circular-sweep.ts:25

startAngle

startAngle: number

Angle at which the arc or slice begins. See ArcPathOptions.

View source — packages/core/src/lib/geometry/circular-sweep.ts:27

endAngle

endAngle: number

Angle at which the arc or slice ends. See ArcPathOptions.

View source — packages/core/src/lib/geometry/circular-sweep.ts:29

counterclockwise (optional)

counterclockwise?: boolean | undefined

Whether the arc follows the counterclockwise direction. See ArcPathOptions.

View source — packages/core/src/lib/geometry/circular-sweep.ts:31

CirclePathOptions

Geometry and construction options for a circle path.

interface CirclePathOptions

Related API: CirclePathOptions.

Properties and methods

cx (optional)

cx?: number | undefined

Horizontal coordinate of the center. See CirclePathOptions.

View source — packages/core/src/lib/geometry/circle.ts:10

cy (optional)

cy?: number | undefined

Vertical coordinate of the center. See CirclePathOptions.

View source — packages/core/src/lib/geometry/circle.ts:12

radius

radius: number

Radius in the coordinate system of this geometry or effect. See CirclePathOptions.

View source — packages/core/src/lib/geometry/circle.ts:14

EllipsePathOptions

Geometry and construction options for a ellipse path.

interface EllipsePathOptions

Related API: EllipsePathOptions.

Properties and methods

cx (optional)

cx?: number | undefined

Horizontal coordinate of the center. See EllipsePathOptions.

View source — packages/core/src/lib/geometry/ellipse.ts:10

cy (optional)

cy?: number | undefined

Vertical coordinate of the center. See EllipsePathOptions.

View source — packages/core/src/lib/geometry/ellipse.ts:12

radiusX

radiusX: number

Horizontal ellipse radius. See EllipsePathOptions.

View source — packages/core/src/lib/geometry/ellipse.ts:14

radiusY

radiusY: number

Vertical ellipse radius. See EllipsePathOptions.

View source — packages/core/src/lib/geometry/ellipse.ts:16

rotation (optional)

rotation?: number | undefined

Rotation applied to the containing geometry. See EllipsePathOptions.

View source — packages/core/src/lib/geometry/ellipse.ts:18

LinePathOptions

Geometry and construction options for a line path.

interface LinePathOptions

Related API: LinePathOptions.

Properties and methods

coords

coords: readonly (readonly [number, number])[]

Ordered coordinate pairs describing the path vertices. See LinePathOptions.

View source — packages/core/src/lib/geometry/line.ts:10

closePath (optional)

closePath?: boolean | undefined

Whether to connect the final vertex back to the first. See LinePathOptions.

View source — packages/core/src/lib/geometry/line.ts:12

PolygonPathOptions

Geometry and construction options for a polygon path.

interface PolygonPathOptions extends RoundedCornerPathOptions

Properties and methods

coords

coords: readonly (readonly [number, number])[]

Ordered coordinate pairs describing the path vertices. See PolygonPathOptions.

View source — packages/core/src/lib/geometry/polygon.ts:13

cornerRadius (optional)

cornerRadius?: number | undefined

Uniform corner radius used where no per-corner override is supplied. See RoundedCornerPathOptions.

View source — packages/core/src/lib/geometry/rounded-corners.ts:25

cornerRadii (optional)

cornerRadii?: readonly (number | null | undefined)[] | undefined

Per-corner radii; nullish entries use the uniform corner radius. See RoundedCornerPathOptions.

View source — packages/core/src/lib/geometry/rounded-corners.ts:30

RectanglePathOptions

Geometry and construction options for a rectangle path.

interface RectanglePathOptions extends RoundedCornerPathOptions

Properties and methods

cornerRadius (optional)

cornerRadius?: number | undefined

Uniform corner radius used where no per-corner override is supplied. See RoundedCornerPathOptions.

View source — packages/core/src/lib/geometry/rounded-corners.ts:25

x (optional)

x?: number | undefined

Horizontal coordinate or displacement in the containing coordinate system. See RectanglePathOptions.

View source — packages/core/src/lib/geometry/rectangle.ts:18

y (optional)

y?: number | undefined

Vertical coordinate or displacement in the containing coordinate system. See RectanglePathOptions.

View source — packages/core/src/lib/geometry/rectangle.ts:23

width

width: number

Horizontal extent in the units of the containing geometry or surface. See RectanglePathOptions.

View source — packages/core/src/lib/geometry/rectangle.ts:28

height

height: number

Vertical extent in the units of the containing geometry or surface. See RectanglePathOptions.

View source — packages/core/src/lib/geometry/rectangle.ts:33

cornerRadii (optional)

cornerRadii?: readonly (number | null | undefined)[] | undefined

Per-corner radii; nullish entries use the uniform corner radius. See RoundedCornerPathOptions.

View source — packages/core/src/lib/geometry/rounded-corners.ts:30

RegularPolygonNumericSize

Exactly one size measure for a regular polygon: circumradius, inradius, or side length.

Full type declaration

type RegularPolygonNumericSize = | {
      /** Distance from the polygon center to a vertex. See {@link RegularPolygonNumericSize}. */
      circumradius: number;
      /**
       * Not accepted in this variant; use the alternative fields instead. See
       * {@link RegularPolygonNumericSize}.
       */
      inradius?: never;
      /**
       * Not accepted in this variant; use the alternative fields instead. See
       * {@link RegularPolygonNumericSize}.
       */
      sideLength?: never;
    }
  | {
      /**
       * Not accepted in this variant; use the alternative fields instead. See
       * {@link RegularPolygonNumericSize}.
       */
      circumradius?: never;
      /** Distance from the polygon center to an edge. See {@link RegularPolygonNumericSize}. */
      inradius: number;
      /**
       * Not accepted in this variant; use the alternative fields instead. See
       * {@link RegularPolygonNumericSize}.
       */
      sideLength?: never;
    }
  | {
      /**
       * Not accepted in this variant; use the alternative fields instead. See
       * {@link RegularPolygonNumericSize}.
       */
      circumradius?: never;
      /**
       * Not accepted in this variant; use the alternative fields instead. See
       * {@link RegularPolygonNumericSize}.
       */
      inradius?: never;
      /** Length of one polygon edge. See {@link RegularPolygonNumericSize}. */
      sideLength: number;
    }

Related API: RegularPolygonNumericSize, Length.

Properties and methods

circumradius (optional)

circumradius?: number | undefined

Distance from the polygon center to a vertex. See RegularPolygonNumericSize. Not accepted in this variant; use the alternative fields instead. See RegularPolygonNumericSize.

View source — packages/core/src/lib/geometry/regular-polygon.ts:39

inradius (optional)

inradius?: number | undefined

Not accepted in this variant; use the alternative fields instead. See RegularPolygonNumericSize. Distance from the polygon center to an edge. See RegularPolygonNumericSize.

View source — packages/core/src/lib/geometry/regular-polygon.ts:44

sideLength (optional)

sideLength?: number | undefined

Not accepted in this variant; use the alternative fields instead. See RegularPolygonNumericSize. Length of one polygon edge. See RegularPolygonNumericSize.

View source — packages/core/src/lib/geometry/regular-polygon.ts:49

RegularPolygonPathOptions

Geometry and construction options for a regular polygon path.

type RegularPolygonPathOptions = RegularPolygonPathPosition &
  RegularPolygonNumericSize &
  RoundedCornerPathOptions

Properties and methods

sides

sides: number

Number of sides of the regular polygon. See RegularPolygonPathPosition.

View source — packages/core/src/lib/geometry/regular-polygon.ts:22

cx (optional)

cx?: number | undefined

Horizontal coordinate of the center. See RegularPolygonPathPosition.

View source — packages/core/src/lib/geometry/regular-polygon.ts:24

cy (optional)

cy?: number | undefined

Vertical coordinate of the center. See RegularPolygonPathPosition.

View source — packages/core/src/lib/geometry/regular-polygon.ts:26

rotation (optional)

rotation?: number | undefined

Rotation applied to the containing geometry. See RegularPolygonPathPosition.

View source — packages/core/src/lib/geometry/regular-polygon.ts:28

circumradius (optional)

circumradius?: number | undefined

Distance from the polygon center to a vertex. See RegularPolygonNumericSize. Not accepted in this variant; use the alternative fields instead. See RegularPolygonNumericSize.

View source — packages/core/src/lib/geometry/regular-polygon.ts:39

inradius (optional)

inradius?: number | undefined

Not accepted in this variant; use the alternative fields instead. See RegularPolygonNumericSize. Distance from the polygon center to an edge. See RegularPolygonNumericSize.

View source — packages/core/src/lib/geometry/regular-polygon.ts:44

sideLength (optional)

sideLength?: number | undefined

Not accepted in this variant; use the alternative fields instead. See RegularPolygonNumericSize. Length of one polygon edge. See RegularPolygonNumericSize.

View source — packages/core/src/lib/geometry/regular-polygon.ts:49

cornerRadius (optional)

cornerRadius?: number | undefined

Uniform corner radius used where no per-corner override is supplied. See RoundedCornerPathOptions.

View source — packages/core/src/lib/geometry/rounded-corners.ts:25

cornerRadii (optional)

cornerRadii?: readonly (number | null | undefined)[] | undefined

Per-corner radii; nullish entries use the uniform corner radius. See RoundedCornerPathOptions.

View source — packages/core/src/lib/geometry/rounded-corners.ts:30

RegularPolygonPathPosition

Center, side count, and rotation for a regular polygon path.

interface RegularPolygonPathPosition

Related API: RegularPolygonPathPosition.

Properties and methods

sides

sides: number

Number of sides of the regular polygon. See RegularPolygonPathPosition.

View source — packages/core/src/lib/geometry/regular-polygon.ts:22

cx (optional)

cx?: number | undefined

Horizontal coordinate of the center. See RegularPolygonPathPosition.

View source — packages/core/src/lib/geometry/regular-polygon.ts:24

cy (optional)

cy?: number | undefined

Vertical coordinate of the center. See RegularPolygonPathPosition.

View source — packages/core/src/lib/geometry/regular-polygon.ts:26

rotation (optional)

rotation?: number | undefined

Rotation applied to the containing geometry. See RegularPolygonPathPosition.

View source — packages/core/src/lib/geometry/regular-polygon.ts:28

StarPathOptions

Geometry and construction options for a star path.

interface StarPathOptions extends RoundedCornerPathOptions

Properties and methods

points

points: number

Points defining the geometry or reported by the contact query. See StarPathOptions.

View source — packages/core/src/lib/geometry/star.ts:23

cx (optional)

cx?: number | undefined

Horizontal coordinate of the center. See StarPathOptions.

View source — packages/core/src/lib/geometry/star.ts:25

cy (optional)

cy?: number | undefined

Vertical coordinate of the center. See StarPathOptions.

View source — packages/core/src/lib/geometry/star.ts:27

outerRadius

outerRadius: number

Radius of the outer boundary. See StarPathOptions.

View source — packages/core/src/lib/geometry/star.ts:29

innerRadius

innerRadius: number

Radius of the inner boundary. See StarPathOptions.

View source — packages/core/src/lib/geometry/star.ts:31

rotation (optional)

rotation?: number | undefined

Rotation applied to the containing geometry. See StarPathOptions.

View source — packages/core/src/lib/geometry/star.ts:33

cornerRadius (optional)

cornerRadius?: number | undefined

Uniform corner radius used where no per-corner override is supplied. See RoundedCornerPathOptions.

View source — packages/core/src/lib/geometry/rounded-corners.ts:25

cornerRadii (optional)

cornerRadii?: readonly (number | null | undefined)[] | undefined

Per-corner radii; nullish entries use the uniform corner radius. See RoundedCornerPathOptions.

View source — packages/core/src/lib/geometry/rounded-corners.ts:30

SvgPathOptions

Geometry and construction options for a svg path.

interface SvgPathOptions

Related API: SvgPathOptions.

Properties and methods

d: string

Geometry to draw or clip, supplied in the declared path representation. See SvgPathOptions.

View source — packages/core/src/lib/geometry/svg-path.ts:11

RoundedCornerPathOptions

Uniform or per-corner radii for rounding supported path vertices.

interface RoundedCornerPathOptions

Related API: RoundedCornerPathOptions.

Properties and methods

cornerRadius (optional)

cornerRadius?: number | undefined

Uniform corner radius used where no per-corner override is supplied. See RoundedCornerPathOptions.

View source — packages/core/src/lib/geometry/rounded-corners.ts:25

cornerRadii (optional)

cornerRadii?: readonly (number | null | undefined)[] | undefined

Per-corner radii; nullish entries use the uniform corner radius. See RoundedCornerPathOptions.

View source — packages/core/src/lib/geometry/rounded-corners.ts:30

AbsoluteProps

Authored inputs for Absolute, including the declared data and presentation options.

interface AbsoluteProps extends PibblStructuralEventProps

Related API: AbsoluteProps.

Properties and methods

children

children: PibblNodeInput

Related API: PibblNodeInput.

Descendant content or the callback that supplies it. See PibblNodeInput.

View source — packages/core/src/lib/layout/absolute.ts:65

OverlayProps

Authored inputs for Overlay, including the declared data and presentation options.

interface OverlayProps extends PibblStructuralEventProps

Related API: OverlayProps.

Properties and methods

children

children: PibblNodeInput

Related API: PibblNodeInput.

Descendant content or the callback that supplies it. See PibblNodeInput.

View source — packages/core/src/lib/layout/overlay.ts:53

FocusManagementProps

Authored inputs for FocusManagement, including the declared data and presentation options.

interface FocusManagementProps

Related API: FocusManagementProps.

Properties and methods

children

readonly children: PibblPolicyChild

The single child receiving a logical focus manager. See PibblPolicyChild.

View source — packages/core/src/lib/focus/policy-components.ts:76

KeyboardNavigationProps

Authored inputs for KeyboardNavigation, including the declared data and presentation options.

interface KeyboardNavigationProps extends PibblKeyboardNavigationOptions

Properties and methods

children

readonly children: PibblPolicyChild

The single child receiving a directional keyboard-navigation boundary. See PibblPolicyChild.

View source — packages/core/src/lib/focus/policy-components.ts:87

mode

readonly mode: "directional"

Selects the supported mapping, placement, or result policy. See PibblKeyboardNavigationOptions.

View source — packages/core/src/lib/focus/types.ts:19

TextFit

How text that exceeds its box remains visible, compresses, truncates, or clips.

type TextFit = 'visible' | 'squish' | 'ellipsis' | 'clip'

Related API: TextFit.

PibblComponent

A synchronous function that receives props and returns Pibbl nodes.

type PibblComponent<P = Record<string, never>> = (
  props: P,
) => PibblRenderResult

Related API: PibblComponent, PibblRenderResult.

Parameters

props — Authored component properties supplied by Pibbl.

Returns

Synchronous Pibbl render output. See PibblRenderResult.

PibblContainerChild

A recursive child value accepted by a Pibbl container.

type PibblContainerChild = PibblNodeInput

Related API: PibblContainerChild, PibblNodeInput.

PibblElement

A branded element descriptor containing component identity, props, and an optional reconciliation key.

interface PibblElement<P = unknown>

Related API: PibblElement.

Properties and methods

type

readonly type: PibblElementType<P>

Related API: PibblElementType.

Component identity evaluated when this element is rendered. See PibblElementType.

View source — packages/core/src/lib/element/types.ts:50

props

readonly props: Readonly<P>

Component props supplied to evaluation or measurement. See PibblElement.

View source — packages/core/src/lib/element/types.ts:52

key (optional)

readonly key?: string | undefined

Stable identity used by the containing protocol. See PibblElement.

View source — packages/core/src/lib/element/types.ts:54

PibblElementType

A component or fragment identity that can be used to construct a Pibbl element.

type PibblElementType<P = any> = PibblComponent<P>

Related API: PibblElementType, PibblComponent.

PibblEmptyNode

A child value that intentionally contributes no rendered output.

type PibblEmptyNode = false | true | null | undefined | '' | 0

Related API: PibblEmptyNode.

PibblKey

A stable sibling identity used when reconciling keyed elements.

type PibblKey = string | number

Related API: PibblKey.

PibblNode

Recursive synchronous render output, including elements and empty child values.

type PibblNode = | PibblElement<any>
  | PibblEmptyNode
  | readonly PibblNode[]
  | Iterable<PibblNode>

Related API: PibblNode, PibblElement, PibblEmptyNode.

PibblNodeInput

An authored node input that may be supplied by a signal.

type PibblNodeInput = | SignalValue<PibblNode>
  | readonly PibblNodeInput[]
  | Iterable<PibblNodeInput>

Related API: PibblNodeInput, SignalValue, PibblNode.

PibblPrimitiveComponent

A branded primitive component with separate authored-input and resolved-prop types.

type PibblPrimitiveComponent<P = Record<string, never>, I = P> = PibblComponent<I> & {
  readonly [pibblPrimitiveComponentBrand]: {
    readonly input: I;
    readonly programProps: P;
  };
}

Related API: PibblPrimitiveComponent, PibblComponent.

PibblTextChild

A textual child accepted by the Text primitive.

type PibblTextChild = | string
  | number
  | boolean
  | null
  | undefined
  | readonly PibblTextChild[]
  | Iterable<PibblTextChild>

Related API: PibblTextChild.

PibblTextInput

Literal or signal-supplied text content for the Text primitive.

type PibblTextInput = | SignalValue<PibblTextChild>
  | readonly PibblTextInput[]
  | Iterable<PibblTextInput>

Related API: PibblTextInput, SignalValue, PibblTextChild.

PibblRenderResult

The supported synchronous return value of a Pibbl component.

type PibblRenderResult = PibblNodeInput | void

Related API: PibblRenderResult, PibblNodeInput.

Implementation guidance for agents

Read the Authoring, signals, and lifecycle companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

Absolute and overlay layout: Position a block absolutely and center content within an overlay. Plain source
Circular path factories: Create circle, ellipse, arc, and wedge Path2D shapes. Plain source
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
Focus and arrow navigation: Two logical targets participate in Tab focus and directional keyboard navigation. Plain source
Lines and authored paths: Combine polyline, axis-aligned strokes, mutable geometry, and SVG path data. Plain source
Line and SVG paths: Construct a polyline and an SVG path from authored coordinates. Plain source
Typed components and recursive children: Build a component with createElement, group its children in a Fragment, and render textual children. Plain source
Physics drawing components: Draw four physics shapes and move a custom kinematic collider. Plain source
Define a Canvas primitive: Supply synchronous drawing, style normalization, resolution, and opt-in measurement. Plain source
Polygon path factories: Create rounded rectangles and polygons alongside regular and star shapes. Plain source
Polygon marks: Draw a rounded triangle, regular hexagon, and five-point star. Plain source

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 380919b. ALPHA — NOT FOR PRODUCTION USE.

Elements and component types

AbsoluteProps

ArcPathOptions

ArcProps

CirclePathOptions

CircleProps

ClipProps

EllipsePathOptions

EllipseProps

FocusManagementProps

GroupProps

HorizontalLineProps

ImageProps

KeyboardNavigationProps

LayerProps

LinePathOptions

LineProps

OverlayProps

PathProps

PibblComponent

PibblContainerChild

PibblElement

PibblElementType

PibblEmptyNode

PibblKey

PibblNode

PibblNodeInput

PibblPhysics2DPropExtension

PibblPrimitiveComponent

PibblRenderResult

PibblTextChild

PibblTextInput

PolygonPathOptions

PolygonProps

RectanglePathOptions

RectangleProps

RegularPolygonNumericSize

RegularPolygonPathOptions

RegularPolygonPathPosition

RegularPolygonProps

RoundedCornerPathOptions

StarPathOptions

StarProps

SvgPathOptions

SvgPathProps

TextFit

TextProps

VerticalLineProps

WedgePathOptions

WedgeProps

API details from source

PibblPhysics2DPropExtension

See also

Properties and methods

ArcProps

See also

Properties and methods

CircleProps

See also

Properties and methods

ClipProps

See also

Properties and methods

EllipseProps

See also

Properties and methods

GroupProps

See also

Properties and methods

HorizontalLineProps

See also

Properties and methods

ImageProps

See also

Properties and methods

LayerProps

See also

Properties and methods

LineProps

See also