fetta 1.5.4 → 1.5.5

package/README.md

@@ -109,6 +109,7 @@ const result = splitText(element, options);
 | `lineClass` | `string` | `"split-line"` | CSS class for line elements |
 | `mask` | `"chars" \| "words" \| "lines"` | — | Wrap elements in `overflow: clip` container |
 | `autoSplit` | `boolean` | `false` | Re-split on container resize |
+| `resplitDebounceMs` | `number` | `100` | Debounce delay for autoSplit/full-resplit width updates (`0` disables debounce) |
 | `onResplit` | `(result) => void` | — | Callback after autoSplit/full-resplit replaces split output elements |
 | `onSplit` | `(result) => CallbackReturn` | — | Callback after initial split. Return animation/promise for `revertOnComplete` |
 | `revertOnComplete` | `boolean` | `false` | Auto-revert when returned animation completes |
@@ -158,7 +159,7 @@ import { SplitText } from "fetta/react";
 | `ref` | `Ref<HTMLElement>` | — | Ref to wrapper element |
 | `onSplit` | `(result) => CallbackReturn` | — | Called after initial split |
 | `onResplit` | `(result) => void` | — | Called when autoSplit/full-resplit replaces split output elements |
-| `options` | `SplitTextOptions` | — | Split options (`type`, classes, mask, etc.) |
+| `options` | `SplitTextOptions` | — | Split options (`type`, classes, mask, debounce, etc.) |
 | `autoSplit` | `boolean` | `false` | Re-split on container resize |
 | `waitForFonts` | `boolean` | `true` | Wait for `document.fonts.ready` before splitting |
 | `revertOnComplete` | `boolean` | `false` | Revert after animation completes |
@@ -324,6 +325,7 @@ Fetta keeps split text readable by screen readers:
 
 - Ligatures are disabled (`font-variant-ligatures: none`) because ligatures cannot span multiple elements.
 - Authored hard breaks are preserved (`<br>` and block boundaries are kept as hard split boundaries).
+- `autoSplit` width resplits are debounced by default (`100ms`), configurable via `resplitDebounceMs`.
 
 ## Browser Support
 

package/dist/{chunk-OUXSJF3P.js → chunk-44MU2I5B.js}

@@ -470,6 +470,13 @@ var ARIA_LABEL_ALLOWED_TAGS = /* @__PURE__ */ new Set([
   "footer",
   "main"
 ]);
