HTML box types
HtmlBoxFocusState
Section titled “HtmlBoxFocusState”Readonly isFocusWithin and isFocusVisible booleans describe the whole native
region. Native descendants keep their browser focus and focus rings.
See HtmlBox.
HtmlBoxProps
Section titled “HtmlBoxProps”data is the opaque application payload, mount is its mount callback,
pointerEvents is "auto" | "none", and optional onFocusChange observes the
region snapshot. Read a Pibbl signal with .get() to subscribe the enclosing
component when replacing data. data is not recursively resolved.
HtmlBoxStyle
Section titled “HtmlBoxStyle”Pibbl box/layout fields and Group affine transform fields, plus opacity. Width and height default to the parent’s allocation; DOM content does not define intrinsic size. Overflow defaults to clip. Canvas filters enclosing HtmlBox are unsupported.
HtmlMountCallback
Section titled “HtmlMountCallback”type HtmlMountCallback<Props> = ( element: HTMLDivElement, initialProps: Props, signal: AbortSignal,) => HtmlUpdateFunction<Props>;Creates content once in a connected DIV and returns its updater. Use the native AbortSignal for listener and resource cleanup before the DIV is removed.
HtmlUpdateFunction
Section titled “HtmlUpdateFunction”type HtmlUpdateFunction<Props> = (props: Props) => void;Updates persistent content after subsequent successful component renders. A clean Layer reprojection does not call the updater. Return a no-op if updates are unused.
API details from source
Section titled “API details from source”
HtmlBoxProps
Section titled “HtmlBoxProps”Props for a DOM-hosting region, including mount ownership, updates, and focus behavior.
interface HtmlBoxProps<Props>Related API: HtmlBoxProps.
See also
Section titled “See also”View source — packages/core/src/lib/html/types.ts:51
Properties and methods
Section titled “Properties and methods”
data
data: PropsApplication data supplied to the component or reported by the event. See HtmlBoxProps .
mount
mount: HtmlMountCallback<Props>Related API: HtmlMountCallback.
Creates mounted content and its owned lifecycle controls. See HtmlMountCallback.
pointerEvents (optional)
pointerEvents?: "auto" | "none" | undefinedWhether this content participates in pointer targeting. See HtmlBoxProps.
onFocusChange (optional)
onFocusChange?: ((state: Readonly<HtmlBoxFocusState>) => void) | undefinedRelated API: HtmlBoxFocusState.
Receives changes to focus within the hosted HTML region. See HtmlBoxFocusState.
Parameters
Section titled “Parameters”state— Current DOM and Pibbl focus ownership for the HTML region. See HtmlBoxFocusState .
HtmlBoxStyle
Section titled “HtmlBoxStyle”Layout and presentation of an application-owned HTML region anchored to Canvas geometry.
interface HtmlBoxStyle extends GStyleRelated API: HtmlBoxStyle, GStyle.
See also
Section titled “See also”View source — packages/core/src/lib/html/types.ts:74
Properties and methods
Section titled “Properties and methods”
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.
opacity (optional)
opacity?: number | undefinedRelated API: opacity.
Opacity of the painted result. See HtmlBoxStyle.
transition (optional)
transition?: PibblTransitionBinding | undefinedRelated API: PibblTransitionBinding.
Visibility-transition binding applied to this primitive and its captured descendants. See SystemStyle.
left (optional)
left?: number | `${number}%` | undefinedLeft edge coordinate or inset. See Length.
View source — packages/core/src/lib/style/positioning.ts:127
top (optional)
top?: number | `${number}%` | undefinedTop edge value or top envelope guide. See Length.
View source — packages/core/src/lib/style/positioning.ts:129
width (optional)
width?: Length | undefinedRelated API: Length.
Horizontal extent in the units of the containing geometry or surface. 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.
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.
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.
HtmlMountCallback
Section titled “HtmlMountCallback”Mounts application HTML into the supplied host and returns its prop-update callback; the abort signal marks teardown.
type HtmlMountCallback<Props> = (element: HTMLDivElement, initialProps: Props, signal: AbortSignal) => HtmlUpdateFunction<Props>Related API: HtmlMountCallback, signal, HtmlUpdateFunction.
Parameters
Section titled “Parameters”-
element— Pibbl-owned host div into which application content may be mounted. -
initialProps— Props from the initial mount. -
signal— Lifetime signal aborted when the host is disposed.
Returns
Section titled “Returns”An update callback for subsequent props; release application resources when the signal aborts. See HtmlUpdateFunction .
See also
Section titled “See also”View source — packages/core/src/lib/html/types.ts:29
HtmlUpdateFunction
Section titled “HtmlUpdateFunction”Updates mounted application HTML when the owning HtmlBox receives new props.
type HtmlUpdateFunction<Props> = (props: Props) => voidRelated API: HtmlUpdateFunction.
Parameters
Section titled “Parameters”props— Latest props for the mounted HTML content.
See also
Section titled “See also”View source — packages/core/src/lib/html/types.ts:14
HtmlBoxFocusState
Section titled “HtmlBoxFocusState”Focus state shared between an HTML host and Pibbl’s logical focus management.
interface HtmlBoxFocusStateRelated API: HtmlBoxFocusState.
See also
Section titled “See also”View source — packages/core/src/lib/html/types.ts:35
Properties and methods
Section titled “Properties and methods”
isFocusWithin
readonly isFocusWithin: booleanWhether an element inside the hosted HTML region currently has focus. See HtmlBoxFocusState.
isFocusVisible
readonly isFocusVisible: booleanWhether focus should be presented as keyboard-visible. See HtmlBoxFocusState.
Implementation guidance for agents
Section titled “Implementation guidance for agents”Read the Input, focus, and native HTML companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.
Complete minimal examples
Section titled “Complete minimal examples”- Host a native button in Pibbl: Mount and update native HTML inside an HtmlBox, preserving native clicks and focus. Plain source
Documentation version
Section titled “Documentation version”Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.