# ManipulationFrame

```ts
import {
  ManipulationFrame,
  Rectangle,
  useManipulation,
  useSignal,
} from "@pibbl/core";
```

`ManipulationFrame` establishes the local box and coordinate space for one
controller. Spread `controller.frameProps` onto it. Handles for that controller
must be descendants of this frame, and a controller may attach to one frame.

```tsx
const box = useSignal({ left: 40, top: 32, width: 180, height: 100 });
const manipulation = useManipulation({ box });

<ManipulationFrame {...manipulation.frameProps}>
  <Rectangle style={{ width: 180, height: 100, fill: "#2563eb" }} />
</ManipulationFrame>;
```

Related types: [PibblManipulationController](/reference/types/events/#pibblmanipulationcontroller), [PibblManipulationFrameProps](/reference/types/events/#pibblmanipulationframeprops).

## API details from source

<span id="api-ManipulationFrame"></span>

Provides a manipulation controller and its presentation frame to descendant handles.

```ts
ManipulationFrame: PibblPrimitiveComponent<FrameProps, PrimitiveInput<FrameProps, FrameStyle>>
```

Related API: [ManipulationFrame](/reference/components/manipulation-frame/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [PrimitiveInput](/reference/types/styles/#primitiveinput).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[PibblManipulationFrameProps](/reference/types/events/#pibblmanipulationframeprops)

[View source — packages/core/src/lib/manipulation/frame.ts:73](/source/packages/core/src/lib/manipulation/frame-ts/#L73)

## Implementation guidance for agents

Read the [Input, focus, and native HTML companion](/agents/topics/input/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Own a manipulation controller](/minimal-examples/manipulation/controller/): Compose a drag surface and one resize handle, inspect gesture state, and cancel explicitly. [Plain source](/minimal/manipulation/controller.tsx)
## Documentation version

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