fetta 1.5.5 → 1.6.0

package/README.md

@@ -2,54 +2,29 @@
 
 Text splitting that keeps kerning intact.
 
-Split text into chars, words, and lines while preserving original typography. `fetta` provides the framework-agnostic `splitText()` API for vanilla and imperative workflows, `fetta/react` is for React lifecycle and callback-based control, and `fetta/motion` is for Motion-first variants and triggers. `fetta/helpers` adds optional utilities for advanced layered effects.
+Split text into characters, words, and lines for animation — without breaking your typography. Most splitting libraries wrap each character in a `<span>` and call it done, but that destroys the kerning between character pairs. Fetta compensates for this automatically.
 
 Docs: https://fetta.dimi.me/
 
-## Installation
+## Install
 
 ```bash
 npm install fetta
 ```
 
-## Choose Your Entry Point
-
-| Import | Use when | Size (min + brotli) |
-|------|------|------|
-| `fetta` | You want the framework-agnostic core API (`splitText`) | ~7.04 kB |
-| `fetta/react` | You use React and want callback/lifecycle control | ~8.18 kB |
-| `fetta/motion` | You use Motion variants and built-in triggers | ~13.71 kB |
-| `fetta/helpers` | You need optional utilities for layered split effects | ~742 B |
-
-## Features
-
-- **Kerning Compensation** — Maintains original character spacing when splitting by chars
-- **Nested Elements** — Preserves `<a>`, `<em>`, `<strong>` and other inline elements with all attributes
-- **Line Detection** — Groups words into rendered lines
-- **Dash Handling** — Allows text to wrap naturally after em-dashes, en-dashes, hyphens, and slashes
-- **Auto Re-split** — Re-splits on container resize
-- **Auto Revert** — Restores original HTML after animations
-- **Masking** — Wrap elements in clip containers for reveal animations
-- **Emoji Support** — Properly handles compound emojis and complex Unicode characters
-- **Accessible** — Automatic screen reader support, even with nested links or emphasis
-- **TypeScript** — Full type definitions included
-- **Library Agnostic** — Works with Motion, GSAP, CSS, WAAPI, or custom animation code
-
 ## Quick Start
 
-### Vanilla JavaScript (`fetta`)
+### Vanilla
 
 ```ts
 import { splitText } from "fetta";
 import { animate, stagger } from "motion";
 
-const element = document.querySelector("h1");
-const { chars } = splitText(element, { type: "chars" });
-
+const { chars } = splitText(document.querySelector("h1"), { type: "chars" });
 animate(chars, { opacity: [0, 1], y: [20, 0] }, { delay: stagger(0.02) });
 ```
 
-### React Callbacks (`fetta/react`)
+### React
 
 ```tsx
 import { SplitText } from "fetta/react";
@@ -62,195 +37,149 @@ import { animate, stagger } from "motion";
   }}
 >
   <h1>Hello World</h1>
-</SplitText>;
+</SplitText>
 ```
 
-### Motion Variants (`fetta/motion`)
+### Motion
 
 ```tsx
 import { SplitText } from "fetta/motion";
 import { stagger } from "motion";
 
 <SplitText
-  variants={{
-    hidden: { words: { opacity: 0, y: 20 } },
-    visible: { words: { opacity: 1, y: 0 } },
-  }}
-  initial="hidden"
-  animate="visible"
+  initial={{ opacity: 0, y: 20 }}
+  animate={{ opacity: 1, y: 0 }}
   transition={{ duration: 0.65, delay: stagger(0.04) }}
   options={{ type: "words" }}
 >
   <h1>Hello World</h1>
-</SplitText>;
+</SplitText>
 ```
 
-`fetta/motion` supports standard Motion targets, per-type targets (`chars` / `words` / `lines` / `wrapper`), and split-aware function variants.
+### Morph
 
-## API
+```tsx
+import { MorphText } from "fetta/morph";
 
-### `splitText(element, options?)` (`fetta`)
+<MorphText>{text}</MorphText>
+```
 
-Splits text content into characters, words, and/or lines.
+## Features
 
-```ts
-import { splitText } from "fetta";
+- **Kerning Compensation** — Maintains original character spacing when splitting by chars
+- **Nested Elements** — Preserves `<a>`, `<em>`, `<strong>` and other inline elements with all attributes
+- **Line Detection** — Groups words into rendered lines
+- **Dash Handling** — Wraps naturally after em-dashes, en-dashes, hyphens, and slashes
+- **Auto Re-split** — Re-splits on container resize
+- **Auto Revert** — Restores original HTML after animations
+- **Masking** — Clip containers for reveal animations
+- **Emoji Support** — Handles compound emojis and complex Unicode characters
+- **Accessible** — Automatic screen reader support, even with nested links or emphasis
+- **TypeScript** — Full type definitions included
+- **Zero Dependencies** — 7 kB core with no external packages
+- **Library Agnostic** — Works with Motion, GSAP, CSS, WAAPI, or any animation code
 
-const result = splitText(element, options);
-```
+## Entry Points
+
+| Import | Use for | Size |
+|------|------|------|
+| `fetta` | Vanilla JS or any framework | 7.11 kB |
+| `fetta/react` | React with callback/lifecycle control | 8.23 kB |
+| `fetta/motion` | Declarative Motion animations | 13.78 kB |
+| `fetta/morph` | Standalone MorphText component | 7.95 kB |
 
