Stencil building blocks

All optional props without a default remain undefined. class accepts Svelte ClassValue; style is a CSS string.

These primitives require and provide no cropper context. Supply their data and callbacks explicitly. Unless listed, they have no exported instance methods. Container children are optional Snippet values rendered without arguments.

BoundingBox

Positions resize controls and emits anchor, displacement and ResizeOptions. reference is the crop at gesture start. Custom controls must retain the native event so Shift can preserve aspect ratio.

Prop	Type	Default
`style`	`string`	`undefined`
`class`	`ClassValue`	`undefined`
`handler`	`Snippet<[HandlerSnippetProps]>`	`SimpleHandler`
`handlers`	`boolean` \| `Partial<Record<OrdinalDirection, boolean>>`	All eight directions
`lines`	`boolean` \| `Partial<Record<CardinalDirection, boolean>>`	All four cardinal directions
`line`	`Snippet<[LineSnippetProps]>`	`SimpleLine`
`disabled`	`boolean`	`false`
`onResize`	`(anchor: ResizeAnchor, directions: MoveDirections, options: ResizeOptions) => void`	`undefined`
`onResizeEnd`	`() => void`	`undefined`
`children`	`Snippet`	`undefined`
`reference`	`Coordinates` \| `null`	`null`

handler and line use the typed control snippet contracts. A boolean controls all positions; a map enables only true entries.

Selectors are listed in the complete styling inventory.

StencilWrapper

Positions the crop region with width, height, left and top. Transitions interpolate its box. Coordinates are in boundary pixels.

Prop	Type	Default
`children`	`Snippet`	`undefined`
`class`	`ClassValue`	`undefined`
`style`	`string`	`undefined`
`transitions`	`CropperTransitions`	`undefined`
`width`	`number`	`undefined`
`height`	`number`	`undefined`
`left`	`number`	Required
`top`	`number`	Required

Selectors are listed in the complete styling inventory.

StencilOverlay

Overlay surface surrounding the crop region. Its children render inside the overlay.

Prop	Type	Default
`class`	`ClassValue`	`undefined`
`style`	`string`	`undefined`
`children`	`Snippet`	`undefined`

Selectors are listed in the complete styling inventory.

StencilGrid

Shows a configurable grid. Hidden grids retain their previous row and column counts until shown again.

Prop	Type	Default
`visible`	`boolean`	`false`
`columns`	`number`	`3`
`rows`	`number`	`3`
`class`	`ClassValue`	`undefined`
`style`	`string`	`undefined`

Selectors are listed in the complete styling inventory.

HandlerWrapper

Draggable hit target for one resize handle. position takes precedence over the split horizontal/vertical fields. Movement uses layout pixels; pass through the native event.

Prop	Type	Default
`class`	`ClassValue`	`undefined`
`style`	`string`	`undefined`
`children`	`Snippet`	`undefined`
`onMove`	`(shift: MoveDirections, event: MouseEvent` \| `TouchEvent) => void`	`undefined`
`onMoveEnd`	`() => void`	`undefined`
`onLeave`	`() => void`	`undefined`
`onEnter`	`() => void`	`undefined`
`disabled`	`boolean`	`undefined`
`position`	`OrdinalDirection`	`undefined`
`horizontalPosition`	`HorizontalCardinalDirection` \| `null`	`undefined`
`verticalPosition`	`VerticalCardinalDirection` \| `null`	`undefined`

Selectors are listed in the complete styling inventory.

LineWrapper

Draggable hit target for one edge. Activation distance is zero; forwards movement and completion.

Prop	Type	Default
`class`	`ClassValue`	`undefined`
`style`	`string`	`undefined`
`children`	`Snippet`	`undefined`
`onMove`	`(directions: MoveDirections, event: TouchEvent` \| `MouseEvent) => void`	`undefined`
`onMoveEnd`	`() => void`	`undefined`
`onLeave`	`() => void`	`undefined`
`onEnter`	`() => void`	`undefined`
`disabled`	`boolean`	`undefined`
`position`	`HorizontalCardinalDirection` \| `VerticalCardinalDirection`	`undefined`

Selectors are listed in the complete styling inventory.

SimpleHandler

Default handle appearance using HandlerWrapper. Its props type is SimpleHandlerProps. class and style land on the outer hit target. It consumes position, horizontalPosition, verticalPosition, disabled, onMove and onMoveEnd; wrapper children and hover callbacks are not forwarded.

Prop	Type	Default
`class`	`ClassValue`	`undefined`
`style`	`string`	`undefined`
`onMove`	`(shift: MoveDirections, event: MouseEvent` \| `TouchEvent) => void`	`undefined`
`onMoveEnd`	`() => void`	`undefined`
`disabled`	`boolean`	`undefined`
`position`	`OrdinalDirection`	`undefined`
`horizontalPosition`	`HorizontalCardinalDirection` \| `null`	`undefined`
`verticalPosition`	`VerticalCardinalDirection` \| `null`	`undefined`

Selectors are listed in the complete styling inventory.

SimpleLine

Default edge appearance using LineWrapper. Its props type is SimpleLineProps. class and style land on the outer hit target. It consumes position, disabled, onMove and onMoveEnd; wrapper children and hover callbacks are not forwarded.

Prop	Type	Default
`class`	`ClassValue`	`undefined`
`style`	`string`	`undefined`
`onMove`	`(directions: MoveDirections, event: TouchEvent` \| `MouseEvent) => void`	`undefined`
`onMoveEnd`	`() => void`	`undefined`
`disabled`	`boolean`	`undefined`
`position`	`HorizontalCardinalDirection` \| `VerticalCardinalDirection`	`undefined`

Selectors are listed in the complete styling inventory.