Components

@open-pencil/vue exposes headless structural primitives for canvas wiring, navigation UI, property panels, and focused input controls.

Core editor primitives

CanvasRoot

Headless canvas structure and context.

CanvasSurface

Canvas element primitive bound to CanvasRoot context.

LayerTreeRoot

Headless layer tree primitive.

LayerTreeItem

Single layer-tree row primitive.

ToolbarRoot

Headless toolbar primitive.

ToolbarItem

Single toolbar tool primitive.

PageListRoot

Headless page list primitive.

Property panel primitives

PropertySection

Collapsible property-section anatomy and empty states.

PropertyGrid

Responsive field-grid and action-rail anatomy.

SegmentedControl

Accessible selection and action-only segment groups.

PropertyListRoot

Headless property list primitive.

PropertyListItem

Single fills, strokes, or effects row primitive.

PositionControlsRoot

Position, size, and transform controls.

LayoutControlsRoot

Auto-layout and sizing controls.

ConstraintsControlRoot

Frame-child resize constraint state and actions.

AppearanceControlsRoot

Opacity, visibility, and corner-radius controls.

TypographyControlsRoot

Font, alignment, and formatting controls.

Pickers and inputs

ColorPickerRoot

Popover-based color picker primitive.

ColorInputRoot

Headless color input helper.

ChannelSlider

Accessible scalar slider for OkHCL channels.

FillRoot

Fill category state and conversion actions.

FillSwatch

Binding-aware semantic fill preview.

FontPickerRoot

Searchable font picker primitive.

GradientEditorRoot

Root primitive for gradient editing.

GradientEditorBar

Draggable gradient bar primitive.

GradientEditorStop

Single gradient stop primitive.

NumberField

Numeric field anatomy with scrubbing, expressions, and keyboard stepping.

BindableValue

Provider-driven variable and token binding composition.