-#### Options
-
-| Option | Type | Default | Description |
-|------|------|------|------|
-| `type` | `SplitType` | `"chars,words,lines"` | What to split: `"chars"`, `"words"`, `"lines"`, or combinations |
-| `charClass` | `string` | `"split-char"` | CSS class for character elements |
-| `wordClass` | `string` | `"split-word"` | CSS class for word elements |
-| `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 |
-| `propIndex` | `boolean` | `false` | Add CSS custom properties: `--char-index`, `--word-index`, `--line-index` |
-| `disableKerning` | `boolean` | `false` | Skip kerning compensation (no margin adjustments) |
-| `initialStyles` | `object` | — | Apply initial inline styles to chars/words/lines after split. Values can be objects or `(el, index) => object` functions |
-| `initialClasses` | `object` | — | Apply initial CSS classes to chars/words/lines. Values are strings |
+Sizes are minified + brotli.
 
-```ts
-type SplitType =
-  | "chars"
-  | "words"
-  | "lines"
-  | "chars,words"
-  | "words,lines"
-  | "chars,lines"
-  | "chars,words,lines";
-```
+## API Overview
 
-#### Return Value
+Full API reference at [fetta.dimi.me](https://fetta.dimi.me/). Summary below.
+
+### `splitText(element, options?)` — [Core docs](https://fetta.dimi.me/api/core)
+
+Returns `{ chars, words, lines, revert }`. Key options: `type`, `mask`, `autoSplit`, `onSplit`, `revertOnComplete`, `initialStyles`, `propIndex`.
 
 ```ts
-interface SplitTextResult {
-  chars: HTMLSpanElement[];
-  words: HTMLSpanElement[];
-  lines: HTMLSpanElement[];
-  revert: () => void;
-}
+import { splitText } from "fetta";
+import { animate, stagger } from "motion";
+
+document.fonts.ready.then(() => {
+  const { words } = splitText(element, { type: "words", mask: "words" });
+  animate(words, { y: ["100%", "0%"] }, { delay: stagger(0.1) });
+});
 ```
 
-### `<SplitText>` (`fetta/react`)
+### `<SplitText>` — [React docs](https://fetta.dimi.me/api/react)
+
+Wraps `splitText()` with React lifecycle, viewport callbacks, and automatic cleanup. Key props: `onSplit`, `onResplit`, `options`, `autoSplit`, `waitForFonts`, `revertOnComplete`, `viewport`, `onViewportEnter`, `initialStyles`.
 
 ```tsx
 import { SplitText } from "fetta/react";
-```
-
-`fetta/react` wraps `splitText()` for React with lifecycle hooks, viewport callbacks, and automatic cleanup.
-
-#### React Props
-
-| Prop | Type | Default | Description |
-|------|------|------|------|
-| `children` | `ReactElement` | — | Single React element to split |
-| `as` | `keyof JSX.IntrinsicElements` | `"div"` | Wrapper element type |
-| `className` | `string` | — | Wrapper class name |
-| `style` | `CSSProperties` | — | Wrapper styles |
-| `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, 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 |
-| `onRevert` | `() => void` | — | Called when split text reverts |
-| `viewport` | `ViewportOptions` | — | Configure viewport detection |
-| `onViewportEnter` | `(result) => CallbackReturn` | — | Called when entering viewport |
-| `onViewportLeave` | `(result) => CallbackReturn` | — | Called when leaving viewport |
-| `initialStyles` | `object` | — | Apply initial inline styles to chars/words/lines |
-| `initialClasses` | `object` | — | Apply initial CSS classes to chars/words/lines |
-| `resetOnViewportLeave` | `boolean` | `false` | Re-apply initial styles/classes when leaving viewport |
-
-All callbacks receive:
-
-```ts
-{
-  chars: HTMLSpanElement[];
-  words: HTMLSpanElement[];
-  lines: HTMLSpanElement[];
-  revert: () => void;
-}
-```
+import { animate, stagger } from "motion";
 
-```ts
-type CallbackReturn =
-  | void
-  | Promise<unknown>
-  | { finished: Promise<unknown> }
-  | { then: (onFulfilled?: ((result: unknown) => unknown) | undefined) => unknown }
-  | CallbackReturn[];
+<SplitText
+  options={{ type: "words" }}
+  initialStyles={{ words: { opacity: 0, transform: "translateY(20px)" } }}
+  viewport={{ amount: 0.5 }}
+  onViewportEnter={({ words }) =>
+    animate(words, { opacity: 1, y: 0 }, { delay: stagger(0.05) })
+  }
+  resetOnViewportLeave
+>
+  <p>Animates when scrolled into view</p>
+</SplitText>
 ```
 
-`fetta/react` and `fetta/motion` both forward common wrapper DOM props (`id`, `role`, `tabIndex`, `aria-*`, `data-*`, event handlers) to the wrapper.
+### `<SplitText>` — [Motion docs](https://fetta.dimi.me/api/motion)
 
-### `<SplitText>` (`fetta/motion`)
+Includes all React props plus Motion animation: `variants`, `initial`, `animate`, `exit`, `whileInView`, `whileScroll`, `whileHover`, `whileTap`, `whileFocus`, `transition`, `delayScope`, `custom`. Supports flat targets, per-type targets (`chars`/`words`/`lines`/`wrapper`), and function variants.
 
 ```tsx
 import { SplitText } from "fetta/motion";
+import { stagger } from "motion";
+
+<SplitText
+  variants={{
+    hidden: { chars: { opacity: 0, y: 10 } },
+    visible: {
+      chars: ({ lineIndex }) => ({
+        opacity: 1,
+        y: 0,
+        transition: {
+          delay: stagger(0.02, { startDelay: lineIndex * 0.15 }),
+        },
+      }),
+    },
+  }}
+  initial="hidden"
+  animate="visible"
+  options={{ type: "chars,lines", mask: "lines" }}
+>
+  <p>Per-line staggered reveal</p>
+</SplitText>
 ```
 
