Component

CalibrationWindow

It makes a child pass through four progressively narrower calibration apertures. Each notch changes the actual width and elevation of the notice, leaving it fully calibrated inside a window that never needed measuring.

Possible use

It could make a reviewer certify that a handoff notice fits increasingly strict apertures, or let a presenter calibrate an agenda label before allowing it into a slide.

Reasonable alternative

A reasonable local alternative is one max-width and ordinary layout. Four irreversible calibration notches turn sizing into paperwork without making the notice more useful.

01 / Preview

Try it yourself.

Ready for review

Mechanism

1: Start with a notice in a generous aperture.
2: Press Calibrate one notch to narrow the actual notice width.
3: Four marks change the box, shadow and progress state together.
4: Open it again when the measurement has become more important than the notice.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function CalibratedNotice() {
  return <CalibrationWindow><span>Ready for review</span></CalibrationWindow>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe notice squeezed through the four calibration windows.