Component

LassoLock

It turns a rectangle drawn around ordinary children into a permanent locking decision. Enclose at least two pieces and the ones whose centers fit inside the lasso leave the loose field for a real tray; everything else stays put.

Possible use

It could be used to make a reviewer draw a literal box around the fields that belong together on a handoff card, or to let a presenter physically quarantine the agenda items they are about to discuss.

Reasonable alternative

A reasonable local alternative is an array filter with one selected range and a normal layout. Publishing a lasso lock is difficult to defend because a rectangle around content is not a meaningful ownership boundary.

01 / Preview

Try it yourself.

Title

Status

Owner

Date

Open tray

Draw one box around the pieces that deserve to stay together.

Mechanism

1: Start with four pieces loose in the field.
2: Drag a rectangle around the center of at least two pieces.
3: Release: enclosed pieces leave the field and arrive in the locked tray.
4: Tab to the field and press Space to lock the first two, or reset to draw again.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function BoxedBrief() {
  return (
    <LassoLock>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Date</span>
    </LassoLock>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe pieces that can be enclosed and moved into the locking tray.