fetta 1.0.0 → 1.0.2

package/README.md

@@ -7,14 +7,18 @@ Split text into characters, words, and lines while preserving the original typog
 ## Features
 
 - **Kerning Compensation** — Measures character positions before splitting, then applies margin adjustments to maintain original spacing
-- **Nested Element Support** — Preserves inline HTML elements (`<a>`, `<em>`, `<strong>`, etc.) with all attributes intact
-- **Natural Line Wrapping** — Detects lines based on Y-position clustering, works with any container width
+- **Nested Elements** — Preserves inline HTML elements (`<a>`, `<em>`, `<strong>`, etc.) with all attributes intact
+- **Line Detection** — Detects lines based on Y-position clustering, works with any container width
 - **Dash Handling** — Allows text to wrap naturally after em-dashes, en-dashes, and hyphens
 - **Auto Re-split** — Automatically re-splits on container resize with debouncing
-- **Viewport Detection** — Built-in IntersectionObserver support for scroll-triggered animations
+- **Auto-Revert** — Restore original HTML after animations
 - **Masking** — Wrap elements in clip containers for reveal animations
-- **Animation Agnostic** — Works with Motion, GSAP, or any animation library
-- **React Component** — First-class React support with hooks and cleanup
+- **Emoji Support** — Properly handles compound emojis and complex Unicode characters
+- **Accessible** — Adds `aria-label` with original text for screen readers
+- **TypeScript** — Full type definitions included
+- **React Component** — Declarative wrapper for React projects
+- **Built-in InView** — Viewport detection for scroll-triggered animations in React
+- **Library Agnostic** — Works with Motion, GSAP, or any animation library
 
 ## Installation
 
@@ -262,6 +266,12 @@ Requires:
 - `IntersectionObserver`
 - `Intl.Segmenter`
 
+### Safari
+
+Kerning compensation is not available in Safari due to its Range API returning integer values instead of sub-pixel precision. Text splitting works normally, just without the margin adjustments.
+
+When using `revertOnComplete` with character splitting in Safari, font kerning is automatically disabled to prevent visual shift on revert.
+
 ## License
 
 MIT

package/dist/{chunk-KGMU2B53.js → chunk-G5P33GJE.js}

@@ -63,6 +63,7 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
   "u",
   "var"
 ]);
+var isSafari = typeof navigator !== "undefined" && /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
 function hasInlineDescendants(element) {
   const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
   let node;
@@ -429,7 +430,7 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
         i++;
       }
     }
-    if (splitChars && allChars.length > 1) {
+    if (splitChars && allChars.length > 1 && !isSafari) {
       const positions = allChars.map((c) => c.getBoundingClientRect().left);
       for (let i2 = 1; i2 < allChars.length; i2++) {
         const charSpan = allChars[i2];
@@ -593,7 +594,7 @@ function splitText(element, {
   onSplit,
   revertOnComplete = false,
   propIndex = false,
-  willChange = false
+  willChange = true
 } = {}) {
   var _a;
   if (!(element instanceof HTMLElement)) {
@@ -634,8 +635,12 @@ function splitText(element, {
   if (splitChars) {
     element.style.fontVariantLigatures = "none";
   }
+  if (isSafari && splitChars && revertOnComplete) {
+    element.style.fontKerning = "none";
+  }
   const trackAncestors = hasInlineDescendants(element);
-  const measuredWords = measureOriginalText(element, splitChars, trackAncestors);
+  const measureChars = splitChars && !isSafari;
+  const measuredWords = measureOriginalText(element, measureChars, trackAncestors);
   const { chars, words, lines } = performSplit(
     element,
     measuredWords,
@@ -669,6 +674,9 @@ function splitText(element, {
     if (splitChars) {
       element.style.fontVariantLigatures = "none";
     }
+    if (isSafari && splitChars && revertOnComplete) {
+      element.style.fontKerning = "none";
+    }
     dispose();
   };
   if (autoSplit) {
@@ -695,7 +703,7 @@ function splitText(element, {
         element.innerHTML = originalHTML;
         requestAnimationFrame(() => {
           if (!isActive) return;
-          const newMeasuredWords = measureOriginalText(element, splitChars, trackAncestors);
+          const newMeasuredWords = measureOriginalText(element, measureChars, trackAncestors);
           const result = performSplit(
             element,
             newMeasuredWords,

package/dist/index.d.ts

@@ -42,7 +42,7 @@ interface SplitTextOptions {
     revertOnComplete?: boolean;
     /** Add CSS custom properties (--char-index, --word-index, --line-index) */
     propIndex?: boolean;
-    /** Add will-change: transform, opacity to split elements for better animation performance */
+    /** Add will-change: transform, opacity to split elements for better animation performance (default: true) */
     willChange?: boolean;
 }
 /**

package/dist/index.js

@@ -1 +1 @@
-export { splitText } from './chunk-KGMU2B53.js';
+export { splitText } from './chunk-G5P33GJE.js';

package/dist/react.js

@@ -1,4 +1,4 @@
-import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-KGMU2B53.js';
+import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-G5P33GJE.js';
 import { forwardRef, useRef, useCallback, useState, useLayoutEffect, useEffect, isValidElement, cloneElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -63,6 +63,7 @@ var SplitText = forwardRef(
         if (!containerRef.current) return;
         const result = splitText(childElement, __spreadProps(__spreadValues({}, optionsRef.current), {
           autoSplit,
+          revertOnComplete: revertOnCompleteRef.current,
           onResize: (resizeResult) => {
             var _a2;
             const newSplitTextElements = {
@@ -108,22 +109,21 @@ var SplitText = forwardRef(
           const inViewOptions = typeof inViewRef.current === "object" ? inViewRef.current : {};
           const threshold = (_a = inViewOptions.amount) != null ? _a : 0;
           const rootMargin = (_b = inViewOptions.margin) != null ? _b : "0px";
+          const thresholds = threshold > 0 ? [0, threshold] : 0;
           observerRef.current = new IntersectionObserver(
             (entries) => {
               const entry = entries[0];
               if (!entry) return;
               const isOnce = typeof inViewRef.current === "object" && inViewRef.current.once;
-              if (entry.isIntersecting) {
+              if (entry.isIntersecting && entry.intersectionRatio >= threshold) {
                 if (isOnce && hasTriggeredOnceRef.current) return;
                 hasTriggeredOnceRef.current = true;
                 setIsInView(true);
-              } else {
-                if (!isOnce) {
-                  setIsInView(false);
-                }
+              } else if (!entry.isIntersecting && !isOnce) {
+                setIsInView(false);
               }
             },
-            { threshold, rootMargin }
+            { threshold: thresholds, rootMargin }
           );
           observerRef.current.observe(containerRef.current);
         }

package/package.json

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