react-native-laminar 1.2.0 → 1.4.2

package/lib/commonjs/view/slots-run.js

@@ -0,0 +1,258 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SlotsRun = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _useNumericLanes = require("../hooks/use-numeric-lanes");
+var _displayUnits = require("../model/display-units");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const rowStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  alignSelf: "flex-start"
+};
+const rowAlignStyles = {
+  left: {
+    alignSelf: "flex-start"
+  },
+  center: {
+    alignSelf: "center"
+  },
+  right: {
+    alignSelf: "flex-end"
+  }
+};
+const slotFrameStyle = {
+  position: "relative",
+  alignSelf: "flex-start",
+  overflow: "hidden"
+};
+const slotProbeStyle = {
+  opacity: 0
+};
+const slotDigitStyle = {
+  textAlign: "center"
+};
+const REEL_MIN = -12;
+const REEL_MAX = 22;
+const REEL_POSITIONS = Array.from({
+  length: 30
+}, (_, index) => index - 10);
+
+// wrap reel positions so a bounded strip can represent an endless digit wheel
+const mod = (value, divisor) => (value % divisor + divisor) % divisor;
+// compare flattened style values without treating a new array as a visual change
+const equalStyleValue = (left, right) => left === right || Array.isArray(left) && Array.isArray(right) && left.length === right.length && left.every((value, index) => value === right[index]);
+
+// prevent every parent update from rebuilding the thirty-text reel
+const areSlotReelPropsEqual = (previous, next) => {
+  if (previous.current !== next.current || previous.slotHeight !== next.slotHeight || previous.className !== next.className) {
+    return false;
+  }
+  const previousStyle = _reactNative.StyleSheet.flatten(previous.textStyle) ?? {};
+  const nextStyle = _reactNative.StyleSheet.flatten(next.textStyle) ?? {};
+  const previousKeys = Object.keys(previousStyle);
+  const nextKeys = Object.keys(nextStyle);
+  return previousKeys.length === nextKeys.length && previousKeys.every(key => equalStyleValue(previousStyle[key], nextStyle[key]));
+};
+const SlotReel = /*#__PURE__*/_react.default.memo(function SlotReel({
+  current,
+  slotHeight,
+  textStyle,
+  className
+}) {
+  // translate one bounded reel instead of mounting a new animated digit per update
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateY: (-10 - current.value) * slotHeight
+    }]
+  }), [slotHeight]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    pointerEvents: "none",
+    style: [{
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0
+    }, animatedStyle],
+    children: REEL_POSITIONS.map((position, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      numberOfLines: 1,
+      style: [textStyle, slotDigitStyle, {
+        position: "absolute",
+        top: index * slotHeight,
+        left: 0,
+        right: 0,
+        height: slotHeight,
+        lineHeight: slotHeight
+      }],
+      className: className,
+      children: mod(position, 10)
+    }, position))
+  });
+}, areSlotReelPropsEqual);
+function SlotColumn({
+  digit,
+  direction,
+  delayMs,
+  animateIn,
+  motionRecipe,
+  slotHeight,
+  textStyle,
+  className
+}) {
+  // cumulative positions let the reel move across digit wraparound without jumps
+  const spinInDistance = Math.max(digit, 1);
+  const initialDirection = direction || 1;
+  const initialValue = animateIn ? digit - spinInDistance * initialDirection : digit;
+  const current = (0, _reactNativeReanimated.useSharedValue)(initialValue);
+  const cumulativeRef = (0, _react.useRef)(digit);
+  const previousDigitRef = (0, _react.useRef)(digit);
+  const initialRef = (0, _react.useRef)(true);
+  const exitStateRef = (0, _react.useRef)({
+    digit,
+    direction,
+    motionRecipe,
+    target: digit
+  });
+  if (digit !== previousDigitRef.current) {
+    const previousDigit = previousDigitRef.current;
+    let digitDelta;
+    if (direction > 0) {
+      digitDelta = digit >= previousDigit ? digit - previousDigit : 10 - previousDigit + digit;
+    } else if (direction < 0) {
+      digitDelta = previousDigit >= digit ? -(previousDigit - digit) : -(10 - digit + previousDigit);
+    } else {
+      digitDelta = digit - previousDigit;
+    }
+    cumulativeRef.current += digitDelta;
+    previousDigitRef.current = digit;
+  }
+  exitStateRef.current = {
+    digit,
+    direction,
+    motionRecipe,
+    target: cumulativeRef.current
+  };
+  (0, _react.useEffect)(() => {
+    // continue the current reel from its last committed target when the column exits
+    return () => {
+      const exitState = exitStateRef.current;
+      const spinOutDistance = Math.max(exitState.digit, 1);
+      const exitDirection = exitState.direction || 1;
+      current.value = exitState.motionRecipe.driveNumber(exitState.target + spinOutDistance * exitDirection);
+    };
+  }, [current]);
+  (0, _react.useEffect)(() => {
+    // keep the reel bounded by recentring after enough cumulative turns
+    if (initialRef.current) {
+      initialRef.current = false;
+      if (!animateIn) {
+        return;
+      }
+    }
+    let target = cumulativeRef.current;
+    if (target < REEL_MIN + 4 || target > REEL_MAX - 4) {
+      const shift = Math.trunc(target / 10) * 10;
+      if (shift !== 0) {
+        target -= shift;
+        cumulativeRef.current = target;
+        current.value -= shift;
+      }
+    }
+    exitStateRef.current = {
+      digit,
+      direction,
+      motionRecipe,
+      target
+    };
+    current.value = motionRecipe.driveNumber(target, delayMs);
+  }, [animateIn, current, delayMs, digit, direction, motionRecipe]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: slotFrameStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [textStyle, slotProbeStyle, {
+        lineHeight: slotHeight
+      }],
+      className: className,
+      children: "0"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SlotReel, {
+      current: current,
+      slotHeight: slotHeight,
+      textStyle: textStyle,
+      className: className
+    })]
+  });
+}
+// render text prefixes beside reusable digit reels
+const SlotsRun = exports.SlotsRun = /*#__PURE__*/_react.default.memo(({
+  value,
+  motionRecipe,
+  align,
+  fontSize,
+  textStyle,
+  staggerMs,
+  className
+}) => {
+  // numeric lane identity decides which columns stay mounted as values change
+  const {
+    units,
+    direction,
+    leadLength
+  } = (0, _useNumericLanes.useNumericLanes)(value);
+  const lastValueRef = (0, _react.useRef)(value);
+  const hasAnimatedRef = (0, _react.useRef)(false);
+  // derive one stable row height so every reel position shares the same baseline
+  const slotHeight = (0, _react.useMemo)(() => {
+    const flattenedStyle = _reactNative.StyleSheet.flatten(textStyle);
+    const resolvedLineHeight = typeof flattenedStyle?.lineHeight === "number" ? flattenedStyle.lineHeight : undefined;
+    const resolvedFontSize = typeof flattenedStyle?.fontSize === "number" ? flattenedStyle.fontSize : fontSize;
+    return Math.max(12, Math.ceil(resolvedLineHeight ?? (resolvedFontSize ?? 16) * 1.18));
+  }, [fontSize, textStyle]);
+  if (value !== lastValueRef.current) {
+    hasAnimatedRef.current = true;
+    lastValueRef.current = value;
+  }
+  const digitCount = units.filter(_displayUnits.isAsciiDigit).length;
+  let digitIndex = 0;
+  const hasAnimated = hasAnimatedRef.current;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [rowStyle, rowAlignStyles[align]],
+    children: units.map((unit, index) => {
+      const inLead = index < leadLength;
+      const laneKey = inLead ? `lead:${index}` : `slot:${units.length - 1 - index}`;
+      if (inLead || !(0, _displayUnits.isAsciiDigit)(unit)) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Text, {
+          layout: hasAnimated ? motionRecipe.layoutTransition : undefined,
+          exiting: !inLead ? motionRecipe.exitTransition : undefined,
+          style: textStyle,
+          className: className,
+          children: unit
+        }, laneKey);
+      }
+      const delayMs = (digitCount - 1 - digitIndex) * staggerMs;
+      digitIndex += 1;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        layout: hasAnimated ? motionRecipe.layoutTransition : undefined,
+        entering: hasAnimated ? motionRecipe.enterTransition : undefined,
+        exiting: motionRecipe.exitTransition,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SlotColumn, {
+          digit: Number(unit),
+          direction: direction,
+          delayMs: delayMs,
+          animateIn: hasAnimated,
+          motionRecipe: motionRecipe,
+          slotHeight: slotHeight,
+          textStyle: textStyle,
+          className: className
+        })
+      }, laneKey);
+    })
+  });
+});
+SlotsRun.displayName = "SlotsRun";
+//# sourceMappingURL=slots-run.js.map

