Observes an element's inline size and reports a discrete shrink step for it.
Takes the element itself rather than a ref: mutating ref.current does not re-run an effect, so
a ref-based version would silently never observe a node that attaches after mount. Callers keep
the node in state behind a callback ref.
Observe the element whose box IS the space available to content — a padding-free inner row rather
than a wrapper that reserves space with padding. The measurement is a border box, so padding on
the observed element counts as usable width; where a toolbar's reserved space lives can differ
between platforms for the same window, which would otherwise make the steps platform-dependent.
thresholds must be a stable reference (a module-level constant). A fresh array on every render
would tear down and rebuild the observer on every render.
Hidden views: rc-dock keeps an inactive tab's web view mounted with display: none, where the
width reads 0 and the step pins to the narrowest value. ResizeObserver fires again with the
real width when the tab is shown, so no catch-up mechanism is needed — but a width of 0 is not a
measurement, and the step taken from it must not make the next real one sticky. Being shown again
is a reveal, not a drag, so hysteresis is skipped for that first width. Without this a consumer
with a single threshold has no other band to relax into and stays at its narrowest form at a
width where it should not be. See .claude/rules/cross-view-sync-hidden-views.md.
Parameters
element: undefined|HTMLElement
The container to observe, or undefined before it mounts.
thresholds: readonlynumber[]
Widest-first list of pixel breakpoints.
Returns number
The current shrink step; 0 (widest) until the first measurement lands.
Observes an element's inline size and reports a discrete shrink step for it.
Takes the element itself rather than a ref: mutating
ref.currentdoes not re-run an effect, so a ref-based version would silently never observe a node that attaches after mount. Callers keep the node in state behind a callback ref.Observe the element whose box IS the space available to content — a padding-free inner row rather than a wrapper that reserves space with padding. The measurement is a border box, so padding on the observed element counts as usable width; where a toolbar's reserved space lives can differ between platforms for the same window, which would otherwise make the steps platform-dependent.
thresholdsmust be a stable reference (a module-level constant). A fresh array on every render would tear down and rebuild the observer on every render.Hidden views: rc-dock keeps an inactive tab's web view mounted with
display: none, where the width reads 0 and the step pins to the narrowest value.ResizeObserverfires again with the real width when the tab is shown, so no catch-up mechanism is needed — but a width of 0 is not a measurement, and the step taken from it must not make the next real one sticky. Being shown again is a reveal, not a drag, so hysteresis is skipped for that first width. Without this a consumer with a single threshold has no other band to relax into and stays at its narrowest form at a width where it should not be. See.claude/rules/cross-view-sync-hidden-views.md.