# Manipulable

Bind `style` to a writable finite box signal. `draggable`, `resizable`, and `rotatable` accept booleans or their operation options; omitted operations are disabled. Rotation also requires a writable radians signal. Nested layouts consume the resized frame allocation.

```tsx
import { Manipulable, Rectangle, useSignal } from "@pibbl/core";

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

function Card() {
  return <Rectangle style={{ width: 180, height: 100, fill: "#2563eb" }} />;
}

<Manipulable style={box} draggable resizable>
  <Card />
</Manipulable>;
```

Use `useManipulation` with explicit handles when only part of the content should initiate dragging.

Related types: [PibblManipulableProps](/reference/types/events/#pibblmanipulableprops).

Configure handle presentation with `resizeHandles={{ style: { readout: { gap: 5 } }, formatReadout }}` and `rotationHandle={{ style: { arc: true, readout: true }, readoutUnit: "degrees" }}`. `resizeHandles` also accepts the existing positions shorthand.

`dragHandle` forwards move-readout styling and `formatReadout({ left, top })` to the content wrapper. The wrapper uses participating child hit areas; it does not make gaps or an empty component draggable. Use explicit `DragHandle` composition to limit movement to a title bar or grip.

## API details from source

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

Compose the same signal-owned frame and handles used by useManipulation.

```ts
Manipulable: (props: PibblManipulableProps) => PibblNode
```

Related API: [Manipulable](/reference/components/manipulable/), [PibblManipulableProps](/reference/types/events/#pibblmanipulableprops), [PibblNode](/reference/types/elements-components/#pibblnode).

### Parameters

- **`props`** — Manipulation controller and child content. See [PibblManipulableProps](/reference/types/events/#pibblmanipulableprops).

### Returns

Child content with manipulation interaction applied. See [PibblNode](/reference/types/elements-components/#pibblnode).

### See also

[PibblManipulableProps](/reference/types/events/#pibblmanipulableprops)

[PibblNode](/reference/types/elements-components/#pibblnode)

[View source — packages/core/src/lib/manipulation/manipulable.ts:92](/source/packages/core/src/lib/manipulation/manipulable-ts/#L92)

## Implementation guidance for agents

Read the [Authoring, signals, and lifecycle companion](/agents/topics/lifecycle/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Drag, resize, and rotate](/minimal-examples/manipulation/basic/): Use the convenience component with a writable geometry box. [Plain source](/minimal/manipulation/basic.tsx)
## Documentation version

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