package/lib/commonjs/view/slots-run.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_useNumericLanes","_displayUnits","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","rowStyle","flexDirection","alignItems","alignSelf","rowAlignStyles","left","center","right","slotFrameStyle","position","overflow","slotProbeStyle","opacity","slotDigitStyle","textAlign","REEL_MIN","REEL_MAX","REEL_POSITIONS","Array","from","length","_","index","mod","value","divisor","equalStyleValue","isArray","every","areSlotReelPropsEqual","previous","next","current","slotHeight","className","previousStyle","StyleSheet","flatten","textStyle","nextStyle","previousKeys","keys","nextKeys","key","SlotReel","React","memo","animatedStyle","useAnimatedStyle","transform","translateY","jsx","View","pointerEvents","style","top","children","map","Text","numberOfLines","height","lineHeight","SlotColumn","digit","direction","delayMs","animateIn","motionRecipe","spinInDistance","Math","max","initialDirection","initialValue","useSharedValue","cumulativeRef","useRef","previousDigitRef","initialRef","exitStateRef","target","previousDigit","digitDelta","useEffect","exitState","spinOutDistance","exitDirection","driveNumber","shift","trunc","jsxs","SlotsRun","exports","align","fontSize","staggerMs","units","leadLength","useNumericLanes","lastValueRef","hasAnimatedRef","useMemo","flattenedStyle","resolvedLineHeight","undefined","resolvedFontSize","ceil","digitCount","filter","isAsciiDigit","digitIndex","hasAnimated","unit","inLead","laneKey","layout","layoutTransition","exiting","exitTransition","entering","enterTransition","Number","displayName"],"sourceRoot":"../../../src","sources":["view/slots-run.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/view/text-run.js

