@shipitandpray/pretext-accordion

How It Works

1. Mount: When an AccordionItem mounts, useAccordionHeight extracts text content from children.
2. Predict: Text + container width + font info are passed to @chenglou/pretext's prepare() and layout() functions. These use an offscreen canvas to predict how text will wrap — no DOM measurement needed.
3. Animate: The predicted height is used as the CSS transition target: height: 0 to height: {predicted}px. Since the height is known before rendering, there is zero layout shift.
4. Settle: After the transition completes, height switches to auto so the content can adapt to dynamic changes.
5. Fallback: If prediction confidence is low (complex content with images), a one-time scrollHeight measurement is used and cached.