Summary lengthPro

One summary at several lengths on a stepped ruler, TL;DR to detailed, with word counts under each stop and an instant swap of the text.

Markdown

On this page

ProA 14 page postmortem at four lengths on a ruler, from a one sentence TL;DR to the detailed version, swapped instantly.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/summary-length

Usage

tsx

import { SummaryLength } from "@/components/ui/chatcn/pro/summary-length"

<SummaryLength
  levels={[
    { id: "tldr", label: "TL;DR", words: 26, text: tldr },
    { id: "detailed", label: "Detailed", words: 214, text: detailed },
  ]}
  defaultValue="tldr"
/>

Lengths that are ready swap with no wait; a length without text shows that it is being written, and one with error offers Retry. The ruler fills up to the chosen stop, so how much you are reading is visible before you read it.

Examples

States

ProA longer length being written, a failed length, disabled and three stops.

Props

Prop	Type	Notes
`levels`	`{ id, label, text?, words?, error? }[]`	Shortest first
`value`, `defaultValue`, `onValueChange`	`string`	The chosen level id
`onRetry`	`(id) => void`	Retry a failed length
`label`, `source`	`string`, `ReactNode`	Names the control; the line above the text
`disabled`	`boolean`	Locks the ruler

Keyboard

Key	Action
Arrow keys	Shorter or longer
Home or End	TL;DR or the most detailed

Accessibility

The ruler is a radio group; each stop reads its label and word count.
The summary is busy while a length is being written.

Motion

Pointer picks fill the ruler over 180 ms with a scale transform; keyboard picks jump. The summary itself swaps instantly, as the name promises.