react-native-laminar 1.2.0 → 1.4.1

package/lib/typescript/module/view/glyph-run.d.ts

@@ -2,11 +2,14 @@ import React from "react";
 import { type StyleProp, type TextStyle } from "react-native";
 import type { ComplexAnimationBuilder, EntryExitAnimationFunction } from "react-native-reanimated";
 import type { GlyphToken, LaminarAlign } from "../types";
-export declare const GlyphRun: React.MemoExoticComponent<({ glyphs, layoutTransition, enterTransition, exitTransition, align, textStyle, className, }: Readonly<{
+export declare const GlyphRun: React.MemoExoticComponent<({ glyphs, layoutTransition, enterTransition, elementEnterTransition, exitTransition, elementExitTransition, leadingGap, align, textStyle, className, }: Readonly<{
     glyphs: readonly GlyphToken[];
-    layoutTransition: ComplexAnimationBuilder;
+    layoutTransition?: ComplexAnimationBuilder;
     enterTransition?: EntryExitAnimationFunction;
+    elementEnterTransition?: EntryExitAnimationFunction;
     exitTransition?: EntryExitAnimationFunction;
+    elementExitTransition?: EntryExitAnimationFunction;
+    leadingGap?: number;
     align: LaminarAlign;
     textStyle?: StyleProp<TextStyle>;
     className?: string;

package/lib/typescript/module/view/glyph-run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glyph-run.d.ts","sourceRoot":"","sources":["../../../../src/view/glyph-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EACV,uBAAuB,EACvB,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAczD,eAAO,MAAM,QAAQ,0HAShB,QAAQ,CAAC;IACV,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,gBAAgB,EAAE,uBAAuB,CAAC;IAC1C,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,uBAiBH,CAAC"}
+{"version":3,"file":"glyph-run.d.ts","sourceRoot":"","sources":["../../../../src/view/glyph-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EACV,uBAAuB,EACvB,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAezD,eAAO,MAAM,QAAQ,qLAYhB,QAAQ,CAAC;IACV,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C,sBAAsB,CAAC,EAAE,0BAA0B,CAAC;IACpD,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,qBAAqB,CAAC,EAAE,0BAA0B,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,uBAmCH,CAAC"}

package/lib/typescript/module/view/morph-viewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"morph-viewport.d.ts","sourceRoot":"","sources":["../../../../src/view/morph-viewport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA4C7C,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;IAClF,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,aAAa,4HASrB,kBAAkB,uBAmCtB,CAAC"}
+{"version":3,"file":"morph-viewport.d.ts","sourceRoot":"","sources":["../../../../src/view/morph-viewport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA4C7C,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;IAClF,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC,CAAC;AAGF,eAAO,MAAM,aAAa,4HASrB,kBAAkB,uBAqCtB,CAAC"}

package/lib/typescript/module/view/number-lane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-lane.d.ts","sourceRoot":"","sources":["../../../../src/view/number-lane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAiBnE,KAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,EAAE,oBAAoB,CAAC;IACzC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,+IAYlB,eAAe,uBAiFnB,CAAC"}
+{"version":3,"file":"number-lane.d.ts","sourceRoot":"","sources":["../../../../src/view/number-lane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAiBnE,KAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,EAAE,oBAAoB,CAAC;IACzC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,UAAU,+IAYlB,eAAe,uBAqFnB,CAAC"}

package/lib/typescript/module/view/number-run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-run.d.ts","sourceRoot":"","sources":["../../../../src/view/number-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAe3D,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,SAAS,yGASjB,QAAQ,CAAC,cAAc,CAAC,uBA4C5B,CAAC"}
+{"version":3,"file":"number-run.d.ts","sourceRoot":"","sources":["../../../../src/view/number-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAe3D,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,SAAS,yGASjB,QAAQ,CAAC,cAAc,CAAC,uBA8C5B,CAAC"}

package/lib/typescript/module/view/slots-run.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { type StyleProp, type TextStyle } from "react-native";
+import type { LaminarAlign, MotionRecipe } from "../types";
+type SlotsRunProps = {
+    readonly value: string;
+    readonly motionRecipe: MotionRecipe;
+    readonly align: LaminarAlign;
+    readonly fontSize?: number;
+    readonly textStyle?: StyleProp<TextStyle>;
+    readonly staggerMs: number;
+    readonly className?: string;
+};
+export declare const SlotsRun: React.MemoExoticComponent<({ value, motionRecipe, align, fontSize, textStyle, staggerMs, className, }: Readonly<SlotsRunProps>) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=slots-run.d.ts.map

package/lib/typescript/module/view/slots-run.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots-run.d.ts","sourceRoot":"","sources":["../../../../src/view/slots-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAQtB,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAwB,MAAM,UAAU,CAAC;AAmQjF,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,QAAQ,yGAShB,QAAQ,CAAC,aAAa,CAAC,uBAwF3B,CAAC"}

package/lib/typescript/module/view/text-run.d.ts

@@ -1,13 +1,17 @@
 import React from "react";
+import type { ReactNode } from "react";
 import type { StyleProp, TextStyle } from "react-native";
 import type { LaminarAlign, MotionRecipe } from "../types";
 type TextRunProps = {
     readonly value: string;
     readonly motionRecipe: MotionRecipe;
     readonly align: LaminarAlign;
+    readonly leading?: ReactNode;
+    readonly leadingKey?: string | number;
+    readonly leadingGap?: number;
     readonly textStyle?: StyleProp<TextStyle>;
     readonly className?: string;
 };
-export declare const TextRun: React.MemoExoticComponent<({ value, motionRecipe, align, textStyle, className }: TextRunProps) => React.JSX.Element>;
+export declare const TextRun: React.MemoExoticComponent<({ value, motionRecipe, align, leading, leadingKey, leadingGap, textStyle, className, }: TextRunProps) => React.JSX.Element>;
 export {};
 //# sourceMappingURL=text-run.d.ts.map

package/lib/typescript/module/view/text-run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-run.d.ts","sourceRoot":"","sources":["../../../../src/view/text-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,OAAO,mFACqC,YAAY,uBA0BpE,CAAC"}
+{"version":3,"file":"text-run.d.ts","sourceRoot":"","sources":["../../../../src/view/text-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,OAAO,qHAUf,YAAY,uBA8EhB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-laminar",
-  "version": "1.2.0",
+  "version": "1.4.1",
   "description": "A React Native component for morphing text and numbers with character-level identity.",
   "keywords": [
     "react-native",
@@ -21,6 +21,8 @@
   "react-native": "./src/index.tsx",
   "exports": {
     ".": {
+      "react-native": "./src/index.tsx",
+      "source": "./src/index.tsx",
       "import": {
         "types": "./lib/typescript/module/index.d.ts",
         "default": "./lib/module/index.js"
@@ -37,7 +39,14 @@
   ],
   "scripts": {
     "build": "bob build",
-    "prepare": "bob build"
+    "prepare": "bob build",
+    "test": "jest --config jest.config.js --runInBand",
+    "test:watch": "jest --config jest.config.js --watch",
+    "test:coverage": "jest --config jest.config.js --runInBand --coverage && node scripts/check-coverage.js",
+    "test:ci": "jest --config jest.config.js --runInBand --ci --coverage && node scripts/check-coverage.js",
+    "typecheck": "tsc --project tsconfig.test.json --noEmit",
+    "pack:check": "npm pack --dry-run --cache ./coverage/npm-cache",
+    "quality": "npm run typecheck && npm run test:ci && npm run build && npm run pack:check"
   },
   "sideEffects": false,
   "peerDependencies": {

package/src/hooks/use-display-units.ts

@@ -4,6 +4,7 @@ import {
   splitDisplayUnits,
 } from "../model/display-units";
 
+// normalize the same units used by rendering before measurement reads them
 export const useDisplayUnits = (
   value: string,
   enabled = true

package/src/hooks/use-inline-auto-width.ts

@@ -1,33 +1,36 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { LayoutChangeEvent } from "react-native";
 import { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 
 type Params = {
   enabled: boolean;
   driveToWidth: (toValue: number) => number;
+  measurementKey: string;
 };
 
-export const useInlineAutoWidth = ({ enabled, driveToWidth }: Params) => {
+const WIDTH_CACHE_LIMIT = 64;
+
+// measure each content signature once and drive later changes through one width value
+export const useInlineAutoWidth = ({
+  enabled,
+  driveToWidth,
+  measurementKey,
+}: Params) => {
   const widthValue = useSharedValue(0);
   const measuredWidthRef = useRef<number | null>(null);
   const bootstrappedRef = useRef(false);
+  const widthCacheRef = useRef(new Map<string, number>());
   const [hasBootstrappedWidth, setHasBootstrappedWidth] = useState(false);
 
-  const captureLayout = useCallback(
-    (event: LayoutChangeEvent) => {
-      if (!enabled) {
-        return;
-      }
-
-      const nextWidth = Math.max(0, Math.ceil(event.nativeEvent.layout.width));
-
+  // the first measurement establishes the shell without animating from zero
+  const applyWidth = useCallback(
+    (nextWidth: number) => {
       if (measuredWidthRef.current === nextWidth) {
         return;
       }
 
       measuredWidthRef.current = nextWidth;
 
-      // snap the first width so mount does not animate from zero
       if (!bootstrappedRef.current) {
         bootstrappedRef.current = true;
         widthValue.value = nextWidth;
@@ -37,9 +40,48 @@ export const useInlineAutoWidth = ({ enabled, driveToWidth }: Params) => {
 
       widthValue.value = driveToWidth(nextWidth);
     },
-    [driveToWidth, enabled, widthValue]
+    [driveToWidth, widthValue]
+  );
+
+  const captureLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (!enabled) {
+        return;
+      }
+
+      // round up so fractional native measurements cannot clip the final glyph
+      const nextWidth = Math.max(0, Math.ceil(event.nativeEvent.layout.width));
+
+      // delete before setting so a repeated key moves to the most recent position
+      widthCacheRef.current.delete(measurementKey);
+
+      if (widthCacheRef.current.size >= WIDTH_CACHE_LIMIT) {
+        // map insertion order gives the lru entry at the front
+        const oldestKey = widthCacheRef.current.keys().next().value;
+
+        if (oldestKey !== undefined) {
+          widthCacheRef.current.delete(oldestKey);
+        }
+      }
+
+      widthCacheRef.current.set(measurementKey, nextWidth);
+      applyWidth(nextWidth);
+    },
+    [applyWidth, enabled, measurementKey]
   );
 
+  const cachedWidth = widthCacheRef.current.get(measurementKey);
+
+  // a cached width can restore the shell before the hidden probe renders again
+  useEffect(() => {
+    if (enabled && cachedWidth !== undefined) {
+      // promote cache hits so active states stay available longer
+      widthCacheRef.current.delete(measurementKey);
+      widthCacheRef.current.set(measurementKey, cachedWidth);
+      applyWidth(cachedWidth);
+    }
+  }, [applyWidth, cachedWidth, enabled, measurementKey]);
+
   const animatedWidthStyle = useAnimatedStyle(
     () =>
       enabled && hasBootstrappedWidth
@@ -53,5 +95,6 @@ export const useInlineAutoWidth = ({ enabled, driveToWidth }: Params) => {
   return {
     captureLayout,
     animatedWidthStyle,
+    shouldMeasure: enabled && cachedWidth === undefined,
   };
 };

package/src/hooks/use-morph-motion.ts

@@ -18,13 +18,14 @@ type MorphMotion = {
   readonly staggerMs: number;
 };
 
+// resolve one motion recipe and one shared stagger unit for a render tree
 export const useMorphMotion = ({
   variant,
   animationPreset,
   animationDuration,
   stagger,
 }: Params): MorphMotion => {
-  // numbers feel better with snappy unless you pick something else
+  // numeric variants need a quicker default because their lanes update often
   const resolvedPreset =
     animationPreset ?? (variant === "text" ? "default" : "snappy");
 

package/src/hooks/use-morph-text-style.ts

@@ -12,12 +12,14 @@ type MorphTextStyle = {
   readonly textStyle: StyleProp<TextStyle>;
 };
 
+// compose the public style layers into the style passed to every glyph
 export const useMorphTextStyle = ({
   fontSize,
   color,
   fontStyle,
   style,
 }: Params): MorphTextStyle => {
+  // keep the base layer small so caller styles can override it predictably
   const baseTextStyle = useMemo(() => {
     const nextStyle: TextStyle = {
       includeFontPadding: false,
@@ -34,6 +36,7 @@ export const useMorphTextStyle = ({
     return nextStyle;
   }, [color, fontSize]);
 
+  // preserve the merge order used by the public style contract
   const textStyle = useMemo(
     () => [baseTextStyle, fontStyle, style],
     [baseTextStyle, fontStyle, style]

package/src/hooks/use-numeric-lanes.ts

@@ -20,6 +20,7 @@ type NumericLaneSnapshot = {
   readonly leadLength: number;
 };
 
+// retain numeric lane identity across value changes without storing it in state
 export const useNumericLanes = (value: string): NumericLaneSnapshot => {
   const units = useMemo(() => splitDisplayUnits(value), [value]);
   const ledgerRef = useRef<NumericLedger>({

package/src/hooks/use-text-glyphs.ts

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from "react";
+import { useMemo, useRef, type ReactNode } from "react";
 import {
   normalizeDisplayUnit,
   splitDisplayUnits,
@@ -8,28 +8,62 @@ import type { GlyphToken } from "../types";
 
 type TextGlyphLedger = {
   previousValue: string;
-  previousUnits: readonly string[];
+  previousSignatures: readonly string[];
   glyphKeys: readonly string[];
   nextSeed: number;
 };
 
+type TextGlyphUnit =
+  | { readonly kind: "text"; readonly signature: string; readonly value: string }
+  | { readonly kind: "element"; readonly signature: string; readonly element: ReactNode };
+
+// build the inline token stream that lets text and leading content share one ledger
 export const useTextGlyphs = (
   value: string,
-  namespace: string
+  namespace: string,
+  leading?: ReactNode,
+  leadingKey?: string | number
 ): readonly GlyphToken[] => {
-  const units = useMemo(() => splitDisplayUnits(value), [value]);
+  const units = useMemo<readonly TextGlyphUnit[]>(
+    () => [
+      // the map key becomes the identity when leading content is state keyed
+      ...(leading
+        ? [
+            {
+              kind: "element",
+              signature: `leading:${String(leadingKey ?? "default")}`,
+              element: leading,
+            } as const,
+          ]
+        : []),
+      ...splitDisplayUnits(value).map((unit) => ({
+        kind: "text" as const,
+        signature: `text:${unit}`,
+        value: unit,
+      })),
+    ],
+    [leading, leadingKey, value]
+  );
+  const signatures = units.map((unit) => unit.signature);
   const ledgerRef = useRef<TextGlyphLedger>({
     previousValue: value,
-    previousUnits: units,
+    previousSignatures: signatures,
     glyphKeys: units.map((_, index) => `${namespace}:c${index}`),
     nextSeed: units.length,
   });
 
-  if (value !== ledgerRef.current.previousValue) {
+  // reconcile only when a token signature changes so stable glyphs keep their views
+  if (
+    value !== ledgerRef.current.previousValue ||
+    signatures.length !== ledgerRef.current.previousSignatures.length ||
+    signatures.some(
+      (signature, index) => signature !== ledgerRef.current.previousSignatures[index]
+    )
+  ) {
     // keep ids stable so unchanged glyphs stay mounted between updates
     const nextLedger = reconcileTextGlyphKeys(
-      ledgerRef.current.previousUnits,
-      units,
+      ledgerRef.current.previousSignatures,
+      signatures,
       ledgerRef.current.glyphKeys,
       ledgerRef.current.nextSeed,
       namespace
@@ -37,7 +71,7 @@ export const useTextGlyphs = (
 
     ledgerRef.current = {
       previousValue: value,
-      previousUnits: units,
+      previousSignatures: signatures,
       glyphKeys: nextLedger.glyphKeys,
       nextSeed: nextLedger.nextSeed,
     };
@@ -45,11 +79,15 @@ export const useTextGlyphs = (
 
   const glyphKeys = ledgerRef.current.glyphKeys;
 
+  // normalize spaces at the edge where tokens become renderable glyphs
   return useMemo(
     () =>
       units.map((unit, index) => ({
         id: glyphKeys[index],
-        value: normalizeDisplayUnit(unit),
+        kind: unit.kind,
+        ...(unit.kind === "text"
+          ? { value: normalizeDisplayUnit(unit.value) }
+          : { element: unit.element }),
       })),
     [glyphKeys, units]
   );

package/src/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 import { useInlineAutoWidth } from "./hooks/use-inline-auto-width";
 import { useMorphMotion } from "./hooks/use-morph-motion";
 import { useMorphTextStyle } from "./hooks/use-morph-text-style";
@@ -7,11 +7,13 @@ import {
   normalizeDisplayUnit,
   splitDisplayUnits,
 } from "./model/display-units";
-import type { MorphingTextProps } from "./types";
+import type { LaminarLeadingMap, MorphingTextProps } from "./types";
 import { MorphViewport } from "./view/morph-viewport";
 import { NumberRun } from "./view/number-run";
+import { SlotsRun } from "./view/slots-run";
 import { TextRun } from "./view/text-run";
 
+// choose the content variant and connect it to the shared viewport and measurement flow
 export const Laminar = React.memo(function Laminar({
     text,
     variant = "text",
@@ -19,6 +21,9 @@ export const Laminar = React.memo(function Laminar({
     color,
     align = "left",
     className,
+    leading,
+    leadingKey,
+    leadingGap = 0,
     style,
     containerStyle,
     fontStyle,
@@ -29,6 +34,12 @@ export const Laminar = React.memo(function Laminar({
     clipToBounds = false,
   }: Readonly<MorphingTextProps>) {
     const resolvedValue = String(text ?? "");
+    // resolve state keyed leading content before measurement and token reconciliation
+    const leadingMap = isLeadingMap(leading) ? leading : undefined;
+    const resolvedLeading: React.ReactNode = leadingMap
+      ? leadingMap[resolvedValue]
+      : (leading as React.ReactNode);
+    const resolvedLeadingKey = leadingMap ? resolvedValue : leadingKey;
     const { motionRecipe, staggerMs } = useMorphMotion({
       variant,
       animationPreset,
@@ -42,16 +53,47 @@ export const Laminar = React.memo(function Laminar({
       style,
     });
 
-    const { captureLayout, animatedWidthStyle } = useInlineAutoWidth({
-      enabled: autoSize,
-      driveToWidth: motionRecipe.driveNumber,
-    });
+    // invalidate the probe when text style, leading content, or leading spacing changes
+    const measurementKey = React.useMemo(() => {
+      const flattenedStyle = StyleSheet.flatten(textStyle);
+
+      return JSON.stringify([
+        resolvedValue,
+        flattenedStyle?.fontFamily,
+        flattenedStyle?.fontSize,
+        flattenedStyle?.fontStyle,
+        flattenedStyle?.fontWeight,
+        flattenedStyle?.fontVariant,
+        flattenedStyle?.letterSpacing,
+        flattenedStyle?.lineHeight,
+        flattenedStyle?.textTransform,
+        variant === "text" && Boolean(resolvedLeading),
+        variant === "text" ? resolvedLeadingKey : undefined,
+        variant === "text" ? leadingGap : 0,
+      ]);
+    }, [
+      leadingGap,
+      resolvedLeading,
+      resolvedLeadingKey,
+      resolvedValue,
+      textStyle,
+      variant,
+    ]);
+    const { captureLayout, animatedWidthStyle, shouldMeasure } =
+      useInlineAutoWidth({
+        enabled: autoSize,
+        driveToWidth: motionRecipe.driveNumber,
+        measurementKey,
+      });
+    // measurement uses the same normalized units as the visible text row
     const measuredValue = React.useMemo(() => {
       if (!autoSize) {
         return "";
       }
 
-      return splitDisplayUnits(resolvedValue).map(normalizeDisplayUnit).join("");
+      return splitDisplayUnits(resolvedValue)
+        .map(normalizeDisplayUnit)
+        .join("");
     }, [autoSize, resolvedValue]);
 
     return (
@@ -62,16 +104,42 @@ export const Laminar = React.memo(function Laminar({
         containerStyle={containerStyle}
         animatedWidthStyle={animatedWidthStyle}
         measurement={
-          <Text
-            numberOfLines={1}
-            onLayout={captureLayout}
-            style={textStyle}
-          >
-            {measuredValue}
-          </Text>
+          shouldMeasure ? (
+            <View
+              onLayout={captureLayout}
+              style={{ flexDirection: "row", alignSelf: "flex-start" }}
+            >
+              {variant === "text" && resolvedLeading ? (
+                <View
+                  style={{
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginRight: leadingGap,
+                  }}
+                >
+                  {resolvedLeading}
+                </View>
+              ) : null}
+              {splitDisplayUnits(measuredValue).map((unit, index) => (
+                <Text key={`${unit}-${index}`} style={textStyle}>
+                  {normalizeDisplayUnit(unit)}
+                </Text>
+              ))}
+            </View>
+          ) : undefined
         }
       >
-        {variant === "number" ? (
+        {variant === "slots" ? (
+          <SlotsRun
+            value={resolvedValue}
+            motionRecipe={motionRecipe}
+            align={align}
+            fontSize={fontSize}
+            textStyle={textStyle}
+            staggerMs={staggerMs}
+            className={className}
+          />
+        ) : variant === "number" ? (
           <NumberRun
             value={resolvedValue}
             motionRecipe={motionRecipe}
@@ -86,6 +154,9 @@ export const Laminar = React.memo(function Laminar({
             value={resolvedValue}
             motionRecipe={motionRecipe}
             align={align}
+            leading={resolvedLeading}
+            leadingKey={resolvedLeadingKey}
+            leadingGap={leadingGap}
             textStyle={textStyle}
             className={className}
           />
@@ -94,11 +165,21 @@ export const Laminar = React.memo(function Laminar({
   );
   });
 
-export const MorphingText = Laminar;
+function isLeadingMap(
+  value: MorphingTextProps["leading"]
+): value is LaminarLeadingMap {
+  // react elements are objects too, so exclude them before treating a value as a map
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    !React.isValidElement(value) &&
+    !Array.isArray(value)
+  );
+}
 
-export default Laminar;
 export type {
   LaminarAlign,
+  LaminarLeadingMap,
   LaminarProps,
   MorphAnimationPresetName,
   MorphContentVariant,

package/src/model/display-units.ts

@@ -4,6 +4,7 @@ const graphemeSegmenter =
     ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
     : null;
 
+// segment graphemes when the runtime supports them so emoji and combining marks stay whole
 export const splitDisplayUnits = (input: string): string[] => {
   if (graphemeSegmenter) {
     return Array.from(
@@ -15,12 +16,14 @@ export const splitDisplayUnits = (input: string): string[] => {
   return Array.from(input);
 };
 
-// swap plain spaces so measured text keeps its width
+// replace plain spaces because native text measurement can collapse them
 export const normalizeDisplayUnit = (unit: string) =>
   unit === " " ? NBSP : unit;
 
+// numeric lanes only treat ascii digits as place-value columns
 export const isAsciiDigit = (unit: string) => unit >= "0" && unit <= "9";
 
+// leading symbols and punctuation stay attached to the left side of a number
 export const findNumericLeadLength = (units: readonly string[]) => {
   const firstDigitIndex = units.findIndex(isAsciiDigit);
 

package/src/model/numeric-lanes.ts

@@ -4,9 +4,11 @@ import {
   splitDisplayUnits,
 } from "./display-units";
 
+// strip formatting before comparing values so direction follows the displayed number
 const readNumericMagnitude = (input: string) =>
   parseFloat(input.replace(/[^0-9.-]/g, "")) || 0;
 
+// the sign controls which side of each digit lane enters and exits
 const deriveFlowDirection = (
   previousValue: string,
   nextValue: string
@@ -19,6 +21,7 @@ type ReconciledLaneState = {
   readonly direction: NumericFlowDirection;
 };
 
+// preserve right-aligned place values while allowing prefixes to grow or shrink
 export const reconcileNumericLanes = (
   previousValue: string,
   nextValue: string,

package/src/model/text-keys.ts

@@ -1,3 +1,4 @@
+// find the longest ordered set of shared units so edits keep nearby glyph identity
 const computeLcsPairs = (
   previousUnits: readonly string[],
   nextUnits: readonly string[]
@@ -9,6 +10,7 @@ const computeLcsPairs = (
     return [];
   }
 
+  // dynamic programming makes the middle edit deterministic when prefix and suffix match
   const dp = Array.from({ length: previousLength + 1 }, () =>
     new Array<number>(nextLength + 1).fill(0)
   );
@@ -54,6 +56,7 @@ type ReconciledTextGlyphState = {
   readonly nextSeed: number;
 };
 
+// reuse prefix, suffix, and lcs matches before allocating keys for new glyphs
 export const reconcileTextGlyphKeys = (
   previousUnits: readonly string[],
   nextUnits: readonly string[],