-Variant-driven component built on Motion. Includes every `fetta/react` prop plus Motion animation/triggers (`initial`, `animate`, `exit`, `whileInView`, `whileScroll`, `whileHover`, etc.).
-
-#### Motion-only Props
-
-| Prop | Type | Default | Description |
-|------|------|------|------|
-| `variants` | `Record<string, VariantDefinition<TCustom>>` | — | Named variant definitions |
-| `initial` | `string \| VariantDefinition<TCustom> \| false` | — | Initial variant applied instantly after split |
-| `animate` | `string \| VariantDefinition<TCustom>` | — | Base variant |
-| `exit` | `string \| VariantDefinition<TCustom> \| false` | — | Exit variant (`AnimatePresence`) |
-| `whileInView` | `string \| VariantDefinition<TCustom>` | — | Variant while element is in view |
-| `whileOutOfView` | `string \| VariantDefinition<TCustom>` | — | Variant after element leaves view |
-| `whileScroll` | `string \| VariantDefinition<TCustom>` | — | Scroll-driven variant (highest trigger priority) |
-| `whileHover` | `string \| VariantDefinition<TCustom>` | — | Variant on hover |
-| `whileTap` | `string \| VariantDefinition<TCustom>` | — | Variant on tap/press |
-| `whileFocus` | `string \| VariantDefinition<TCustom>` | — | Variant on focus |
-| `animateOnResplit` | `boolean` | `false` | Replay `initial -> animate` on autoSplit/full-resplit |
-| `scroll` | `{ offset?, axis?, container? }` | — | Scroll tracking options for `whileScroll` |
-| `transition` | `AnimationOptions` | — | Global/default transition for variants |
-| `custom` | `TCustom` | — | Custom data forwarded to function variants |
-| `delayScope` | `"global" \| "local"` | `"global"` | Delay-function index scope (`globalIndex` vs local `index`) |
-| `reducedMotion` | `"user" \| "always" \| "never"` | `"never"` | Reduced-motion behavior for this component |
-| `onHoverStart` | `() => void` | — | Called when hover starts |
-| `onHoverEnd` | `() => void` | — | Called when hover ends |
-
-Exit animations use standard Motion behavior (`SplitText` must be a direct child of `AnimatePresence`):
+### `<MorphText>` — [Morph docs](https://fetta.dimi.me/api/morph)
 
-```tsx
-import { AnimatePresence } from "motion/react";
-import { SplitText } from "fetta/motion";
+Text morphing with stable token identity. Matching tokens interpolate position, new tokens enter, removed tokens exit. Supports `splitBy="chars"` (default) and `splitBy="words"`. The `initial`, `animate`, and `exit` props accept static targets or `({ index, count }) => Target` callbacks.
 
-<AnimatePresence>
-  {isVisible && (
-    <SplitText
-      variants={{
-        enter: { opacity: 1, y: 0 },
-        exit: { opacity: 0, y: 12 },
-      }}
-      initial="enter"
-      animate="enter"
-      exit="exit"
-      options={{ type: "words" }}
-    >
-      <h1>Goodbye</h1>
-    </SplitText>
-  )}
-</AnimatePresence>;
+```tsx
+import { MorphText } from "fetta/morph";
+
+<MorphText
+  splitBy="words"
+  initial={({ index, count }) => ({
+    opacity: 0,
+    x: index <= count / 2 ? -75 : 75,
+  })}
+  animate={{ opacity: 1, x: 0 }}
+>
+  {statusText}
+</MorphText>
 ```
 
-### `createSplitClones(splitResult, options)` (`fetta/helpers`, optional)
+### `createSplitClones()` — [Helpers docs](https://fetta.dimi.me/api/helpers)
 
-Helpers are optional utilities for advanced layered reveal/swap effects.
+Creates clone layers from split output for reveal/swap effects. Pass an existing `splitText()` result.
 
 ```ts
 import { splitText } from "fetta";
@@ -258,98 +187,19 @@ import { createSplitClones } from "fetta/helpers";
 
 const split = splitText(element, { type: "chars", mask: "chars" });
 const layers = createSplitClones(split, { unit: "chars", wrap: true });
