v0.2.0 — seamless ergonomics

Adds a single-primitive ergonomic path: drop a ref on any block element, it fits itself.

<h1 ref={useFit()}>Hello</h1>
<p ref={useFit({ maxLines: 3, maxSize: 48 })}>{text}</p>

The demo site (https://fitbox.darkroom.engineering) now has editable text in every fit example — typing refits on each keystroke via MutationObserver.

New

• useFit(options?) — callback-ref primitive. Reads textContent and computed font-family/font-weight/font-style from the element, mutates style.fontSize directly (no React re-render per frame), refits on ResizeObserver + MutationObserver. Uses React 19's callback-ref cleanup return.
• prepare(text, font) now accepts a full canvas font shorthand ('bold italic 16px Inter'). Size is normalized to 1px internally so the scaling invariant is preserved.
• Optional family on useFit, useFitText, and <FitText> — when omitted, the hook reads the element's computed font.

Fixed

• <FitText> default tag — was <span>, which is content-sized and caused a resize feedback loop (fit shrinks span → span shrinks observed width → fit shrinks further → collapses to minSize). Now defaults to <div>, which fills its container.

Kept

• useFitText(text, options) — escape hatch that returns { ref, style, result } for CSS-in-JS composition or when you need the raw FitResult.
• <FitText> — component wrapper, now accepts preset={…} for SSR-shipped initial fontSize (zero CLS on hydration) and fluid={…} for static-clamp CSS (zero JS).

Peer

• react >=19.0.0 (needed for callback-ref cleanup returns).

Bundle

• core 114B, shared chunk 5.16KB, react 4.24KB, server 2.14KB.
• Tarball 10.8KB (gzipped smaller).

Built by darkroom.engineering on top of Cheng Lou's Pretext.

v0.1.0 — first public release

Reflow-free text-to-box fitting for React, built on @chenglou/pretext.

npm: @darkroomengineering/fitbox@0.1.0

What's in v0.1.0

Core (@darkroomengineering/fitbox)

• prepare(text, fontFamily, options?) — build a 1px Pretext handle (one canvas measurement pass, cached)
• fit(handle, opts) — closed-form single-line fit (W / w₁) or reflow-free binary search for multi-line with maxLines / height bounds
• layoutFit(handle, opts) — same math, plus API-agnostic per-line { text, width, y } output for WebGL, WebGPU, Canvas, SVG
• fluidFit(handle, opts) — static clamp(min, calc(a + b·vw), max) CSS string, zero JS at runtime
• fluidFitMultiLine(handle, opts) — piecewise media-query stylesheet for wrapping text

React adapter (@darkroomengineering/fitbox/react)

• useFitText<E>(text, options) — ResizeObserver + font-ready hook
• <FitText> — component wrapper, honors fluid with zero JS path

SSR (@darkroomengineering/fitbox/server)

• configureServerCanvas(factory, options?) — canvas polyfill shim
• fitCached / fluidFitCached — LRU-memoized helpers

Bundle

• Core: 103B + 4.96KB shared chunk
• React adapter: 2.7KB
• Server: 2.1KB

MIT. Built by darkroom.engineering on top of Cheng Lou's Pretext.