Component

PerimeterEscort

Drag the cargo along its rail or use the arrow keys. The child remains at the chosen horizontal coordinate and reports the distance from center until it is explicitly returned, making movement change the actual layout.

Possible use

It could let a reviewer park a handoff field wherever a discussion happens to drift, or let a presenter slide an agenda note toward the speaker who claims it. Neither use benefits from preserving an arbitrary coordinate.

Reasonable alternative

A reasonable local alternative is normal flow with a deliberate alignment or one selected state. A movable rail spends direct manipulation on relocating readable content.

01 / Preview

Try it yourself.

Park this note somewhere arbitrary

Mechanism

1: Drag the cargo along its rail, or focus it and use the arrow keys.
2: The content keeps its exact new position instead of returning to flow.
3: Return it to center when the escort has served no purpose.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function EscortedNotice() {
  return <PerimeterEscort><span>Park this note</span></PerimeterEscort>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe cargo moved along the unnecessary escort rail.