Canvas

Selection frame

A drawing-tool frame around selected text or the control being addressed.

Specimen

Dimensions are drawn the way a technical sheet draws them: an extension line springing off each edge, a dimension line running between them terminated by 45-degree ticks, and the value breaking the line in the middle rather than floating beside it. Every rule is roughened by the same edge filter as the rest of the system; the values are not, because displacement smears glyphs.

Select a few words on this page — you get the frame, its handles and its measurements. Now select this whole paragraph: once the selection spans more than one line, the figures are joined by full dimension lines along the bottom and right.

or an inline link

The same frame answers for controls. Point at this button and you get the box alone; hold the pointer down and the corner handles arrive; let go and it stays framed, with its width and height reported, for as long as it holds focus. Tab to it for the same thing without a pointer, and hold Enter or Space for the press.

It travels rather than teleports. Move between two controls and the box eases across, its figures counting as it goes, so the eye can follow where the frame went. Leave them entirely and it fades rather than vanishing. Under prefers-reduced-motion it does neither and simply arrives.

Props

Prop	Type	Note
—	`none`	Mounted once in the root layout. It tracks the document's own selection, and the store every actionable primitive publishes to.

Every primitive also forwards the native props of the element it renders, so aria-*, id and event handlers work without being listed here.

Use it for

Nothing to wire up: it is global, and reads the browser's selection and the shared highlight store directly.
Tune the box through --frame-line, --frame-line-hover, --frame-handle, --frame-handle-fill, --frame-label and --frame-z.
Tune the dimensions through --dimension-line, --dimension-gap, --dimension-offset and --dimension-tick.
Tune the travel through --frame-travel and --frame-travel-ease, and the exit through --frame-fade. GSAP reads the first two, CSS the third.

Do not use it for

Giving it pointer events. It sits over text the reader is mid-drag on, and over every control on the page, and must never intercept either.
Drawing the whole frame at hover. Hover happens on every sweep across the navigation; if it arrives fully drawn there is nothing left for press or focus to say, and the page reads as flashing.
Treating it as the focus indicator. It is decorative and hidden from assistive technology — --focus-ring is still what marks focus.
Drawing the full dimension apparatus around a single line, or around a control. The figures are worth having at any size, but the rules that carry them are a lot of drawing around very little.
Easing it behind a text selection. It travels between controls, but it follows a live drag exactly — a frame catching up with the words being selected reads as lag, not grace.
Writing --frame-x/y/w/h from anywhere but useFrameMotion. A tween writes them every frame, and a second writer would be fighting it.