# useManipulation

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

`useManipulation(options)` creates one controller for the mounted component.
Pass a writable box signal and attach `controller.frameProps` to a
[`ManipulationFrame`](/reference/components/manipulation-frame/). Descendant handles
start interactions; `active` and `snapshot` expose readonly signal state, and
`cancel()` restores the starting geometry for an active interaction.

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

Related types: [PibblManipulationController](/reference/types/events/#pibblmanipulationcontroller), [PibblManipulationOptions](/reference/types/events/#pibblmanipulationoptions).

## API details from source

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

Creates a mount-owned controller for moving, resizing, and rotating declared geometry.

```ts
useManipulation: (options: PibblManipulationOptions) => PibblManipulationController
```

Related API: [useManipulation](/reference/hooks/use-manipulation/), [PibblManipulationOptions](/reference/types/events/#pibblmanipulationoptions), [PibblManipulationController](/reference/types/events/#pibblmanipulationcontroller).

### Parameters

- **`options`** — Target state, enabled operations, constraints, and lifecycle callbacks. See
[PibblManipulationOptions](/reference/types/events/#pibblmanipulationoptions) .

### Returns

Stable controls and state for the mounted manipulation interaction. See
[PibblManipulationController](/reference/types/events/#pibblmanipulationcontroller) .

### See also

[PibblManipulationOptions](/reference/types/events/#pibblmanipulationoptions)

[PibblManipulationController](/reference/types/events/#pibblmanipulationcontroller)

[View source — packages/core/src/lib/manipulation/controller.ts:194](/source/packages/core/src/lib/manipulation/controller-ts/#L194)

## 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.