+// animate layers.originals + layers.clones...
+layers.cleanup();
 ```
 
-#### Helper Options
-
-| Option | Type | Default | Description |
-|------|------|------|------|
-| `unit` | `"chars" \| "words" \| "lines"` | — | Which split nodes to layer |
-| `wrap` | `boolean` | `false` | Wrap each original in a track wrapper (`position: relative`) |
-| `display` | `"auto" \| "inline-block" \| "block"` | `"auto"` | Track display when `wrap: true` (`lines` => `block`, others => `inline-block`) |
-| `cloneOffset.axis` | `"x" \| "y"` | `"y"` | Axis used for initial clone offset |
-| `cloneOffset.direction` | `"start" \| "end"` | `"start"` | Offset direction (`start` => negative) |
-| `cloneOffset.distance` | `string` | `"100%"` | Offset distance |
-| `trackClassName` / `cloneClassName` | `string \| (ctx) => string \| undefined` | — | Class names (static or per-item) |
-| `trackStyle` / `cloneStyle` | `object \| (ctx) => object` | — | Inline styles (static or per-item) |
-
-#### Helper Behavior
-
-- Helper does not call `splitText()`; pass an existing split result.
-- Clone is appended to the current parent of each original split node.
-- `wrap: false` appends clone to existing parent.
-- `wrap: true` moves original into a generated track, then appends clone there.
-- `cleanup()` removes helper-created tracks/clones and is idempotent.
-- `cleanup({ revertSplit: true })` also calls `split.revert()`.
-
-For reveal/swap effects, match helper `unit` with `splitText` `mask` (`"chars"`, `"words"`, `"lines"`).
-
-## CSS Classes
-
-Default classes applied to split output:
-
-| Class | Element |
-|------|------|
-| `.split-char` | Character span |
-| `.split-word` | Word span |
-| `.split-line` | Line span |
-
-Split elements receive index attributes:
-
-- `data-char-index`
-- `data-word-index`
-- `data-line-index`
-
-## Font Loading
-
-For stable kerning measurements in vanilla usage, wait for fonts before splitting:
-
-```ts
-document.fonts.ready.then(() => {
-  const { words } = splitText(element);
-  animate(words, { opacity: [0, 1] });
-});
-```
-
-React and Motion components wait for fonts by default (`waitForFonts={true}`).
-
-## Accessibility
-
-Fetta keeps split text readable by screen readers:
-
-- Headings/landmarks: split nodes are hidden from assistive tech and parent gets `aria-label`.
-- Generic/nested content: visual split output is hidden and a screen-reader copy preserves semantics.
-- Existing `aria-label` values are preserved.
-
 ## Notes
 
-- 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
-
-All modern browsers: Chrome, Firefox, Safari, Edge.
-
-Requires:
-
-- `ResizeObserver`
-- `IntersectionObserver`
-- `Intl.Segmenter`
-
-Safari kerning compensation works, but font rendering precision can vary slightly by font. If you notice subtle shifts around `revert()`, use `disableKerning: true`.
+- Ligatures are disabled (`font-variant-ligatures: none`) because ligatures can't span multiple elements.
+- React and Motion components wait for fonts by default (`waitForFonts`). In vanilla, wrap calls in `document.fonts.ready`.
+- Accessibility is automatic: headings get `aria-label`, generic elements get a screen-reader-only copy.
 
-## Docs
+## Sponsors
 
-- https://fetta.dimi.me/
-- https://fetta.dimi.me/installation
-- https://fetta.dimi.me/api/core
-- https://fetta.dimi.me/api/react
-- https://fetta.dimi.me/api/motion
-- https://fetta.dimi.me/api/helpers
-- https://fetta.dimi.me/examples/vanilla
-- https://fetta.dimi.me/examples/react
-- https://fetta.dimi.me/examples/motion
+If you find Fetta useful, consider [sponsoring the project](https://github.com/sponsors/dimicx) to support continued development.
 
 ## License
 

package/dist/chunk-HSIMGGOI.js

@@ -0,0 +1 @@
+

package/dist/{chunk-PA22PLRB.js → chunk-TEDMJHF7.js}

@@ -28,18 +28,6 @@ function reapplyInitialClasses(elements, className) {
   }
 }
 
-// src/internal/waitForFontsReady.ts
-async function waitForFontsReady(waitForFonts) {
-  if (!waitForFonts) return;
-  const fonts = document.fonts;
-  const ready = fonts?.ready;
-  if (!ready || typeof ready.then !== "function") return;
-  try {
-    await ready;
-  } catch {
-  }
-}
-
 // src/internal/viewportObserver.ts
 function createViewportObserver(options, hasTriggeredOnceRef, onEnter, onLeave) {
   const vpOptions = options ?? {};
@@ -70,4 +58,4 @@ function createViewportObserver(options, hasTriggeredOnceRef, onEnter, onLeave)
   );
 }
 
-export { createViewportObserver, reapplyInitialClasses, reapplyInitialStyles, waitForFontsReady };
+export { createViewportObserver, reapplyInitialClasses, reapplyInitialStyles };

package/dist/chunk-V23SUR2S.js

@@ -0,0 +1,13 @@
+// src/internal/waitForFontsReady.ts
+async function waitForFontsReady(waitForFonts) {
+  if (!waitForFonts) return;
+  const fonts = document.fonts;
+  const ready = fonts?.ready;
+  if (!ready || typeof ready.then !== "function") return;
+  try {
+    await ready;
+  } catch {
+  }
+}
+
+export { waitForFontsReady };

package/dist/morph.d.ts

@@ -0,0 +1,38 @@
+import { AnimationOptions } from 'motion';
+import { HTMLMotionProps } from 'motion/react';
+import { CSSProperties, RefAttributes } from 'react';
+
+interface MorphVariantInfo {
+    /** Index of this element among all animated elements */
+    index: number;
+    /** Total number of animated elements */
+    count: number;
+}
+type StaticMotionInitialProp = HTMLMotionProps<"div">["initial"];
+type StaticMotionAnimateProp = HTMLMotionProps<"div">["animate"];
+type StaticMotionExitProp = HTMLMotionProps<"div">["exit"];
+type MotionInitialProp = StaticMotionInitialProp | ((info: MorphVariantInfo) => StaticMotionInitialProp);
+type MotionAnimateProp = StaticMotionAnimateProp | ((info: MorphVariantInfo) => StaticMotionAnimateProp);
+type MotionExitProp = StaticMotionExitProp | ((info: MorphVariantInfo) => StaticMotionExitProp);
+type ControlledWrapperMotionKeys = "children" | "className" | "style" | "as" | "ref" | "transition" | "reducedMotion" | "initial" | "animate" | "exit";
+type WrapperMotionProps = Omit<HTMLMotionProps<"div">, ControlledWrapperMotionKeys>;
+interface MorphTextProps extends WrapperMotionProps {
+    children: string;
+    as?: keyof HTMLElementTagNameMap;
+    className?: string;
+    style?: CSSProperties;
+    transition?: AnimationOptions;
+    waitForFonts?: boolean;
+    reducedMotion?: "user" | "always" | "never";
+    splitBy?: "chars" | "words";
+    animateInitial?: boolean;
+    initial?: MotionInitialProp;
+    animate?: MotionAnimateProp;
+    exit?: MotionExitProp;
+    stagger?: number;
+    onMorphComplete?: () => void;
+}
+type MorphTextComponent = (props: MorphTextProps & RefAttributes<HTMLElement>) => React.ReactElement | null;
+declare const MorphText: MorphTextComponent;
+
+export { MorphText, type MorphTextProps, type MorphVariantInfo };

package/dist/morph.js

@@ -0,0 +1,556 @@
+import './chunk-HSIMGGOI.js';
+import { waitForFontsReady } from './chunk-V23SUR2S.js';
+import { splitTextData } from './chunk-44MU2I5B.js';
+import { useReducedMotion, motion, AnimatePresence, MotionConfig } from 'motion/react';
+import { forwardRef, useRef, useCallback, useState, useMemo, useEffect, createElement } from 'react';
+
+// src/internal/splitIdentity.ts
+var DEFAULT_ID_PREFIX = "c";
+function nextIdentityId(prefix, counter) {
+  return `${prefix}${counter}`;
+}
+function findMatchesByLcs(prevValues, nextValues) {
+  const n = prevValues.length;
+  const m = nextValues.length;
+  const dp = Array.from(
+    { length: n + 1 },
+    () => new Array(m + 1).fill(0)
+  );
+  for (let i2 = n - 1; i2 >= 0; i2--) {
+    for (let j2 = m - 1; j2 >= 0; j2--) {
+      if (prevValues[i2] === nextValues[j2]) {
+        dp[i2][j2] = dp[i2 + 1][j2 + 1] + 1;
+      } else {
+        dp[i2][j2] = Math.max(dp[i2 + 1][j2], dp[i2][j2 + 1]);
+      }
+    }
+  }
+  const matches = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (prevValues[i] === nextValues[j]) {
+      matches.push([i, j]);
+      i += 1;
+      j += 1;
+    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      i += 1;
+    } else {
+      j += 1;
+    }
+  }
+  return matches;
+}
+function reconcileSplitIdentity(prevSnapshot, nextValuesInput, options = {}) {
+  const unit = options.unit ?? "chars";
+  const idPrefix = typeof options.idPrefix === "string" && options.idPrefix.length > 0 ? options.idPrefix : unit === "words" ? "w" : DEFAULT_ID_PREFIX;
+  const prevIds = prevSnapshot?.ids ?? [];
+  const prevValues = prevSnapshot?.values ?? [];
+  const nextValues = Array.from(nextValuesInput);
+  let nextIdCounter = prevSnapshot?.nextId ?? 0;
+  const matches = findMatchesByLcs(prevValues, nextValues);
+  const prevIndexByNextIndex = new Array(nextValues.length).fill(-1);
+  const nextIndexByPrevIndex = new Array(prevValues.length).fill(-1);
+  matches.forEach(([prevIndex, nextIndex]) => {
+    prevIndexByNextIndex[nextIndex] = prevIndex;
+    nextIndexByPrevIndex[prevIndex] = nextIndex;
+  });
+  const nextIds = new Array(nextValues.length);
+  for (let nextIndex = 0; nextIndex < nextValues.length; nextIndex++) {
+    const prevIndex = prevIndexByNextIndex[nextIndex];
+    if (prevIndex >= 0 && prevIds[prevIndex]) {
+      nextIds[nextIndex] = prevIds[prevIndex];
+    } else {
+      nextIds[nextIndex] = nextIdentityId(idPrefix, nextIdCounter);
+      nextIdCounter += 1;
+    }
+  }
+  const changes = [];
+  for (let nextIndex = 0; nextIndex < nextValues.length; nextIndex++) {
+    const prevIndex = prevIndexByNextIndex[nextIndex];
+    const id = nextIds[nextIndex];
+    if (prevIndex >= 0) {
+      changes.push({
+        id,
+        status: "persist",
+        value: nextValues[nextIndex],
+        prevIndex,
+        nextIndex
+      });
+    } else {
+      changes.push({
+        id,
+        status: "enter",
+        value: nextValues[nextIndex],
+        nextIndex
+      });
+    }
+  }
+  for (let prevIndex = 0; prevIndex < prevValues.length; prevIndex++) {
+    if (nextIndexByPrevIndex[prevIndex] >= 0) continue;
+    const id = prevIds[prevIndex] ?? nextIdentityId(idPrefix, nextIdCounter);
+    if (!prevIds[prevIndex]) {
+      nextIdCounter += 1;
+    }
+    changes.push({
+      id,
+      status: "exit",
+      value: prevValues[prevIndex] ?? "",
+      prevIndex
+    });
+  }
+  return {
+    snapshot: {
+      unit,
+      ids: nextIds,
+      values: nextValues,
+      nextId: nextIdCounter
+    },
+    changes
+  };
+}
+var SPLIT_ID_ATTR = "data-fetta-id";
+var DEFAULT_ENTER_STATE = { opacity: 0 };
+var DEFAULT_ANIMATE_STATE = { opacity: 1 };
+var DEFAULT_EXIT_STATE = { opacity: 0 };
+var DEFAULT_TRANSITION = { type: "spring", bounce: 0, duration: 0.4 };
+function parseStyleValue(styleText) {
+  const style = {};
+  const parts = styleText.split(";").map((part) => part.trim());
+  for (const part of parts) {
+    if (!part) continue;
+    const [rawKey, ...rawValueParts] = part.split(":");
+    if (!rawKey || rawValueParts.length === 0) continue;
+    const rawValue = rawValueParts.join(":").trim();
+    const key = rawKey.trim();
+    if (key.startsWith("--")) {
+      style[key] = rawValue;
+      continue;
+    }
+    const camelKey = key.replace(
+      /-([a-z])/g,
+      (_, char) => char.toUpperCase()
+    );
+    style[camelKey] = rawValue;
+  }
+  return style;
+}
+function attrsToProps(attrs) {
+  const props = {};
+  for (const [name, value] of Object.entries(attrs)) {
+    if (name === "class") {
+      props.className = value;
+      continue;
+    }
+    if (name === "style") {
+      props.style = parseStyleValue(value);
+      continue;
+    }
+    props[name] = value;
+  }
+  return props;
+}
+var motionComponentCache = /* @__PURE__ */ new Map();
+function getMotionComponent(tag) {
+  let component = motionComponentCache.get(tag);
+  if (!component) {
+    const registry = motion;
+    component = registry[tag] ?? motion.span;
+    motionComponentCache.set(tag, component);
+  }
+  return component;
+}
+function readSerializedNodeText(node) {
+  if (node.type === "text") {
+    return node.text;
+  }
+  return node.children.map(readSerializedNodeText).join("");
+}
+function collectRawTokens(nodes, splitBy = "chars") {
+  const rawTokens = [];
+  let nonCharIndex = 0;
+  const targetSplit = splitBy === "words" ? "word" : "char";
+  const walk = (list) => {
+    for (const node of list) {
+      if (node.type === "text") {
+        if (node.text.length > 0) {
+          rawTokens.push({
+            tokenType: "text",
+            key: `t-${nonCharIndex++}`,
+            value: node.text
+          });
+        }
+        continue;
+      }
+      if (node.attrs["data-fetta-sr-copy"] === "true") {
+        continue;
+      }
+      if (node.tag === "br") {
+        rawTokens.push({
+          tokenType: "br",
+          key: `br-${nonCharIndex++}`,
+          attrs: node.attrs
+        });
+        continue;
+      }
+      if (node.split === targetSplit) {
+        rawTokens.push({
+          tokenType: splitBy === "words" ? "word" : "char",
+          node,
+          value: readSerializedNodeText(node)
+        });
+        continue;
+      }
+      walk(node.children);
+    }
+  };
+  walk(nodes);
+  return rawTokens;
+}
+function buildRenderTokens(nodes, previousSnapshot, splitBy = "chars") {
+  const rawTokens = collectRawTokens(nodes, splitBy);
+  const unitTokenType = splitBy === "words" ? "word" : "char";
+  const rawUnits = rawTokens.filter(
+    (token) => token.tokenType === unitTokenType
+  );
+  const diff = reconcileSplitIdentity(
+    previousSnapshot,
+    rawUnits.map((token) => token.value),
+    { unit: splitBy }
+  );
+  const statusByNextIndex = /* @__PURE__ */ new Map();
+  let hasExits = false;
+  for (const change of diff.changes) {
+    if (typeof change.nextIndex === "number") {
+      statusByNextIndex.set(change.nextIndex, change.status);
+    }
+    if (change.status === "exit") {
+      hasExits = true;
+    }
+  }
+  const fallbackPrefix = splitBy === "words" ? "w" : "c";
+  let unitIndex = 0;
+  const intermediateTokens = rawTokens.map((token) => {
+    if (token.tokenType === "text") {
+      return token;
+    }
+    if (token.tokenType === "br") {
+      return {
+        tokenType: "br",
+        key: token.key,
+        props: attrsToProps(token.attrs)
+      };
+    }
+    const id = diff.snapshot.ids[unitIndex] ?? `${fallbackPrefix}-fallback-${unitIndex}`;
+    const status = statusByNextIndex.get(unitIndex) ?? "persist";
+    unitIndex += 1;
+    return {
+      tokenType: unitTokenType,
+      id,
+      status,
+      tag: token.node.tag,
+      props: attrsToProps(token.node.attrs),
+      value: token.value
+    };
+  });
+  let tokens;
+  if (splitBy === "words") {
+    tokens = [];
+    let prevWasWord = false;
+    for (const token of intermediateTokens) {
+      if (token.tokenType === "word" && prevWasWord) {
+        tokens.push({
+          tokenType: "space",
+          id: `sp-${token.id}`,
+          status: token.status
+        });
+      }
+      tokens.push(token);
+      if (token.tokenType === "word" || token.tokenType === "br") {
+        prevWasWord = token.tokenType === "word";
+      }
+    }
+  } else {
+    tokens = [];
+    for (let i = 0; i < intermediateTokens.length; i++) {
+      const token = intermediateTokens[i];
+      if (token.tokenType === "text" && /^\s+$/.test(token.value)) {
+        const next = intermediateTokens[i + 1];
+        const prev = intermediateTokens[i - 1];
+        const neighbor = next?.tokenType === "char" ? next : prev?.tokenType === "char" ? prev : null;
+        const status = neighbor ? neighbor.status : "persist";
+        const prevId = prev?.tokenType === "char" ? prev.id : "start";
+        const nextId = next?.tokenType === "char" ? next.id : "end";
+        tokens.push({
+          tokenType: "space",
+          id: `sp-${prevId}-${nextId}`,
+          status
+        });
+      } else {
+        tokens.push(token);
+      }
+    }
+  }
+  let unitCount = 0;
+  let enterCount = 0;
+  for (const token of tokens) {
+    if (token.tokenType === "char" || token.tokenType === "word" || token.tokenType === "space") {
+      token.index = unitCount;
+      unitCount += 1;
+      if (token.status === "enter") {
+        token.enterIndex = enterCount;
+        enterCount += 1;
+      }
+    }
+  }
+  return {
+    snapshot: diff.snapshot,
+    tokens,
+    enterCount,
+    unitCount,
+    hasExits
+  };
+}
+var MorphText = forwardRef(function MorphText2({
+  children,
+  as: Component = "span",
+  className,
+  style: userStyle,
+  transition,
+  waitForFonts = true,
+  reducedMotion = "user",
+  splitBy = "chars",
+  animateInitial = false,
+  initial: initialProp,
+  animate: animateProp,
+  exit: exitProp,
+  stagger: staggerProp,
+  onMorphComplete,
+  ...wrapperProps
+}, forwardedRef) {
+  const wrapperRef = useRef(null);
+  const mergedRef = useCallback(
+    (node) => {
+      wrapperRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+  const enterState = initialProp === false ? false : initialProp ?? DEFAULT_ENTER_STATE;
+  const animateState = animateProp ?? DEFAULT_ANIMATE_STATE;
+  const exitState = exitProp ?? DEFAULT_EXIT_STATE;
+  const [tokens, setTokens] = useState(null);
+  const [unitCount, setUnitCount] = useState(0);
+  const [isReady, setIsReady] = useState(false);
+  const snapshotRef = useRef(null);
+  const prefersReducedMotion = useReducedMotion();
+  const reduceMotionActive = reducedMotion === "always" || reducedMotion === "user" && !!prefersReducedMotion;
+  const reducedTransition = useMemo(
+    () => ({ duration: 0, delay: 0, layout: { duration: 0 } }),
+    []
+  );
+  const resolvedTransition = reduceMotionActive ? reducedTransition : transition ?? DEFAULT_TRANSITION;
+  const transitionRef = useRef(resolvedTransition);
+  transitionRef.current = resolvedTransition;
+  const onMorphCompleteRef = useRef(onMorphComplete);
+  onMorphCompleteRef.current = onMorphComplete;
+  const enterRemainingRef = useRef(0);
+  const exitsActiveRef = useRef(false);
+  const isFirstRenderRef = useRef(true);
+  const staggerRef = useRef(staggerProp);
+  staggerRef.current = staggerProp;
+  const enterStateRef = useRef(enterState);
+  enterStateRef.current = enterState;
+  const animateStateRef = useRef(animateState);
+  animateStateRef.current = animateState;
+  const exitStateRef = useRef(exitState);
+  exitStateRef.current = exitState;
+  const tryFireMorphComplete = useCallback(() => {
+    if (enterRemainingRef.current <= 0 && !exitsActiveRef.current) {
+      onMorphCompleteRef.current?.();
+    }
+  }, []);
+  const buildSplitDataFromProbe = useCallback((nextText, unit) => {
+    const wrapperElement = wrapperRef.current;
+    if (!wrapperElement) return null;
+    const parentElement = wrapperElement.parentElement;
+    if (!parentElement) return null;
+    const probeHost = wrapperElement.ownerDocument.createElement("div");
+    probeHost.style.position = "fixed";
+    probeHost.style.left = "-99999px";
+    probeHost.style.top = "0";
+    probeHost.style.visibility = "hidden";
+    probeHost.style.pointerEvents = "none";
+    probeHost.style.contain = "layout style paint";
+    probeHost.style.width = `${Math.max(1, parentElement.getBoundingClientRect().width)}px`;
+    const probeElement = wrapperElement.cloneNode(false);
+    probeElement.textContent = nextText;
+    probeHost.appendChild(probeElement);
+    parentElement.appendChild(probeHost);
+    try {
+      return splitTextData(probeElement, { type: unit === "words" ? "words" : "chars" });
+    } finally {
+      probeHost.remove();
+    }
+  }, []);
+  const measureAndSetTokens = useCallback(
+    (nextText, unit) => {
+      const nextData = buildSplitDataFromProbe(nextText, unit);
+      if (!nextData) return;
+      const { snapshot, tokens: nextTokens, enterCount, unitCount: nextUnitCount, hasExits } = buildRenderTokens(
+        nextData.nodes,
+        snapshotRef.current,
+        unit
+      );
+      snapshotRef.current = snapshot;
+      const isFirst = isFirstRenderRef.current;
+      isFirstRenderRef.current = false;
+      const skipCallback = isFirst && !animateInitial;
+      const hasAnimation = enterCount > 0 || hasExits;
+      if (!skipCallback && hasAnimation && onMorphCompleteRef.current) {
+        enterRemainingRef.current = enterCount;
+        exitsActiveRef.current = hasExits;
+      } else {
+        enterRemainingRef.current = 0;
+        exitsActiveRef.current = false;
+      }
+      setTokens(nextTokens);
+      setUnitCount(nextUnitCount);
+      setIsReady(true);
+    },
+    [buildSplitDataFromProbe, animateInitial]
+  );
+  useEffect(() => {
+    if (typeof children !== "string") return;
+    let cancelled = false;
+    waitForFontsReady(waitForFonts).then(() => {
+      if (cancelled) return;
+      measureAndSetTokens(children, splitBy);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [children, waitForFonts, splitBy, measureAndSetTokens]);
+  const handleEnterAnimationComplete = useCallback(() => {
+    enterRemainingRef.current = Math.max(0, enterRemainingRef.current - 1);
+    tryFireMorphComplete();
+  }, [tryFireMorphComplete]);
+  const handleExitComplete = useCallback(() => {
+    exitsActiveRef.current = false;
+    tryFireMorphComplete();
+  }, [tryFireMorphComplete]);
+  const renderToken = useCallback(
+    (token) => {
+      if (token.tokenType === "text") {
+        return token.value;
+      }
+      if (token.tokenType === "br") {
+        return createElement("br", {
+          key: token.key,
+          ...token.props,
+          "aria-hidden": "true"
+        });
+      }
+      const currentEnterState = enterStateRef.current;
+      const currentAnimateState = animateStateRef.current;
+      const currentExitState = exitStateRef.current;
+      const currentStagger = staggerRef.current;
+      const info = { index: token.index, count: unitCount };
+      const resolvedEnterState = typeof currentEnterState === "function" ? currentEnterState(info) : currentEnterState;
+      const resolvedAnimateState = typeof currentAnimateState === "function" ? currentAnimateState(info) : currentAnimateState;
+      const resolvedExitState = typeof currentExitState === "function" ? currentExitState(info) : currentExitState;
+      let tokenTransition = transitionRef.current;
+      if (currentStagger && typeof token.enterIndex === "number") {
+        const existingDelay = tokenTransition?.delay;
+        const baseDelay = typeof existingDelay === "number" ? existingDelay : 0;
+        tokenTransition = {
+          ...tokenTransition,
+          delay: baseDelay + token.enterIndex * currentStagger
+        };
+      }
+      if (token.tokenType === "space") {
+        return createElement(
+          motion.span,
+          {
+            key: `space-${token.id}`,
+            "aria-hidden": "true",
+            layout: "position",
+            initial: token.status === "enter" ? resolvedEnterState : false,
+            animate: resolvedAnimateState,
+            exit: resolvedExitState,
+            transition: tokenTransition,
+            style: { display: "inline", whiteSpace: "pre" },
+            onAnimationComplete: token.status === "enter" ? handleEnterAnimationComplete : void 0
+          },
+          " "
+        );
+      }
+      const propsStyle = token.props.style ?? void 0;
+      const MotionTag = getMotionComponent(token.tag);
+      const keyPrefix = token.tokenType === "word" ? "word" : "char";
+      return createElement(
+        MotionTag,
+        {
+          key: `${keyPrefix}-${token.id}`,
+          ...token.props,
+          "aria-hidden": "true",
+          [SPLIT_ID_ATTR]: token.id,
+          layout: "position",
+          initial: token.status === "enter" ? resolvedEnterState : false,
+          animate: resolvedAnimateState,
+          exit: resolvedExitState,
+          transition: tokenTransition,
+          style: {
+            display: "inline-block",
+            whiteSpace: "pre",
+            ...propsStyle
+          },
+          onAnimationComplete: token.status === "enter" ? handleEnterAnimationComplete : void 0
+        },
+        token.value
+      );
+    },
+    [handleEnterAnimationComplete, unitCount]
+  );
+  if (typeof children !== "string") {
+    console.error("MorphText: children must be a string.");
+    return null;
+  }
+  const Wrapper = getMotionComponent(Component);
+  const wrapperStyle = {
+    ...userStyle,
+    visibility: isReady || !waitForFonts ? "visible" : "hidden"
+  };
+  const wrapperAttrs = {
+    ref: mergedRef,
+    ...wrapperProps,
+    className,
+    style: wrapperStyle
+  };
+  if (wrapperAttrs["aria-label"] === void 0) {
+    wrapperAttrs["aria-label"] = children;
+  }
+  const content = createElement(
+    Wrapper,
+    wrapperAttrs,
+    tokens ? createElement(
+      AnimatePresence,
+      {
+        mode: "popLayout",
+        initial: animateInitial,
+        onExitComplete: handleExitComplete
+      },
+      tokens.map(renderToken)
+    ) : children
+  );
+  if (reducedMotion !== "never") {
+    return createElement(MotionConfig, { reducedMotion }, content);
+  }
+  return content;
+});
+
+export { MorphText };

package/dist/motion.js

@@ -1,4 +1,6 @@
-import { waitForFontsReady, createViewportObserver, reapplyInitialStyles, reapplyInitialClasses } from './chunk-PA22PLRB.js';
+import { createViewportObserver, reapplyInitialStyles, reapplyInitialClasses } from './chunk-TEDMJHF7.js';
+import './chunk-HSIMGGOI.js';
+import { waitForFontsReady } from './chunk-V23SUR2S.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';

package/dist/react.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fetta",
-  "version": "1.5.5",
+  "version": "1.6.0",
   "description": "Text splitting library with kerning compensation for animations",
   "type": "module",
   "sideEffects": false,
@@ -24,6 +24,10 @@
     "./motion": {
       "types": "./dist/motion.d.ts",
       "import": "./dist/motion.js"
+    },
+    "./morph": {
+      "types": "./dist/morph.d.ts",
+      "import": "./dist/morph.js"
     }
   },
   "main": "./dist/index.js",
@@ -65,6 +69,12 @@
       "import": "*",
       "ignore": ["react", "motion", "motion/react"]
     },
+    {
+      "name": "Morph",
+      "path": "dist/morph.js",
+      "import": "*",
+      "ignore": ["react", "motion", "motion/react"]
+    },
     {
       "name": "Helpers",
       "path": "dist/helpers.js",