react-native-laminar 1.2.0 → 1.4.2

package/README.md

@@ -73,6 +73,35 @@ export default function Counter() {
 }
 ```
 
+### Slots
+
+Use `variant="slots"` when each digit should roll through a vertical reel.
+Prefixes and separators remain ordinary text content.
+
+```tsx
+import React, { useState } from "react";
+import { Button, View } from "react-native";
+import { Laminar } from "react-native-laminar";
+
+export default function SlotCounter() {
+  const [value, setValue] = useState("07:42");
+
+  return (
+    <View style={{ alignItems: "center", gap: 16 }}>
+      <Laminar
+        text={value}
+        variant="slots"
+        fontSize={48}
+        animationPreset="snappy"
+        clipToBounds
+        style={{ color: "#000000", fontVariant: ["tabular-nums"] }}
+      />
+      <Button title="Change" onPress={() => setValue("08:15")} />
+    </View>
+  );
+}
+```
+
 ### Inside a button with auto-sizing
 
 ```tsx
@@ -86,6 +115,43 @@ export default function Counter() {
 </Pressable>
 ```
 
+### Auto-sized button with leading icons
+
+Pass a text-keyed `leading` map when the button changes between visual states.
+Laminar selects the matching entry and animates icon-to-icon replacements.
+
+```tsx
+import { ActivityIndicator, Pressable, Text } from "react-native";
+import { Laminar } from "react-native-laminar";
+
+const leading = {
+  "Sending Request": <ActivityIndicator color="#ffffff" />,
+  "Request Sent!": <Text style={{ color: "#ffffff", fontSize: 20 }}>✓</Text>,
+};
+
+<Pressable
+  style={{
+    alignItems: "center",
+    backgroundColor: "#007aff",
+    borderRadius: 36,
+    justifyContent: "center",
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+  }}
+>
+  <Laminar
+    text={status}
+    leading={leading}
+    leadingGap={5}
+    autoSize
+    style={{ color: "#ffffff", fontSize: 18, fontWeight: "700" }}
+  />
+</Pressable>
+```
+
+The map key must match the current `text` value. A missing entry means no
+leading element, so the icon fades out when the button returns to a plain label.
+
 ### Centered text in a fixed-width container
 
 Use `align` when the parent owns the width and Laminar should place the animated row inside that space.
@@ -134,10 +200,13 @@ Use `autoSize={false}` when the parent already defines the space and you only wa
 ```ts
 type LaminarProps = {
   text: string | number;
-  variant?: "text" | "number";
+  variant?: "text" | "number" | "slots";
   fontSize?: number;
   color?: string;
   align?: "left" | "center" | "right";
+  leading?: ReactNode | Readonly<Record<string, ReactNode>>;
+  leadingKey?: string | number;
+  leadingGap?: number;
   style?: StyleProp<TextStyle>;
   containerStyle?: StyleProp<ViewStyle>;
   fontStyle?: StyleProp<TextStyle>;
@@ -152,10 +221,13 @@ type LaminarProps = {
 | Prop                | Default                                     | Description                                                                        |
 | ------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------- |
 | `text`              | Required                                    | The value to display. Numbers are converted to strings internally.                 |
-| `variant`           | `"text"`                                    | `"text"` uses LCS glyph reconciliation. `"number"` uses right-aligned digit lanes. |
+| `variant`           | `"text"`                                    | `"text"` uses LCS glyph reconciliation. `"number"` uses right-aligned digit lanes. `"slots"` rolls digits through slot columns using the same lanes. |
 | `fontSize`          | Undefined                                   | Convenience prop merged into the text style.                                       |
 | `color`             | Undefined                                   | Convenience prop merged into the text style.                                       |
 | `align`             | `"left"`                                    | Visual alignment for Laminar's viewport and animated glyph row.                    |
+| `leading`           | Undefined                                   | Optional inline element, or text-keyed leading content, rendered in text mode.   |
+| `leadingKey`        | Undefined                                   | Advanced identity override for a direct leading element.                          |
+| `leadingGap`        | `0`                                         | Spacing between the leading element and the first text glyph.                      |
 | `style`             | Undefined                                   | Text style applied after `fontSize` and `color`.                                   |
 | `containerStyle`    | Undefined                                   | Advanced style override for the outer viewport shell.                              |
 | `fontStyle`         | Undefined                                   | Additional text style merged before `style`.                                       |
@@ -179,6 +251,7 @@ type LaminarProps = {
 ```tsx
 <Laminar text={word} animationPreset="smooth" />
 <Laminar text={count} variant="number" animationPreset="snappy" />
+<Laminar text={count} variant="slots" animationPreset="snappy" />
 
 // Override duration
 <Laminar text={word} animationPreset="default" animationDuration={520} />

package/lib/commonjs/hooks/use-display-units.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDisplayUnits = void 0;
 var _react = require("react");
 var _displayUnits = require("../model/display-units");
+// normalize the same units used by rendering before measurement reads them
 const useDisplayUnits = (value, enabled = true) => (0, _react.useMemo)(() =>
 // skip unit work when auto size is off
 enabled ? (0, _displayUnits.splitDisplayUnits)(value).map(_displayUnits.normalizeDisplayUnit) : [], [enabled, value]);

package/lib/commonjs/hooks/use-display-units.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_displayUnits","useDisplayUnits","value","enabled","useMemo","splitDisplayUnits","map","normalizeDisplayUnit","exports"],"sourceRoot":"../../../src","sources":["hooks/use-display-units.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAKO,MAAME,eAAe,GAAGA,CAC7BC,KAAa,EACbC,OAAO,GAAG,IAAI,KAEd,IAAAC,cAAO,EACL;AACE;AACAD,OAAO,GACH,IAAAE,+BAAiB,EAACH,KAAK,CAAC,CAACI,GAAG,CAACC,kCAAoB,CAAC,GAClD,EAAE,EACR,CAACJ,OAAO,EAAED,KAAK,CACjB,CAAC;AAACM,OAAA,CAAAP,eAAA,GAAAA,eAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","_displayUnits","useDisplayUnits","value","enabled","useMemo","splitDisplayUnits","map","normalizeDisplayUnit","exports"],"sourceRoot":"../../../src","sources":["hooks/use-display-units.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAKA;AACO,MAAME,eAAe,GAAGA,CAC7BC,KAAa,EACbC,OAAO,GAAG,IAAI,KAEd,IAAAC,cAAO,EACL;AACE;AACAD,OAAO,GACH,IAAAE,+BAAiB,EAACH,KAAK,CAAC,CAACI,GAAG,CAACC,kCAAoB,CAAC,GAClD,EAAE,EACR,CAACJ,OAAO,EAAED,KAAK,CACjB,CAAC;AAACM,OAAA,CAAAP,eAAA,GAAAA,eAAA","ignoreList":[]}

package/lib/commonjs/hooks/use-inline-auto-width.js

@@ -6,25 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.useInlineAutoWidth = void 0;
 var _react = require("react");
 var _reactNativeReanimated = require("react-native-reanimated");
+const WIDTH_CACHE_LIMIT = 64;
+
+// measure each content signature once and drive later changes through one width value
 const useInlineAutoWidth = ({
   enabled,
-  driveToWidth
+  driveToWidth,
+  measurementKey
 }) => {
   const widthValue = (0, _reactNativeReanimated.useSharedValue)(0);
   const measuredWidthRef = (0, _react.useRef)(null);
   const bootstrappedRef = (0, _react.useRef)(false);
+  const widthCacheRef = (0, _react.useRef)(new Map());
   const [hasBootstrappedWidth, setHasBootstrappedWidth] = (0, _react.useState)(false);
-  const captureLayout = (0, _react.useCallback)(event => {
-    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 = (0, _react.useCallback)(nextWidth => {
     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;
@@ -32,13 +33,45 @@ const useInlineAutoWidth = ({
       return;
     }
     widthValue.value = driveToWidth(nextWidth);
-  }, [driveToWidth, enabled, widthValue]);
+  }, [driveToWidth, widthValue]);
+  const captureLayout = (0, _react.useCallback)(event => {
+    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
+  (0, _react.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 = (0, _reactNativeReanimated.useAnimatedStyle)(() => enabled && hasBootstrappedWidth ? {
     width: widthValue.value
   } : {}, [enabled, hasBootstrappedWidth]);
   return {
     captureLayout,
-    animatedWidthStyle
+    animatedWidthStyle,
+    shouldMeasure: enabled && cachedWidth === undefined
   };
 };
 exports.useInlineAutoWidth = useInlineAutoWidth;

package/lib/commonjs/hooks/use-inline-auto-width.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNativeReanimated","useInlineAutoWidth","enabled","driveToWidth","widthValue","useSharedValue","measuredWidthRef","useRef","bootstrappedRef","hasBootstrappedWidth","setHasBootstrappedWidth","useState","captureLayout","useCallback","event","nextWidth","Math","max","ceil","nativeEvent","layout","width","current","value","animatedWidthStyle","useAnimatedStyle","exports"],"sourceRoot":"../../../src","sources":["hooks/use-inline-auto-width.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,sBAAA,GAAAD,OAAA;AAOO,MAAME,kBAAkB,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAqB,CAAC,KAAK;EACvE,MAAMC,UAAU,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EACpC,MAAMC,gBAAgB,GAAG,IAAAC,aAAM,EAAgB,IAAI,CAAC;EACpD,MAAMC,eAAe,GAAG,IAAAD,aAAM,EAAC,KAAK,CAAC;EACrC,MAAM,CAACE,oBAAoB,EAAEC,uBAAuB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAEvE,MAAMC,aAAa,GAAG,IAAAC,kBAAW,EAC9BC,KAAwB,IAAK;IAC5B,IAAI,CAACZ,OAAO,EAAE;MACZ;IACF;IAEA,MAAMa,SAAS,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,IAAI,CAACJ,KAAK,CAACK,WAAW,CAACC,MAAM,CAACC,KAAK,CAAC,CAAC;IAExE,IAAIf,gBAAgB,CAACgB,OAAO,KAAKP,SAAS,EAAE;MAC1C;IACF;IAEAT,gBAAgB,CAACgB,OAAO,GAAGP,SAAS;;IAEpC;IACA,IAAI,CAACP,eAAe,CAACc,OAAO,EAAE;MAC5Bd,eAAe,CAACc,OAAO,GAAG,IAAI;MAC9BlB,UAAU,CAACmB,KAAK,GAAGR,SAAS;MAC5BL,uBAAuB,CAAC,IAAI,CAAC;MAC7B;IACF;IAEAN,UAAU,CAACmB,KAAK,GAAGpB,YAAY,CAACY,SAAS,CAAC;EAC5C,CAAC,EACD,CAACZ,YAAY,EAAED,OAAO,EAAEE,UAAU,CACpC,CAAC;EAED,MAAMoB,kBAAkB,GAAG,IAAAC,uCAAgB,EACzC,MACEvB,OAAO,IAAIO,oBAAoB,GAC3B;IACEY,KAAK,EAAEjB,UAAU,CAACmB;EACpB,CAAC,GACD,CAAC,CAAC,EACR,CAACrB,OAAO,EAAEO,oBAAoB,CAChC,CAAC;EAED,OAAO;IACLG,aAAa;IACbY;EACF,CAAC;AACH,CAAC;AAACE,OAAA,CAAAzB,kBAAA,GAAAA,kBAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactNativeReanimated","WIDTH_CACHE_LIMIT","useInlineAutoWidth","enabled","driveToWidth","measurementKey","widthValue","useSharedValue","measuredWidthRef","useRef","bootstrappedRef","widthCacheRef","Map","hasBootstrappedWidth","setHasBootstrappedWidth","useState","applyWidth","useCallback","nextWidth","current","value","captureLayout","event","Math","max","ceil","nativeEvent","layout","width","delete","size","oldestKey","keys","next","undefined","set","cachedWidth","get","useEffect","animatedWidthStyle","useAnimatedStyle","shouldMeasure","exports"],"sourceRoot":"../../../src","sources":["hooks/use-inline-auto-width.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/hooks/use-morph-motion.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.useMorphMotion = void 0;
 var _react = require("react");
 var _presetMap = require("../motion/preset-map");
+// resolve one motion recipe and one shared stagger unit for a render tree
 const useMorphMotion = ({
   variant,
   animationPreset,
   animationDuration,
   stagger
 }) => {
-  // 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");
   const motionRecipe = (0, _react.useMemo)(() => (0, _presetMap.resolveMotionRecipe)(resolvedPreset, animationDuration), [animationDuration, resolvedPreset]);
   return {

package/lib/commonjs/hooks/use-morph-motion.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_presetMap","useMorphMotion","variant","animationPreset","animationDuration","stagger","resolvedPreset","motionRecipe","useMemo","resolveMotionRecipe","staggerMs","Math","round","exports"],"sourceRoot":"../../../src","sources":["hooks/use-morph-motion.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAmBO,MAAME,cAAc,GAAGA,CAAC;EAC7BC,OAAO;EACPC,eAAe;EACfC,iBAAiB;EACjBC;AACM,CAAC,KAAkB;EACzB;EACA,MAAMC,cAAc,GAClBH,eAAe,KAAKD,OAAO,KAAK,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;EAEhE,MAAMK,YAAY,GAAG,IAAAC,cAAO,EAC1B,MAAM,IAAAC,8BAAmB,EAACH,cAAc,EAAEF,iBAAiB,CAAC,EAC5D,CAACA,iBAAiB,EAAEE,cAAc,CACpC,CAAC;EAED,OAAO;IACLC,YAAY;IACZG,SAAS,EAAEC,IAAI,CAACC,KAAK,CAACP,OAAO,GAAG,IAAI;EACtC,CAAC;AACH,CAAC;AAACQ,OAAA,CAAAZ,cAAA,GAAAA,cAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","_presetMap","useMorphMotion","variant","animationPreset","animationDuration","stagger","resolvedPreset","motionRecipe","useMemo","resolveMotionRecipe","staggerMs","Math","round","exports"],"sourceRoot":"../../../src","sources":["hooks/use-morph-motion.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAmBA;AACO,MAAME,cAAc,GAAGA,CAAC;EAC7BC,OAAO;EACPC,eAAe;EACfC,iBAAiB;EACjBC;AACM,CAAC,KAAkB;EACzB;EACA,MAAMC,cAAc,GAClBH,eAAe,KAAKD,OAAO,KAAK,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;EAEhE,MAAMK,YAAY,GAAG,IAAAC,cAAO,EAC1B,MAAM,IAAAC,8BAAmB,EAACH,cAAc,EAAEF,iBAAiB,CAAC,EAC5D,CAACA,iBAAiB,EAAEE,cAAc,CACpC,CAAC;EAED,OAAO;IACLC,YAAY;IACZG,SAAS,EAAEC,IAAI,CAACC,KAAK,CAACP,OAAO,GAAG,IAAI;EACtC,CAAC;AACH,CAAC;AAACQ,OAAA,CAAAZ,cAAA,GAAAA,cAAA","ignoreList":[]}

package/lib/commonjs/hooks/use-morph-text-style.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useMorphTextStyle = void 0;
 var _react = require("react");
+// compose the public style layers into the style passed to every glyph
 const useMorphTextStyle = ({
   fontSize,
   color,
   fontStyle,
   style
 }) => {
+  // keep the base layer small so caller styles can override it predictably
   const baseTextStyle = (0, _react.useMemo)(() => {
     const nextStyle = {
       includeFontPadding: false
@@ -23,6 +25,8 @@ const useMorphTextStyle = ({
     }
     return nextStyle;
   }, [color, fontSize]);
+
+  // preserve the merge order used by the public style contract
   const textStyle = (0, _react.useMemo)(() => [baseTextStyle, fontStyle, style], [baseTextStyle, fontStyle, style]);
   return {
     textStyle

package/lib/commonjs/hooks/use-morph-text-style.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","useMorphTextStyle","fontSize","color","fontStyle","style","baseTextStyle","useMemo","nextStyle","includeFontPadding","undefined","textStyle","exports"],"sourceRoot":"../../../src","sources":["hooks/use-morph-text-style.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAcO,MAAMC,iBAAiB,GAAGA,CAAC;EAChCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC;AACM,CAAC,KAAqB;EAC5B,MAAMC,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM;IAClC,MAAMC,SAAoB,GAAG;MAC3BC,kBAAkB,EAAE;IACtB,CAAC;IAED,IAAIP,QAAQ,KAAKQ,SAAS,EAAE;MAC1BF,SAAS,CAACN,QAAQ,GAAGA,QAAQ;IAC/B;IAEA,IAAIC,KAAK,KAAKO,SAAS,EAAE;MACvBF,SAAS,CAACL,KAAK,GAAGA,KAAK;IACzB;IAEA,OAAOK,SAAS;EAClB,CAAC,EAAE,CAACL,KAAK,EAAED,QAAQ,CAAC,CAAC;EAErB,MAAMS,SAAS,GAAG,IAAAJ,cAAO,EACvB,MAAM,CAACD,aAAa,EAAEF,SAAS,EAAEC,KAAK,CAAC,EACvC,CAACC,aAAa,EAAEF,SAAS,EAAEC,KAAK,CAClC,CAAC;EAED,OAAO;IACLM;EACF,CAAC;AACH,CAAC;AAACC,OAAA,CAAAX,iBAAA,GAAAA,iBAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","useMorphTextStyle","fontSize","color","fontStyle","style","baseTextStyle","useMemo","nextStyle","includeFontPadding","undefined","textStyle","exports"],"sourceRoot":"../../../src","sources":["hooks/use-morph-text-style.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAcA;AACO,MAAMC,iBAAiB,GAAGA,CAAC;EAChCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC;AACM,CAAC,KAAqB;EAC5B;EACA,MAAMC,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM;IAClC,MAAMC,SAAoB,GAAG;MAC3BC,kBAAkB,EAAE;IACtB,CAAC;IAED,IAAIP,QAAQ,KAAKQ,SAAS,EAAE;MAC1BF,SAAS,CAACN,QAAQ,GAAGA,QAAQ;IAC/B;IAEA,IAAIC,KAAK,KAAKO,SAAS,EAAE;MACvBF,SAAS,CAACL,KAAK,GAAGA,KAAK;IACzB;IAEA,OAAOK,SAAS;EAClB,CAAC,EAAE,CAACL,KAAK,EAAED,QAAQ,CAAC,CAAC;;EAErB;EACA,MAAMS,SAAS,GAAG,IAAAJ,cAAO,EACvB,MAAM,CAACD,aAAa,EAAEF,SAAS,EAAEC,KAAK,CAAC,EACvC,CAACC,aAAa,EAAEF,SAAS,EAAEC,KAAK,CAClC,CAAC;EAED,OAAO;IACLM;EACF,CAAC;AACH,CAAC;AAACC,OAAA,CAAAX,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/lib/commonjs/hooks/use-numeric-lanes.js

@@ -7,6 +7,7 @@ exports.useNumericLanes = void 0;
 var _react = require("react");
 var _displayUnits = require("../model/display-units");
 var _numericLanes = require("../model/numeric-lanes");
+// retain numeric lane identity across value changes without storing it in state
 const useNumericLanes = value => {
   const units = (0, _react.useMemo)(() => (0, _displayUnits.splitDisplayUnits)(value), [value]);
   const ledgerRef = (0, _react.useRef)({

package/lib/commonjs/hooks/use-numeric-lanes.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_displayUnits","_numericLanes","useNumericLanes","value","units","useMemo","splitDisplayUnits","ledgerRef","useRef","previousValue","laneKeys","map","_","index","nextSeed","length","direction","current","nextLedger","reconcileNumericLanes","leadLength","findNumericLeadLength","exports"],"sourceRoot":"../../../src","sources":["hooks/use-numeric-lanes.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,aAAA,GAAAD,OAAA;AAIA,IAAAE,aAAA,GAAAF,OAAA;AAgBO,MAAMG,eAAe,GAAIC,KAAa,IAA0B;EACrE,MAAMC,KAAK,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,+BAAiB,EAACH,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAC9D,MAAMI,SAAS,GAAG,IAAAC,aAAM,EAAgB;IACtCC,aAAa,EAAEN,KAAK;IACpBO,QAAQ,EAAEN,KAAK,CAACO,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAKA,KAAK,CAAC;IACxCC,QAAQ,EAAEV,KAAK,CAACW,MAAM;IACtBC,SAAS,EAAE;EACb,CAAC,CAAC;;EAEF;EACA,IAAIb,KAAK,KAAKI,SAAS,CAACU,OAAO,CAACR,aAAa,EAAE;IAC7C,MAAMS,UAAU,GAAG,IAAAC,mCAAqB,EACtCZ,SAAS,CAACU,OAAO,CAACR,aAAa,EAC/BN,KAAK,EACLI,SAAS,CAACU,OAAO,CAACP,QAAQ,EAC1BH,SAAS,CAACU,OAAO,CAACH,QACpB,CAAC;IAEDP,SAAS,CAACU,OAAO,GAAG;MAClBR,aAAa,EAAEN,KAAK;MACpBO,QAAQ,EAAEQ,UAAU,CAACR,QAAQ;MAC7BI,QAAQ,EAAEI,UAAU,CAACJ,QAAQ;MAC7BE,SAAS,EAAEE,UAAU,CAACF;IACxB,CAAC;EACH;EAEA,OAAO;IACLZ,KAAK;IACLM,QAAQ,EAAEH,SAAS,CAACU,OAAO,CAACP,QAAQ;IACpCM,SAAS,EAAET,SAAS,CAACU,OAAO,CAACD,SAAS;IACtCI,UAAU,EAAE,IAAAC,mCAAqB,EAACjB,KAAK;EACzC,CAAC;AACH,CAAC;AAACkB,OAAA,CAAApB,eAAA,GAAAA,eAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","_displayUnits","_numericLanes","useNumericLanes","value","units","useMemo","splitDisplayUnits","ledgerRef","useRef","previousValue","laneKeys","map","_","index","nextSeed","length","direction","current","nextLedger","reconcileNumericLanes","leadLength","findNumericLeadLength","exports"],"sourceRoot":"../../../src","sources":["hooks/use-numeric-lanes.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,aAAA,GAAAD,OAAA;AAIA,IAAAE,aAAA,GAAAF,OAAA;AAgBA;AACO,MAAMG,eAAe,GAAIC,KAAa,IAA0B;EACrE,MAAMC,KAAK,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,+BAAiB,EAACH,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAC9D,MAAMI,SAAS,GAAG,IAAAC,aAAM,EAAgB;IACtCC,aAAa,EAAEN,KAAK;IACpBO,QAAQ,EAAEN,KAAK,CAACO,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAKA,KAAK,CAAC;IACxCC,QAAQ,EAAEV,KAAK,CAACW,MAAM;IACtBC,SAAS,EAAE;EACb,CAAC,CAAC;;EAEF;EACA,IAAIb,KAAK,KAAKI,SAAS,CAACU,OAAO,CAACR,aAAa,EAAE;IAC7C,MAAMS,UAAU,GAAG,IAAAC,mCAAqB,EACtCZ,SAAS,CAACU,OAAO,CAACR,aAAa,EAC/BN,KAAK,EACLI,SAAS,CAACU,OAAO,CAACP,QAAQ,EAC1BH,SAAS,CAACU,OAAO,CAACH,QACpB,CAAC;IAEDP,SAAS,CAACU,OAAO,GAAG;MAClBR,aAAa,EAAEN,KAAK;MACpBO,QAAQ,EAAEQ,UAAU,CAACR,QAAQ;MAC7BI,QAAQ,EAAEI,UAAU,CAACJ,QAAQ;MAC7BE,SAAS,EAAEE,UAAU,CAACF;IACxB,CAAC;EACH;EAEA,OAAO;IACLZ,KAAK;IACLM,QAAQ,EAAEH,SAAS,CAACU,OAAO,CAACP,QAAQ;IACpCM,SAAS,EAAET,SAAS,CAACU,OAAO,CAACD,SAAS;IACtCI,UAAU,EAAE,IAAAC,mCAAqB,EAACjB,KAAK;EACzC,CAAC;AACH,CAAC;AAACkB,OAAA,CAAApB,eAAA,GAAAA,eAAA","ignoreList":[]}

package/lib/commonjs/hooks/use-text-glyphs.js

@@ -7,28 +7,49 @@ exports.useTextGlyphs = void 0;
 var _react = require("react");
 var _displayUnits = require("../model/display-units");
 var _textKeys = require("../model/text-keys");
-const useTextGlyphs = (value, namespace) => {
-  const units = (0, _react.useMemo)(() => (0, _displayUnits.splitDisplayUnits)(value), [value]);
+// build the inline token stream that lets text and leading content share one ledger
+const useTextGlyphs = (value, namespace, leading, leadingKey) => {
+  const units = (0, _react.useMemo)(() => [
+  // the map key becomes the identity when leading content is state keyed
+  ...(leading ? [{
+    kind: "element",
+    signature: `leading:${String(leadingKey ?? "default")}`,
+    element: leading
+  }] : []), ...(0, _displayUnits.splitDisplayUnits)(value).map(unit => ({
+    kind: "text",
+    signature: `text:${unit}`,
+    value: unit
+  }))], [leading, leadingKey, value]);
+  const signatures = units.map(unit => unit.signature);
   const ledgerRef = (0, _react.useRef)({
     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 = (0, _textKeys.reconcileTextGlyphKeys)(ledgerRef.current.previousUnits, units, ledgerRef.current.glyphKeys, ledgerRef.current.nextSeed, namespace);
+    const nextLedger = (0, _textKeys.reconcileTextGlyphKeys)(ledgerRef.current.previousSignatures, signatures, ledgerRef.current.glyphKeys, ledgerRef.current.nextSeed, namespace);
     ledgerRef.current = {
       previousValue: value,
-      previousUnits: units,
+      previousSignatures: signatures,
       glyphKeys: nextLedger.glyphKeys,
       nextSeed: nextLedger.nextSeed
     };
   }
   const glyphKeys = ledgerRef.current.glyphKeys;
+
+  // normalize spaces at the edge where tokens become renderable glyphs
   return (0, _react.useMemo)(() => units.map((unit, index) => ({
     id: glyphKeys[index],
-    value: (0, _displayUnits.normalizeDisplayUnit)(unit)
+    kind: unit.kind,
+    ...(unit.kind === "text" ? {
+      value: (0, _displayUnits.normalizeDisplayUnit)(unit.value)
+    } : {
+      element: unit.element
+    })
   })), [glyphKeys, units]);
 };
 exports.useTextGlyphs = useTextGlyphs;

package/lib/commonjs/hooks/use-text-glyphs.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_displayUnits","_textKeys","useTextGlyphs","value","namespace","units","useMemo","splitDisplayUnits","ledgerRef","useRef","previousValue","previousUnits","glyphKeys","map","_","index","nextSeed","length","current","nextLedger","reconcileTextGlyphKeys","unit","id","normalizeDisplayUnit","exports"],"sourceRoot":"../../../src","sources":["hooks/use-text-glyphs.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAIA,IAAAE,SAAA,GAAAF,OAAA;AAUO,MAAMG,aAAa,GAAGA,CAC3BC,KAAa,EACbC,SAAiB,KACS;EAC1B,MAAMC,KAAK,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,+BAAiB,EAACJ,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAC9D,MAAMK,SAAS,GAAG,IAAAC,aAAM,EAAkB;IACxCC,aAAa,EAAEP,KAAK;IACpBQ,aAAa,EAAEN,KAAK;IACpBO,SAAS,EAAEP,KAAK,CAACQ,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAK,GAAGX,SAAS,KAAKW,KAAK,EAAE,CAAC;IAC5DC,QAAQ,EAAEX,KAAK,CAACY;EAClB,CAAC,CAAC;EAEF,IAAId,KAAK,KAAKK,SAAS,CAACU,OAAO,CAACR,aAAa,EAAE;IAC7C;IACA,MAAMS,UAAU,GAAG,IAAAC,gCAAsB,EACvCZ,SAAS,CAACU,OAAO,CAACP,aAAa,EAC/BN,KAAK,EACLG,SAAS,CAACU,OAAO,CAACN,SAAS,EAC3BJ,SAAS,CAACU,OAAO,CAACF,QAAQ,EAC1BZ,SACF,CAAC;IAEDI,SAAS,CAACU,OAAO,GAAG;MAClBR,aAAa,EAAEP,KAAK;MACpBQ,aAAa,EAAEN,KAAK;MACpBO,SAAS,EAAEO,UAAU,CAACP,SAAS;MAC/BI,QAAQ,EAAEG,UAAU,CAACH;IACvB,CAAC;EACH;EAEA,MAAMJ,SAAS,GAAGJ,SAAS,CAACU,OAAO,CAACN,SAAS;EAE7C,OAAO,IAAAN,cAAO,EACZ,MACED,KAAK,CAACQ,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK,MAAM;IAC1BO,EAAE,EAAEV,SAAS,CAACG,KAAK,CAAC;IACpBZ,KAAK,EAAE,IAAAoB,kCAAoB,EAACF,IAAI;EAClC,CAAC,CAAC,CAAC,EACL,CAACT,SAAS,EAAEP,KAAK,CACnB,CAAC;AACH,CAAC;AAACmB,OAAA,CAAAtB,aAAA,GAAAA,aAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","_displayUnits","_textKeys","useTextGlyphs","value","namespace","leading","leadingKey","units","useMemo","kind","signature","String","element","splitDisplayUnits","map","unit","signatures","ledgerRef","useRef","previousValue","previousSignatures","glyphKeys","_","index","nextSeed","length","current","some","nextLedger","reconcileTextGlyphKeys","id","normalizeDisplayUnit","exports"],"sourceRoot":"../../../src","sources":["hooks/use-text-glyphs.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAIA,IAAAE,SAAA,GAAAF,OAAA;AAcA;AACO,MAAMG,aAAa,GAAGA,CAC3BC,KAAa,EACbC,SAAiB,EACjBC,OAAmB,EACnBC,UAA4B,KACF;EAC1B,MAAMC,KAAK,GAAG,IAAAC,cAAO,EACnB,MAAM;EACJ;EACA,IAAIH,OAAO,GACP,CACE;IACEI,IAAI,EAAE,SAAS;IACfC,SAAS,EAAE,WAAWC,MAAM,CAACL,UAAU,IAAI,SAAS,CAAC,EAAE;IACvDM,OAAO,EAAEP;EACX,CAAC,CACF,GACD,EAAE,CAAC,EACP,GAAG,IAAAQ,+BAAiB,EAACV,KAAK,CAAC,CAACW,GAAG,CAAEC,IAAI,KAAM;IACzCN,IAAI,EAAE,MAAe;IACrBC,SAAS,EAAE,QAAQK,IAAI,EAAE;IACzBZ,KAAK,EAAEY;EACT,CAAC,CAAC,CAAC,CACJ,EACD,CAACV,OAAO,EAAEC,UAAU,EAAEH,KAAK,CAC7B,CAAC;EACD,MAAMa,UAAU,GAAGT,KAAK,CAACO,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACL,SAAS,CAAC;EACtD,MAAMO,SAAS,GAAG,IAAAC,aAAM,EAAkB;IACxCC,aAAa,EAAEhB,KAAK;IACpBiB,kBAAkB,EAAEJ,UAAU;IAC9BK,SAAS,EAAEd,KAAK,CAACO,GAAG,CAAC,CAACQ,CAAC,EAAEC,KAAK,KAAK,GAAGnB,SAAS,KAAKmB,KAAK,EAAE,CAAC;IAC5DC,QAAQ,EAAEjB,KAAK,CAACkB;EAClB,CAAC,CAAC;;EAEF;EACA,IACEtB,KAAK,KAAKc,SAAS,CAACS,OAAO,CAACP,aAAa,IACzCH,UAAU,CAACS,MAAM,KAAKR,SAAS,CAACS,OAAO,CAACN,kBAAkB,CAACK,MAAM,IACjET,UAAU,CAACW,IAAI,CACb,CAACjB,SAAS,EAAEa,KAAK,KAAKb,SAAS,KAAKO,SAAS,CAACS,OAAO,CAACN,kBAAkB,CAACG,KAAK,CAChF,CAAC,EACD;IACA;IACA,MAAMK,UAAU,GAAG,IAAAC,gCAAsB,EACvCZ,SAAS,CAACS,OAAO,CAACN,kBAAkB,EACpCJ,UAAU,EACVC,SAAS,CAACS,OAAO,CAACL,SAAS,EAC3BJ,SAAS,CAACS,OAAO,CAACF,QAAQ,EAC1BpB,SACF,CAAC;IAEDa,SAAS,CAACS,OAAO,GAAG;MAClBP,aAAa,EAAEhB,KAAK;MACpBiB,kBAAkB,EAAEJ,UAAU;MAC9BK,SAAS,EAAEO,UAAU,CAACP,SAAS;MAC/BG,QAAQ,EAAEI,UAAU,CAACJ;IACvB,CAAC;EACH;EAEA,MAAMH,SAAS,GAAGJ,SAAS,CAACS,OAAO,CAACL,SAAS;;EAE7C;EACA,OAAO,IAAAb,cAAO,EACZ,MACED,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,EAAEQ,KAAK,MAAM;IAC1BO,EAAE,EAAET,SAAS,CAACE,KAAK,CAAC;IACpBd,IAAI,EAAEM,IAAI,CAACN,IAAI;IACf,IAAIM,IAAI,CAACN,IAAI,KAAK,MAAM,GACpB;MAAEN,KAAK,EAAE,IAAA4B,kCAAoB,EAAChB,IAAI,CAACZ,KAAK;IAAE,CAAC,GAC3C;MAAES,OAAO,EAAEG,IAAI,CAACH;IAAQ,CAAC;EAC/B,CAAC,CAAC,CAAC,EACL,CAACS,SAAS,EAAEd,KAAK,CACnB,CAAC;AACH,CAAC;AAACyB,OAAA,CAAA9B,aAAA,GAAAA,aAAA","ignoreList":[]}

package/lib/commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.MorphingText = exports.Laminar = void 0;
+exports.Laminar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _useInlineAutoWidth = require("./hooks/use-inline-auto-width");
@@ -12,9 +12,11 @@ var _useMorphTextStyle = require("./hooks/use-morph-text-style");
 var _displayUnits = require("./model/display-units");
 var _morphViewport = require("./view/morph-viewport");
 var _numberRun = require("./view/number-run");
+var _slotsRun = require("./view/slots-run");
 var _textRun = require("./view/text-run");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// choose the content variant and connect it to the shared viewport and measurement flow
 const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Laminar({
   text,
   variant = "text",
@@ -22,6 +24,9 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
   color,
   align = "left",
   className,
+  leading,
+  leadingKey,
+  leadingGap = 0,
   style,
   containerStyle,
   fontStyle,
@@ -32,6 +37,10 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
   clipToBounds = false
 }) {
   const resolvedValue = String(text ?? "");
+  // resolve state keyed leading content before measurement and token reconciliation
+  const leadingMap = isLeadingMap(leading) ? leading : undefined;
+  const resolvedLeading = leadingMap ? leadingMap[resolvedValue] : leading;
+  const resolvedLeadingKey = leadingMap ? resolvedValue : leadingKey;
   const {
     motionRecipe,
     staggerMs
@@ -49,13 +58,22 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
     fontStyle,
     style
   });
+
+  // invalidate the probe when text style, leading content, or leading spacing changes
+  const measurementKey = _react.default.useMemo(() => {
+    const flattenedStyle = _reactNative.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
+    animatedWidthStyle,
+    shouldMeasure
   } = (0, _useInlineAutoWidth.useInlineAutoWidth)({
     enabled: autoSize,
-    driveToWidth: motionRecipe.driveNumber
+    driveToWidth: motionRecipe.driveNumber,
+    measurementKey
   });
+  // measurement uses the same normalized units as the visible text row
   const measuredValue = _react.default.useMemo(() => {
     if (!autoSize) {
       return "";
@@ -68,13 +86,33 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
     align: align,
     containerStyle: containerStyle,
     animatedWidthStyle: animatedWidthStyle,
-    measurement: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      numberOfLines: 1,
+    measurement: shouldMeasure ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       onLayout: captureLayout,
-      style: textStyle,
-      children: measuredValue
-    }),
-    children: variant === "number" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_numberRun.NumberRun, {
+      style: {
+        flexDirection: "row",
+        alignSelf: "flex-start"
+      },
+      children: [variant === "text" && resolvedLeading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          alignItems: "center",
+          justifyContent: "center",
+          marginRight: leadingGap
+        },
+        children: resolvedLeading
+      }) : null, (0, _displayUnits.splitDisplayUnits)(measuredValue).map((unit, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: textStyle,
+        children: (0, _displayUnits.normalizeDisplayUnit)(unit)
+      }, `${unit}-${index}`))]
+    }) : undefined,
+    children: variant === "slots" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_slotsRun.SlotsRun, {
+      value: resolvedValue,
+      motionRecipe: motionRecipe,
+      align: align,
+      fontSize: fontSize,
+      textStyle: textStyle,
+      staggerMs: staggerMs,
+      className: className
+    }) : variant === "number" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_numberRun.NumberRun, {
       value: resolvedValue,
       motionRecipe: motionRecipe,
       align: align,
@@ -86,11 +124,16 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
       value: resolvedValue,
       motionRecipe: motionRecipe,
       align: align,
+      leading: resolvedLeading,
+      leadingKey: resolvedLeadingKey,
+      leadingGap: leadingGap,
       textStyle: textStyle,
       className: className
     })
   });
 });
-const MorphingText = exports.MorphingText = Laminar;
-var _default = exports.default = Laminar;
+function isLeadingMap(value) {
+  // react elements are objects too, so exclude them before treating a value as a map
+  return typeof value === "object" && value !== null && ! /*#__PURE__*/_react.default.isValidElement(value) && !Array.isArray(value);
+}
 //# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_useInlineAutoWidth","_useMorphMotion","_useMorphTextStyle","_displayUnits","_morphViewport","_numberRun","_textRun","_jsxRuntime","e","__esModule","default","Laminar","exports","React","memo","text","variant","fontSize","color","align","className","style","containerStyle","fontStyle","animationDuration","animationPreset","stagger","autoSize","clipToBounds","resolvedValue","String","motionRecipe","staggerMs","useMorphMotion","textStyle","useMorphTextStyle","captureLayout","animatedWidthStyle","useInlineAutoWidth","enabled","driveToWidth","driveNumber","measuredValue","useMemo","splitDisplayUnits","map","normalizeDisplayUnit","join","jsx","MorphViewport","measurement","Text","numberOfLines","onLayout","children","NumberRun","value","TextRun","MorphingText","_default"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_useInlineAutoWidth","_useMorphMotion","_useMorphTextStyle","_displayUnits","_morphViewport","_numberRun","_slotsRun","_textRun","_jsxRuntime","e","__esModule","default","Laminar","exports","React","memo","text","variant","fontSize","color","align","className","leading","leadingKey","leadingGap","style","containerStyle","fontStyle","animationDuration","animationPreset","stagger","autoSize","clipToBounds","resolvedValue","String","leadingMap","isLeadingMap","undefined","resolvedLeading","resolvedLeadingKey","motionRecipe","staggerMs","useMorphMotion","textStyle","useMorphTextStyle","measurementKey","useMemo","flattenedStyle","StyleSheet","flatten","JSON","stringify","fontFamily","fontWeight","fontVariant","letterSpacing","lineHeight","textTransform","Boolean","captureLayout","animatedWidthStyle","shouldMeasure","useInlineAutoWidth","enabled","driveToWidth","driveNumber","measuredValue","splitDisplayUnits","map","normalizeDisplayUnit","join","jsx","MorphViewport","measurement","jsxs","View","onLayout","flexDirection","alignSelf","children","alignItems","justifyContent","marginRight","unit","index","Text","SlotsRun","value","NumberRun","TextRun","isValidElement","Array","isArray"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/model/display-units.js

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

package/lib/commonjs/model/display-units.js.map

@@ -1 +1 @@
-{"version":3,"names":["NBSP","graphemeSegmenter","Intl","Segmenter","undefined","granularity","splitDisplayUnits","input","Array","from","segment","part","exports","normalizeDisplayUnit","unit","isAsciiDigit","findNumericLeadLength","units","firstDigitIndex","findIndex","length"],"sourceRoot":"../../../src","sources":["model/display-units.ts"],"mappings":";;;;;;AAAA,MAAMA,IAAI,GAAG,QAAQ;AACrB,MAAMC,iBAAiB,GACrB,OAAOC,IAAI,KAAK,WAAW,IAAI,OAAOA,IAAI,CAACC,SAAS,KAAK,UAAU,GAC/D,IAAID,IAAI,CAACC,SAAS,CAACC,SAAS,EAAE;EAAEC,WAAW,EAAE;AAAW,CAAC,CAAC,GAC1D,IAAI;AAEH,MAAMC,iBAAiB,GAAIC,KAAa,IAAe;EAC5D,IAAIN,iBAAiB,EAAE;IACrB,OAAOO,KAAK,CAACC,IAAI,CACfR,iBAAiB,CAACS,OAAO,CAACH,KAAK,CAAC,EAC/BI,IAAI,IAAKA,IAAI,CAACD,OACjB,CAAC;EACH;EAEA,OAAOF,KAAK,CAACC,IAAI,CAACF,KAAK,CAAC;AAC1B,CAAC;;AAED;AAAAK,OAAA,CAAAN,iBAAA,GAAAA,iBAAA;AACO,MAAMO,oBAAoB,GAAIC,IAAY,IAC/CA,IAAI,KAAK,GAAG,GAAGd,IAAI,GAAGc,IAAI;AAACF,OAAA,CAAAC,oBAAA,GAAAA,oBAAA;AAEtB,MAAME,YAAY,GAAID,IAAY,IAAKA,IAAI,IAAI,GAAG,IAAIA,IAAI,IAAI,GAAG;AAACF,OAAA,CAAAG,YAAA,GAAAA,YAAA;AAElE,MAAMC,qBAAqB,GAAIC,KAAwB,IAAK;EACjE,MAAMC,eAAe,GAAGD,KAAK,CAACE,SAAS,CAACJ,YAAY,CAAC;EAErD,OAAOG,eAAe,KAAK,CAAC,CAAC,GAAGD,KAAK,CAACG,MAAM,GAAGF,eAAe;AAChE,CAAC;AAACN,OAAA,CAAAI,qBAAA,GAAAA,qBAAA","ignoreList":[]}
+{"version":3,"names":["NBSP","graphemeSegmenter","Intl","Segmenter","undefined","granularity","splitDisplayUnits","input","Array","from","segment","part","exports","normalizeDisplayUnit","unit","isAsciiDigit","findNumericLeadLength","units","firstDigitIndex","findIndex","length"],"sourceRoot":"../../../src","sources":["model/display-units.ts"],"mappings":";;;;;;AAAA,MAAMA,IAAI,GAAG,QAAQ;AACrB,MAAMC,iBAAiB,GACrB,OAAOC,IAAI,KAAK,WAAW,IAAI,OAAOA,IAAI,CAACC,SAAS,KAAK,UAAU,GAC/D,IAAID,IAAI,CAACC,SAAS,CAACC,SAAS,EAAE;EAAEC,WAAW,EAAE;AAAW,CAAC,CAAC,GAC1D,IAAI;;AAEV;AACO,MAAMC,iBAAiB,GAAIC,KAAa,IAAe;EAC5D,IAAIN,iBAAiB,EAAE;IACrB,OAAOO,KAAK,CAACC,IAAI,CACfR,iBAAiB,CAACS,OAAO,CAACH,KAAK,CAAC,EAC/BI,IAAI,IAAKA,IAAI,CAACD,OACjB,CAAC;EACH;EAEA,OAAOF,KAAK,CAACC,IAAI,CAACF,KAAK,CAAC;AAC1B,CAAC;;AAED;AAAAK,OAAA,CAAAN,iBAAA,GAAAA,iBAAA;AACO,MAAMO,oBAAoB,GAAIC,IAAY,IAC/CA,IAAI,KAAK,GAAG,GAAGd,IAAI,GAAGc,IAAI;;AAE5B;AAAAF,OAAA,CAAAC,oBAAA,GAAAA,oBAAA;AACO,MAAME,YAAY,GAAID,IAAY,IAAKA,IAAI,IAAI,GAAG,IAAIA,IAAI,IAAI,GAAG;;AAExE;AAAAF,OAAA,CAAAG,YAAA,GAAAA,YAAA;AACO,MAAMC,qBAAqB,GAAIC,KAAwB,IAAK;EACjE,MAAMC,eAAe,GAAGD,KAAK,CAACE,SAAS,CAACJ,YAAY,CAAC;EAErD,OAAOG,eAAe,KAAK,CAAC,CAAC,GAAGD,KAAK,CAACG,MAAM,GAAGF,eAAe;AAChE,CAAC;AAACN,OAAA,CAAAI,qBAAA,GAAAA,qBAAA","ignoreList":[]}

package/lib/commonjs/model/numeric-lanes.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.reconcileNumericLanes = void 0;
 var _displayUnits = require("./display-units");
+// strip formatting before comparing values so direction follows the displayed number
 const readNumericMagnitude = input => parseFloat(input.replace(/[^0-9.-]/g, "")) || 0;
+
+// the sign controls which side of each digit lane enters and exits
 const deriveFlowDirection = (previousValue, nextValue) => Math.sign(readNumericMagnitude(nextValue) - readNumericMagnitude(previousValue));
+// preserve right-aligned place values while allowing prefixes to grow or shrink
 const reconcileNumericLanes = (previousValue, nextValue, previousKeys, seed) => {
   const previousUnits = (0, _displayUnits.splitDisplayUnits)(previousValue);
   const nextUnits = (0, _displayUnits.splitDisplayUnits)(nextValue);

package/lib/commonjs/model/numeric-lanes.js.map

@@ -1 +1 @@
-{"version":3,"names":["_displayUnits","require","readNumericMagnitude","input","parseFloat","replace","deriveFlowDirection","previousValue","nextValue","Math","sign","reconcileNumericLanes","previousKeys","seed","previousUnits","splitDisplayUnits","nextUnits","nextLaneKeys","Array","length","nextSeed","nextLeadLength","findNumericLeadLength","previousLeadLength","sharedLeadLength","min","index","previousTailUnits","slice","nextTailUnits","previousTailKeys","laneCount","max","leftPaddedPreviousUnits","fill","leftPaddedNextUnits","leftPaddedPreviousKeys","nextTailOffset","paddedIndex","nextUnit","previousUnit","previousKey","laneKeys","direction","exports"],"sourceRoot":"../../../src","sources":["model/numeric-lanes.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_displayUnits","require","readNumericMagnitude","input","parseFloat","replace","deriveFlowDirection","previousValue","nextValue","Math","sign","reconcileNumericLanes","previousKeys","seed","previousUnits","splitDisplayUnits","nextUnits","nextLaneKeys","Array","length","nextSeed","nextLeadLength","findNumericLeadLength","previousLeadLength","sharedLeadLength","min","index","previousTailUnits","slice","nextTailUnits","previousTailKeys","laneCount","max","leftPaddedPreviousUnits","fill","leftPaddedNextUnits","leftPaddedPreviousKeys","nextTailOffset","paddedIndex","nextUnit","previousUnit","previousKey","laneKeys","direction","exports"],"sourceRoot":"../../../src","sources":["model/numeric-lanes.ts"],"mappings":"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","ignoreList":[]}