@@ -5,31 +5,63 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TextRun = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactNativeReanimated = require("react-native-reanimated");
 var _useTextGlyphs = require("../hooks/use-text-glyphs");
+var _entryExitBuilders = require("../motion/entry-exit-builders");
 var _glyphRun = require("./glyph-run");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// connect text identity, leading transitions, and glyph layout into one run
 const TextRun = exports.TextRun = /*#__PURE__*/_react.default.memo(({
   value,
   motionRecipe,
   align,
+  leading,
+  leadingKey,
+  leadingGap = 0,
   textStyle,
   className
 }) => {
   // namespace ids per instance so repeated strings do not collide
   const scopeId = (0, _react.useId)();
-  const glyphs = (0, _useTextGlyphs.useTextGlyphs)(value, scopeId);
   const lastValueRef = (0, _react.useRef)(value);
+  const lastLeadingPresenceRef = (0, _react.useRef)(Boolean(leading));
+  const lastLeadingKeyRef = (0, _react.useRef)(leadingKey);
   const hasAnimatedRef = (0, _react.useRef)(false);
-  if (value !== lastValueRef.current) {
+  const isLeadingSwap = Boolean(leading) && lastLeadingPresenceRef.current && leadingKey !== lastLeadingKeyRef.current;
+  // update the worklet flag after commit so render never writes a shared value
+  const leadingSwapProgress = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useLayoutEffect)(() => {
+    leadingSwapProgress.value = isLeadingSwap ? 1 : 0;
+  }, [isLeadingSwap, leadingSwapProgress]);
+  const glyphs = (0, _useTextGlyphs.useTextGlyphs)(value, scopeId, leading, leadingKey);
+  const elementEnterTransition = (0, _react.useMemo)(() => (0, _entryExitBuilders.createLeadingEnterTransition)({
+    durationMs: motionRecipe.durationMs,
+    easing: motionRecipe.easing
+  }), [motionRecipe.durationMs, motionRecipe.easing]);
+  const elementExitTransition = (0, _react.useMemo)(() => (0, _entryExitBuilders.createLeadingExitTransition)({
+    durationMs: motionRecipe.durationMs,
+    easing: motionRecipe.easing,
+    leadingGap,
+    scale: leadingSwapProgress
+  }), [leadingGap, leadingSwapProgress, motionRecipe.durationMs, motionRecipe.easing]);
+
+  // mark the first value as settled and later changes as eligible for motion
+  if (value !== lastValueRef.current || Boolean(leading) !== lastLeadingPresenceRef.current || leadingKey !== lastLeadingKeyRef.current) {
     hasAnimatedRef.current = true;
     lastValueRef.current = value;
+    lastLeadingPresenceRef.current = Boolean(leading);
+    lastLeadingKeyRef.current = leadingKey;
   }
+  const hasAnimated = hasAnimatedRef.current;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_glyphRun.GlyphRun, {
     glyphs: glyphs,
-    layoutTransition: motionRecipe.layoutTransition,
+    layoutTransition: hasAnimated ? motionRecipe.layoutTransition : undefined,
     enterTransition: hasAnimatedRef.current ? motionRecipe.enterTransition : undefined,
+    elementEnterTransition: isLeadingSwap ? elementEnterTransition : undefined,
     exitTransition: motionRecipe.exitTransition,
+    elementExitTransition: elementExitTransition,
+    leadingGap: leadingGap,
     align: align,
     textStyle: textStyle,
     className: className

package/lib/commonjs/view/text-run.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_useTextGlyphs","_glyphRun","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TextRun","exports","React","memo","value","motionRecipe","align","textStyle","className","scopeId","useId","glyphs","useTextGlyphs","lastValueRef","useRef","hasAnimatedRef","current","jsx","GlyphRun","layoutTransition","enterTransition","undefined","exitTransition","displayName"],"sourceRoot":"../../../src","sources":["view/text-run.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAEA,IAAAE,SAAA,GAAAF,OAAA;AAAuC,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAUhC,MAAMkB,OAAO,GAAAC,OAAA,CAAAD,OAAA,gBAAGE,cAAK,CAACC,IAAI,CAC/B,CAAC;EAAEC,KAAK;EAAEC,YAAY;EAAEC,KAAK;EAAEC,SAAS;EAAEC;AAAwB,CAAC,KAAK;EACtE;EACA,MAAMC,OAAO,GAAG,IAAAC,YAAK,EAAC,CAAC;EACvB,MAAMC,MAAM,GAAG,IAAAC,4BAAa,EAACR,KAAK,EAAEK,OAAO,CAAC;EAC5C,MAAMI,YAAY,GAAG,IAAAC,aAAM,EAACV,KAAK,CAAC;EAClC,MAAMW,cAAc,GAAG,IAAAD,aAAM,EAAC,KAAK,CAAC;EAEpC,IAAIV,KAAK,KAAKS,YAAY,CAACG,OAAO,EAAE;IAClCD,cAAc,CAACC,OAAO,GAAG,IAAI;IAC7BH,YAAY,CAACG,OAAO,GAAGZ,KAAK;EAC9B;EAEA,oBACE,IAAAxB,WAAA,CAAAqC,GAAA,EAACtC,SAAA,CAAAuC,QAAQ;IACPP,MAAM,EAAEA,MAAO;IACfQ,gBAAgB,EAAEd,YAAY,CAACc,gBAAiB;IAChDC,eAAe,EACbL,cAAc,CAACC,OAAO,GAAGX,YAAY,CAACe,eAAe,GAAGC,SACzD;IACDC,cAAc,EAAEjB,YAAY,CAACiB,cAAe;IAC5ChB,KAAK,EAAEA,KAAM;IACbC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CACF,CAAC;AAEDR,OAAO,CAACuB,WAAW,GAAG,SAAS","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_useTextGlyphs","_entryExitBuilders","_glyphRun","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TextRun","exports","React","memo","value","motionRecipe","align","leading","leadingKey","leadingGap","textStyle","className","scopeId","useId","lastValueRef","useRef","lastLeadingPresenceRef","Boolean","lastLeadingKeyRef","hasAnimatedRef","isLeadingSwap","current","leadingSwapProgress","useSharedValue","useLayoutEffect","glyphs","useTextGlyphs","elementEnterTransition","useMemo","createLeadingEnterTransition","durationMs","easing","elementExitTransition","createLeadingExitTransition","scale","hasAnimated","jsx","GlyphRun","layoutTransition","undefined","enterTransition","exitTransition","displayName"],"sourceRoot":"../../../src","sources":["view/text-run.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -2,6 +2,8 @@
 
 import { useMemo } from "react";
 import { normalizeDisplayUnit, splitDisplayUnits } from "../model/display-units.js";
+
+// normalize the same units used by rendering before measurement reads them
 export const useDisplayUnits = (value, enabled = true) => useMemo(() =>
 // skip unit work when auto size is off
 enabled ? splitDisplayUnits(value).map(normalizeDisplayUnit) : [], [enabled, value]);

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","normalizeDisplayUnit","splitDisplayUnits","useDisplayUnits","value","enabled","map"],"sourceRoot":"../../../src","sources":["hooks/use-display-units.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SACEC,oBAAoB,EACpBC,iBAAiB,QACZ,2BAAwB;AAE/B,OAAO,MAAMC,eAAe,GAAGA,CAC7BC,KAAa,EACbC,OAAO,GAAG,IAAI,KAEdL,OAAO,CACL;AACE;AACAK,OAAO,GACHH,iBAAiB,CAACE,KAAK,CAAC,CAACE,GAAG,CAACL,oBAAoB,CAAC,GAClD,EAAE,EACR,CAACI,OAAO,EAAED,KAAK,CACjB,CAAC","ignoreList":[]}
+{"version":3,"names":["useMemo","normalizeDisplayUnit","splitDisplayUnits","useDisplayUnits","value","enabled","map"],"sourceRoot":"../../../src","sources":["hooks/use-display-units.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SACEC,oBAAoB,EACpBC,iBAAiB,QACZ,2BAAwB;;AAE/B;AACA,OAAO,MAAMC,eAAe,GAAGA,CAC7BC,KAAa,EACbC,OAAO,GAAG,IAAI,KAEdL,OAAO,CACL;AACE;AACAK,OAAO,GACHH,iBAAiB,CAACE,KAAK,CAAC,CAACE,GAAG,CAACL,oBAAoB,CAAC,GAClD,EAAE,EACR,CAACI,OAAO,EAAED,KAAK,CACjB,CAAC","ignoreList":[]}

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

@@ -1,26 +1,27 @@
 "use strict";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+const WIDTH_CACHE_LIMIT = 64;
+
+// measure each content signature once and drive later changes through one width value
 export const useInlineAutoWidth = ({
   enabled,
-  driveToWidth
+  driveToWidth,
+  measurementKey
 }) => {
   const widthValue = useSharedValue(0);
   const measuredWidthRef = useRef(null);
   const bootstrappedRef = useRef(false);
+  const widthCacheRef = useRef(new Map());
   const [hasBootstrappedWidth, setHasBootstrappedWidth] = useState(false);
-  const captureLayout = 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 = 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;
@@ -28,13 +29,45 @@ export const useInlineAutoWidth = ({
       return;
     }
     widthValue.value = driveToWidth(nextWidth);
-  }, [driveToWidth, enabled, widthValue]);
+  }, [driveToWidth, widthValue]);
+  const captureLayout = 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
+  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 ? {
     width: widthValue.value
   } : {}, [enabled, hasBootstrappedWidth]);
   return {
     captureLayout,
-    animatedWidthStyle
+    animatedWidthStyle,
+    shouldMeasure: enabled && cachedWidth === undefined
   };
 };
 //# sourceMappingURL=use-inline-auto-width.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useRef","useState","useAnimatedStyle","useSharedValue","useInlineAutoWidth","enabled","driveToWidth","widthValue","measuredWidthRef","bootstrappedRef","hasBootstrappedWidth","setHasBootstrappedWidth","captureLayout","event","nextWidth","Math","max","ceil","nativeEvent","layout","width","current","value","animatedWidthStyle"],"sourceRoot":"../../../src","sources":["hooks/use-inline-auto-width.ts"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAErD,SAASC,gBAAgB,EAAEC,cAAc,QAAQ,yBAAyB;AAO1E,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAqB,CAAC,KAAK;EACvE,MAAMC,UAAU,GAAGJ,cAAc,CAAC,CAAC,CAAC;EACpC,MAAMK,gBAAgB,GAAGR,MAAM,CAAgB,IAAI,CAAC;EACpD,MAAMS,eAAe,GAAGT,MAAM,CAAC,KAAK,CAAC;EACrC,MAAM,CAACU,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGV,QAAQ,CAAC,KAAK,CAAC;EAEvE,MAAMW,aAAa,GAAGb,WAAW,CAC9Bc,KAAwB,IAAK;IAC5B,IAAI,CAACR,OAAO,EAAE;MACZ;IACF;IAEA,MAAMS,SAAS,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,IAAI,CAACJ,KAAK,CAACK,WAAW,CAACC,MAAM,CAACC,KAAK,CAAC,CAAC;IAExE,IAAIZ,gBAAgB,CAACa,OAAO,KAAKP,SAAS,EAAE;MAC1C;IACF;IAEAN,gBAAgB,CAACa,OAAO,GAAGP,SAAS;;IAEpC;IACA,IAAI,CAACL,eAAe,CAACY,OAAO,EAAE;MAC5BZ,eAAe,CAACY,OAAO,GAAG,IAAI;MAC9Bd,UAAU,CAACe,KAAK,GAAGR,SAAS;MAC5BH,uBAAuB,CAAC,IAAI,CAAC;MAC7B;IACF;IAEAJ,UAAU,CAACe,KAAK,GAAGhB,YAAY,CAACQ,SAAS,CAAC;EAC5C,CAAC,EACD,CAACR,YAAY,EAAED,OAAO,EAAEE,UAAU,CACpC,CAAC;EAED,MAAMgB,kBAAkB,GAAGrB,gBAAgB,CACzC,MACEG,OAAO,IAAIK,oBAAoB,GAC3B;IACEU,KAAK,EAAEb,UAAU,CAACe;EACpB,CAAC,GACD,CAAC,CAAC,EACR,CAACjB,OAAO,EAAEK,oBAAoB,CAChC,CAAC;EAED,OAAO;IACLE,aAAa;IACbW;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["useCallback","useEffect","useRef","useState","useAnimatedStyle","useSharedValue","WIDTH_CACHE_LIMIT","useInlineAutoWidth","enabled","driveToWidth","measurementKey","widthValue","measuredWidthRef","bootstrappedRef","widthCacheRef","Map","hasBootstrappedWidth","setHasBootstrappedWidth","applyWidth","nextWidth","current","value","captureLayout","event","Math","max","ceil","nativeEvent","layout","width","delete","size","oldestKey","keys","next","undefined","set","cachedWidth","get","animatedWidthStyle","shouldMeasure"],"sourceRoot":"../../../src","sources":["hooks/use-inline-auto-width.ts"],"mappings":"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","ignoreList":[]}

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