+var DEFAULT_RESPLIT_DEBOUNCE_MS = 100;
+function resolveResplitDebounceMs(value) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+    return DEFAULT_RESPLIT_DEBOUNCE_MS;
+  }
+  return value;
+}
 function splitTextData(element, rawOptions = {}) {
   const options = rawOptions;
   const {
@@ -1378,6 +1385,7 @@ function splitText(element, rawOptions = {}) {
     lineClass = "split-line",
     mask,
     autoSplit = false,
+    resplitDebounceMs,
     onResplit,
     onSplit,
     revertOnComplete = false,
@@ -1387,6 +1395,7 @@ function splitText(element, rawOptions = {}) {
     initialClasses
   } = options;
   const isolateKerningMeasurement = options.isolateKerningMeasurement !== false;
+  const resolvedResplitDebounceMs = resolveResplitDebounceMs(resplitDebounceMs);
   if (!(element instanceof HTMLElement)) {
     throw new Error("splitText: element must be an HTMLElement");
   }
@@ -1717,8 +1726,16 @@ function splitText(element, rawOptions = {}) {
         lastChangedTarget = changedTarget;
         if (autoSplitDebounceTimer) {
           clearTimeout(autoSplitDebounceTimer);
+          autoSplitDebounceTimer = null;
         }
-        autoSplitDebounceTimer = setTimeout(handleResize, 100);
+        if (resolvedResplitDebounceMs <= 0) {
+          handleResize();
+          return;
+        }
+        autoSplitDebounceTimer = setTimeout(
+          handleResize,
+          resolvedResplitDebounceMs
+        );
       });
       targets.forEach((target) => {
         autoSplitObserver.observe(target);

package/dist/helpers.d.ts

@@ -1,4 +1,4 @@
-import { S as SplitTextResult } from './index-c1UKfWWK.js';
+import { S as SplitTextResult } from './index-Box92Sue.js';
 
 type SplitUnit = "chars" | "words" | "lines";
 type StyleInput = Partial<CSSStyleDeclaration> | ((ctx: {

package/dist/{index-c1UKfWWK.d.ts → index-Box92Sue.d.ts}

@@ -32,6 +32,8 @@ interface SplitTextOptions {
     mask?: "lines" | "words" | "chars";
     /** Auto-split on resize (observes parent element) */
     autoSplit?: boolean;
+    /** Debounce delay for autoSplit/full-resplit width updates in milliseconds (`0` disables debounce). */
+    resplitDebounceMs?: number;
     /** Callback when autoSplit/full-resplit replaces split output elements */
     onResplit?: (result: Omit<SplitTextResult, "revert" | "dispose">) => void;
     /** Callback fired after text is split, receives split elements. Return animation for revertOnComplete. */

package/dist/index.d.ts

@@ -1 +1 @@
-export { a as SplitTextOptions, S as SplitTextResult, s as splitText } from './index-c1UKfWWK.js';
+export { a as SplitTextOptions, S as SplitTextResult, s as splitText } from './index-Box92Sue.js';

package/dist/index.js

@@ -1 +1 @@
-export { splitText } from './chunk-OUXSJF3P.js';
+export { splitText } from './chunk-44MU2I5B.js';

package/dist/motion.d.ts

@@ -2,8 +2,8 @@ import { I as InitialStyles, a as InitialClasses } from './initialStyles-BGuPp5C
 import { DOMKeyframesDefinition, AnimationOptions, scroll } from 'motion';
 import { HTMLMotionProps } from 'motion/react';
 import { ReactElement, RefAttributes } from 'react';
-import { A as AnimationCallbackReturn } from './index-c1UKfWWK.js';
-export { a as CoreSplitTextOptions, S as SplitTextResult } from './index-c1UKfWWK.js';
+import { A as AnimationCallbackReturn } from './index-Box92Sue.js';
+export { a as CoreSplitTextOptions, S as SplitTextResult } from './index-Box92Sue.js';
 
 interface SplitTextOptions {
     type?: "chars" | "words" | "lines" | "chars,words" | "words,lines" | "chars,lines" | "chars,words,lines";
@@ -12,6 +12,8 @@ interface SplitTextOptions {
     lineClass?: string;
     /** Apply overflow mask wrapper to elements for reveal animations */
     mask?: "lines" | "words" | "chars";
+    /** Debounce delay for autoSplit/full-resplit width updates in milliseconds (`0` disables debounce). */
+    resplitDebounceMs?: number;
     propIndex?: boolean;
     /** Skip kerning compensation (no margin adjustments applied).
      * Kerning is naturally lost when splitting into inline-block spans.

package/dist/motion.js

@@ -1,9 +1,16 @@
 import { waitForFontsReady, createViewportObserver, reapplyInitialStyles, reapplyInitialClasses } from './chunk-PA22PLRB.js';
-import { splitTextData, buildLineFingerprintFromData, normalizeToPromise, buildKerningStyleKey, resolveAutoSplitTargets, getObservedWidth, recordWidthChange, resolveAutoSplitWidth, querySplitWords, clearKerningCompensation, applyKerningCompensation } from './chunk-OUXSJF3P.js';
+import { splitTextData, buildLineFingerprintFromData, normalizeToPromise, buildKerningStyleKey, resolveAutoSplitTargets, getObservedWidth, recordWidthChange, resolveAutoSplitWidth, querySplitWords, clearKerningCompensation, applyKerningCompensation } from './chunk-44MU2I5B.js';
 import { scroll, animate } from 'motion';
 import { usePresence, useReducedMotion, MotionConfig, motion } from 'motion/react';
 import { forwardRef, useRef, useState, useCallback, useMemo, useLayoutEffect, isValidElement, useEffect, createElement, cloneElement } from 'react';
 
+var DEFAULT_RESPLIT_DEBOUNCE_MS = 100;
+function resolveResplitDebounceMs(value) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+    return DEFAULT_RESPLIT_DEBOUNCE_MS;
+  }
+  return value;
+}
 var ELEMENT_TYPE_KEYS = ["chars", "words", "lines"];
 var VOID_HTML_TAGS = /* @__PURE__ */ new Set(["br", "hr", "img", "input", "meta", "link"]);
 function isPerTypeVariant(v) {
@@ -1097,6 +1104,15 @@ var SplitText = forwardRef(function SplitText2({
     }
     return safeFallbackWidth;
   }, []);
+  const lockCurrentRenderedLines = useCallback((root) => {
+    const lineClass = optionsRef.current?.lineClass ?? "split-line";
+    const classTokens = lineClass.split(/\s+/).filter(Boolean);
+    if (classTokens.length === 0) return;
+    const selector = `.${classTokens.join(".")}`;
+    root.querySelectorAll(selector).forEach((line) => {
+      line.style.whiteSpace = "nowrap";
+    });
+  }, []);
   useEffect(() => {
     if (!childElement) return;
     if (hasSplitRef.current) return;
@@ -1526,6 +1542,7 @@ var SplitText = forwardRef(function SplitText2({
           clearTimeout(resizeTimerRef.current);
           resizeTimerRef.current = null;
         }
+        lockCurrentRenderedLines(currentElement);
         pendingFullResplitRef.current = true;
         let resplitWidth;
         const targets = resolveAutoSplitTargets(currentElement);
@@ -1607,6 +1624,7 @@ var SplitText = forwardRef(function SplitText2({
     autoSplit,
     childTreeVersion,
     data,
+    lockCurrentRenderedLines,
     measureAndSetData,
     resolveLineMeasureWidth
   ]);
@@ -1707,14 +1725,28 @@ var SplitText = forwardRef(function SplitText2({
       }
       if (resizeTimerRef.current) {
         clearTimeout(resizeTimerRef.current);
+        resizeTimerRef.current = null;
+      }
+      const debounceMs = resolveResplitDebounceMs(
+        optionsRef.current?.resplitDebounceMs
+      );
+      if (debounceMs <= 0) {
+        lockCurrentRenderedLines(child2);
+        pendingFullResplitRef.current = true;
+        measureAndSetData(
+          true,
+          splitLines ? lineMeasureWidth : currentWidth
+        );
+        return;
       }
       resizeTimerRef.current = setTimeout(() => {
+        lockCurrentRenderedLines(child2);
         pendingFullResplitRef.current = true;
         measureAndSetData(
           true,
           splitLines ? lineMeasureWidth : currentWidth
         );
-      }, 100);
+      }, debounceMs);
     };
     resizeObserverRef.current = new ResizeObserver((entries) => {
       let changed = false;
@@ -1755,6 +1787,7 @@ var SplitText = forwardRef(function SplitText2({
   }, [
     autoSplit,
     data,
+    lockCurrentRenderedLines,
     measureAndSetData,
     measureLineFingerprintForWidth,
     resolveLineMeasureWidth

package/dist/react.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactElement } from 'react';
-import { A as AnimationCallbackReturn } from './index-c1UKfWWK.js';
-export { a as CoreSplitTextOptions, S as SplitTextResult } from './index-c1UKfWWK.js';
+import { A as AnimationCallbackReturn } from './index-Box92Sue.js';
+export { a as CoreSplitTextOptions, S as SplitTextResult } from './index-Box92Sue.js';
 import { I as InitialStyles, a as InitialClasses } from './initialStyles-BGuPp5CS.js';
 
 interface SplitTextOptions {
@@ -11,6 +11,8 @@ interface SplitTextOptions {
     lineClass?: string;
     /** Apply overflow mask wrapper to elements for reveal animations */
     mask?: "lines" | "words" | "chars";
+    /** Debounce delay for autoSplit/full-resplit width updates in milliseconds (`0` disables debounce). */
+    resplitDebounceMs?: number;
     propIndex?: boolean;
     /** Skip kerning compensation (no margin adjustments applied).
      * Kerning is naturally lost when splitting into inline-block spans.

package/dist/react.js

@@ -1,5 +1,5 @@
 import { waitForFontsReady, createViewportObserver, reapplyInitialStyles, reapplyInitialClasses } from './chunk-PA22PLRB.js';
-import { splitText, normalizeToPromise } from './chunk-OUXSJF3P.js';
+import { splitText, normalizeToPromise } from './chunk-44MU2I5B.js';
 import { forwardRef, useRef, useCallback, useState, useLayoutEffect, useEffect, isValidElement, createElement } from 'react';
 
 var SplitText = forwardRef(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fetta",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "Text splitting library with kerning compensation for animations",
   "type": "module",
   "sideEffects": false,