ns-ui
Prompt composition rendered as machinist shims fitted into a fixed-height gap: each section's row height maps to its real token count, order is drag/keyboard reorderable with FLIP transforms, and an over-budget insert compresses the stack, bounces back to the tray, and surfaces a truncation remedy instead of an error string.
Use when Reach for context-prompt-shims when the surface is authoring a prompt's composition — assembling, ordering, rejecting, and remediating sections before they're sent. It differs from meter-context-window, which is a read-only budget meter for an already-composed context window: meter-context-window tells you how full the window is, context-prompt-shims is where you decide what goes in it and in what order, including what happens when a candidate doesn't fit.
Install
npx shadcn add https://design.helpmarq.comns-ui / context-prompt-shims
Drag a row (or Space to grab, arrows to move, Space to drop) to reorder the prompt. Insert a retrieved doc from the tray — one fits, one doesn't.
The clearance above the stack is real empty space, not a percentage. An over-budget insert compresses the stack, bounces back to the tray, and pulses the largest trimmable section with a fix.
| Prop | Type | Default | Description |
|---|---|---|---|
| budget? | number | — | total context-window budget, in tokens |
| sections? | ShimSection[] | — | initial stack, top-to-bottom = prompt order |
| candidates? | ShimSection[] | — | candidates waiting in the tray, not yet part of the prompt |
| scale? | number | — | px per token for row height (min 8px floor still applies) |
| className? | string | — | — |
| aria-label? | string | — | — |