@@ -2,13 +2,14 @@
 
 import { useMemo } from "react";
 import { resolveMotionRecipe } from "../motion/preset-map.js";
+// resolve one motion recipe and one shared stagger unit for a render tree
 export 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 = useMemo(() => resolveMotionRecipe(resolvedPreset, animationDuration), [animationDuration, resolvedPreset]);
   return {

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","resolveMotionRecipe","useMorphMotion","variant","animationPreset","animationDuration","stagger","resolvedPreset","motionRecipe","staggerMs","Math","round"],"sourceRoot":"../../../src","sources":["hooks/use-morph-motion.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,mBAAmB,QAAQ,yBAAsB;AAmB1D,OAAO,MAAMC,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,GAAGR,OAAO,CAC1B,MAAMC,mBAAmB,CAACM,cAAc,EAAEF,iBAAiB,CAAC,EAC5D,CAACA,iBAAiB,EAAEE,cAAc,CACpC,CAAC;EAED,OAAO;IACLC,YAAY;IACZC,SAAS,EAAEC,IAAI,CAACC,KAAK,CAACL,OAAO,GAAG,IAAI;EACtC,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["useMemo","resolveMotionRecipe","useMorphMotion","variant","animationPreset","animationDuration","stagger","resolvedPreset","motionRecipe","staggerMs","Math","round"],"sourceRoot":"../../../src","sources":["hooks/use-morph-motion.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,mBAAmB,QAAQ,yBAAsB;AAmB1D;AACA,OAAO,MAAMC,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,GAAGR,OAAO,CAC1B,MAAMC,mBAAmB,CAACM,cAAc,EAAEF,iBAAiB,CAAC,EAC5D,CAACA,iBAAiB,EAAEE,cAAc,CACpC,CAAC;EAED,OAAO;IACLC,YAAY;IACZC,SAAS,EAAEC,IAAI,CAACC,KAAK,CAACL,OAAO,GAAG,IAAI;EACtC,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -1,12 +1,14 @@
 "use strict";
 
 import { useMemo } from "react";
+// compose the public style layers into the style passed to every glyph
 export const useMorphTextStyle = ({
   fontSize,
   color,
   fontStyle,
   style
 }) => {
+  // keep the base layer small so caller styles can override it predictably
   const baseTextStyle = useMemo(() => {
     const nextStyle = {
       includeFontPadding: false
@@ -19,6 +21,8 @@ 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]);
   return {
     textStyle

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useMorphTextStyle","fontSize","color","fontStyle","style","baseTextStyle","nextStyle","includeFontPadding","undefined","textStyle"],"sourceRoot":"../../../src","sources":["hooks/use-morph-text-style.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAc/B,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAChCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC;AACM,CAAC,KAAqB;EAC5B,MAAMC,aAAa,GAAGN,OAAO,CAAC,MAAM;IAClC,MAAMO,SAAoB,GAAG;MAC3BC,kBAAkB,EAAE;IACtB,CAAC;IAED,IAAIN,QAAQ,KAAKO,SAAS,EAAE;MAC1BF,SAAS,CAACL,QAAQ,GAAGA,QAAQ;IAC/B;IAEA,IAAIC,KAAK,KAAKM,SAAS,EAAE;MACvBF,SAAS,CAACJ,KAAK,GAAGA,KAAK;IACzB;IAEA,OAAOI,SAAS;EAClB,CAAC,EAAE,CAACJ,KAAK,EAAED,QAAQ,CAAC,CAAC;EAErB,MAAMQ,SAAS,GAAGV,OAAO,CACvB,MAAM,CAACM,aAAa,EAAEF,SAAS,EAAEC,KAAK,CAAC,EACvC,CAACC,aAAa,EAAEF,SAAS,EAAEC,KAAK,CAClC,CAAC;EAED,OAAO;IACLK;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["useMemo","useMorphTextStyle","fontSize","color","fontStyle","style","baseTextStyle","nextStyle","includeFontPadding","undefined","textStyle"],"sourceRoot":"../../../src","sources":["hooks/use-morph-text-style.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAc/B;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAChCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC;AACM,CAAC,KAAqB;EAC5B;EACA,MAAMC,aAAa,GAAGN,OAAO,CAAC,MAAM;IAClC,MAAMO,SAAoB,GAAG;MAC3BC,kBAAkB,EAAE;IACtB,CAAC;IAED,IAAIN,QAAQ,KAAKO,SAAS,EAAE;MAC1BF,SAAS,CAACL,QAAQ,GAAGA,QAAQ;IAC/B;IAEA,IAAIC,KAAK,KAAKM,SAAS,EAAE;MACvBF,SAAS,CAACJ,KAAK,GAAGA,KAAK;IACzB;IAEA,OAAOI,SAAS;EAClB,CAAC,EAAE,CAACJ,KAAK,EAAED,QAAQ,CAAC,CAAC;;EAErB;EACA,MAAMQ,SAAS,GAAGV,OAAO,CACvB,MAAM,CAACM,aAAa,EAAEF,SAAS,EAAEC,KAAK,CAAC,EACvC,CAACC,aAAa,EAAEF,SAAS,EAAEC,KAAK,CAClC,CAAC;EAED,OAAO;IACLK;EACF,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -3,6 +3,7 @@
 import { useMemo, useRef } from "react";
 import { findNumericLeadLength, splitDisplayUnits } from "../model/display-units.js";
 import { reconcileNumericLanes } from "../model/numeric-lanes.js";
+// retain numeric lane identity across value changes without storing it in state
 export const useNumericLanes = value => {
   const units = useMemo(() => splitDisplayUnits(value), [value]);
   const ledgerRef = useRef({

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useRef","findNumericLeadLength","splitDisplayUnits","reconcileNumericLanes","useNumericLanes","value","units","ledgerRef","previousValue","laneKeys","map","_","index","nextSeed","length","direction","current","nextLedger","leadLength"],"sourceRoot":"../../../src","sources":["hooks/use-numeric-lanes.ts"],"mappings":";;AAAA,SAASA,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAEvC,SACEC,qBAAqB,EACrBC,iBAAiB,QACZ,2BAAwB;AAC/B,SAASC,qBAAqB,QAAQ,2BAAwB;AAgB9D,OAAO,MAAMC,eAAe,GAAIC,KAAa,IAA0B;EACrE,MAAMC,KAAK,GAAGP,OAAO,CAAC,MAAMG,iBAAiB,CAACG,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAC9D,MAAME,SAAS,GAAGP,MAAM,CAAgB;IACtCQ,aAAa,EAAEH,KAAK;IACpBI,QAAQ,EAAEH,KAAK,CAACI,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAKA,KAAK,CAAC;IACxCC,QAAQ,EAAEP,KAAK,CAACQ,MAAM;IACtBC,SAAS,EAAE;EACb,CAAC,CAAC;;EAEF;EACA,IAAIV,KAAK,KAAKE,SAAS,CAACS,OAAO,CAACR,aAAa,EAAE;IAC7C,MAAMS,UAAU,GAAGd,qBAAqB,CACtCI,SAAS,CAACS,OAAO,CAACR,aAAa,EAC/BH,KAAK,EACLE,SAAS,CAACS,OAAO,CAACP,QAAQ,EAC1BF,SAAS,CAACS,OAAO,CAACH,QACpB,CAAC;IAEDN,SAAS,CAACS,OAAO,GAAG;MAClBR,aAAa,EAAEH,KAAK;MACpBI,QAAQ,EAAEQ,UAAU,CAACR,QAAQ;MAC7BI,QAAQ,EAAEI,UAAU,CAACJ,QAAQ;MAC7BE,SAAS,EAAEE,UAAU,CAACF;IACxB,CAAC;EACH;EAEA,OAAO;IACLT,KAAK;IACLG,QAAQ,EAAEF,SAAS,CAACS,OAAO,CAACP,QAAQ;IACpCM,SAAS,EAAER,SAAS,CAACS,OAAO,CAACD,SAAS;IACtCG,UAAU,EAAEjB,qBAAqB,CAACK,KAAK;EACzC,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["useMemo","useRef","findNumericLeadLength","splitDisplayUnits","reconcileNumericLanes","useNumericLanes","value","units","ledgerRef","previousValue","laneKeys","map","_","index","nextSeed","length","direction","current","nextLedger","leadLength"],"sourceRoot":"../../../src","sources":["hooks/use-numeric-lanes.ts"],"mappings":";;AAAA,SAASA,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAEvC,SACEC,qBAAqB,EACrBC,iBAAiB,QACZ,2BAAwB;AAC/B,SAASC,qBAAqB,QAAQ,2BAAwB;AAgB9D;AACA,OAAO,MAAMC,eAAe,GAAIC,KAAa,IAA0B;EACrE,MAAMC,KAAK,GAAGP,OAAO,CAAC,MAAMG,iBAAiB,CAACG,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAC9D,MAAME,SAAS,GAAGP,MAAM,CAAgB;IACtCQ,aAAa,EAAEH,KAAK;IACpBI,QAAQ,EAAEH,KAAK,CAACI,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAKA,KAAK,CAAC;IACxCC,QAAQ,EAAEP,KAAK,CAACQ,MAAM;IACtBC,SAAS,EAAE;EACb,CAAC,CAAC;;EAEF;EACA,IAAIV,KAAK,KAAKE,SAAS,CAACS,OAAO,CAACR,aAAa,EAAE;IAC7C,MAAMS,UAAU,GAAGd,qBAAqB,CACtCI,SAAS,CAACS,OAAO,CAACR,aAAa,EAC/BH,KAAK,EACLE,SAAS,CAACS,OAAO,CAACP,QAAQ,EAC1BF,SAAS,CAACS,OAAO,CAACH,QACpB,CAAC;IAEDN,SAAS,CAACS,OAAO,GAAG;MAClBR,aAAa,EAAEH,KAAK;MACpBI,QAAQ,EAAEQ,UAAU,CAACR,QAAQ;MAC7BI,QAAQ,EAAEI,UAAU,CAACJ,QAAQ;MAC7BE,SAAS,EAAEE,UAAU,CAACF;IACxB,CAAC;EACH;EAEA,OAAO;IACLT,KAAK;IACLG,QAAQ,EAAEF,SAAS,CAACS,OAAO,CAACP,QAAQ;IACpCM,SAAS,EAAER,SAAS,CAACS,OAAO,CAACD,SAAS;IACtCG,UAAU,EAAEjB,qBAAqB,CAACK,KAAK;EACzC,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -3,28 +3,49 @@
 import { useMemo, useRef } from "react";
 import { normalizeDisplayUnit, splitDisplayUnits } from "../model/display-units.js";
 import { reconcileTextGlyphKeys } from "../model/text-keys.js";
-export const useTextGlyphs = (value, namespace) => {
-  const units = useMemo(() => splitDisplayUnits(value), [value]);
+// build the inline token stream that lets text and leading content share one ledger
+export const useTextGlyphs = (value, namespace, leading, leadingKey) => {
+  const units = useMemo(() => [
+  // the map key becomes the identity when leading content is state keyed
+  ...(leading ? [{
+    kind: "element",
+    signature: `leading:${String(leadingKey ?? "default")}`,
+    element: leading
+  }] : []), ...splitDisplayUnits(value).map(unit => ({
+    kind: "text",
+    signature: `text:${unit}`,
+    value: unit
+  }))], [leading, leadingKey, value]);
+  const signatures = units.map(unit => unit.signature);
   const ledgerRef = 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 = reconcileTextGlyphKeys(ledgerRef.current.previousUnits, units, ledgerRef.current.glyphKeys, ledgerRef.current.nextSeed, namespace);
+    const nextLedger = 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 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]);
 };
 //# sourceMappingURL=use-text-glyphs.js.map