overlays
Anchored Inspector
A selected source keeps its readable properties in a nearby inspector instead of a detached modal.
- overlays
- inspector
- selection
- context
A source-bound inspector; it is not a generic drawer or property form.
Live preview
Quick usage
import { AnchoredInspector } from "@pinky-ui/systems";
<AnchoredInspector items={items} />Presets
Default
Restrained production behaviour.
Default behaviour
Quiet
Reduced intensity for dense product screens.
disabled={true}
Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add anchored-inspectorPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | AnchoredInspectorItem[] | — | Inspectable source items and their contextual values. |
| className | string | — | Styles the outer interaction surface. |
Accessibility
- Keyboard and touch paths match the pointer interaction.
- Stable labels and values remain available without motion.
Performance
- One inspector region updates for the active source.
- No viewport-level layer or pointer loop is required.
Reduced motion
Motion resolves immediately while semantics, focus and state remain unchanged.
When to use
- Properties that should remain adjacent to a selected object
When not to use
- Long forms or global settings that need a route
Skill
Purpose
Use an anchored inspector when a selected source needs readable properties without leaving the source collection or opening a detached dialog.
Interaction anatomy
- Source buttons keep selection and pressed state visible.
- One nearby inspector changes for the active source.
- The same relationship stacks naturally on narrow screens.
Good for
Canvas objects, editorial studies, media items and settings previews with short property summaries.
Avoid
Long forms, global settings or content that deserves a route of its own.
Live example
Select each source in the Anchored Inspector preview to rebind the nearby region.
Usage
<AnchoredInspector items={sources} />Tune
Keep the inspector short, preserve the selected source label, and use a real value hierarchy rather than a decorative tooltip.
Accessibility and reduced motion
Use labelled buttons with pressed state and a named inspector region. Selection must work with Enter, Space and touch. Reduced motion changes the region immediately without removing the selected relationship.