Component

PinchContract

Drag either handle or use its arrow keys. The child sits inside a real paper region whose left edge and width change with the handles; the bounds remain until Reopen the contract restores the opening jurisdiction.

Possible use

It could let a reviewer negotiate how much width a handoff warning may consume, or let a presenter pinch an agenda label until it fits a deliberately narrow slide column. Both uses solve layout with a tiny bilateral treaty.

Reasonable alternative

A reasonable local alternative is responsive CSS with a max-width chosen from the surrounding layout. A normal container does not need two handles and a hearing to wrap text.

01 / Preview

Try it yourself.

The content must fit this exact jurisdiction

Fit the handoff inside this sentence-sized jurisdiction.

Mechanism

1: Start with a generous paper jurisdiction.
2: Drag either handle inward or outward to pinch the content.
3: The actual paper width changes and keeps the negotiated bounds.
4: Use arrow keys on a handle, then reopen the contract.

02 / Usage

Put it somewhere.

example.tsxTSX

import { PinchContract } from "gra-ui";
import "gra-ui/styles.css";

export function ContractedNote() {
  return (
    <PinchContract>
      <span>Fit this note inside its jurisdiction.</span>
    </PinchContract>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content physically squeezed between the two draggable jurisdiction handles.