@grahlnn/comps 0.1.6 → 0.1.7

package/dist/index.js

@@ -3077,6 +3077,12 @@ function readRootOrigin(node) {
   const rect = node.getBoundingClientRect();
   return { left: rect.left, top: rect.top };
 }
+function readFlowInlineSize(node) {
+  if (node === null) {
+    return null;
+  }
+  return node.getBoundingClientRect().width;
+}
 function getTrustedPretextMeasurementBackend(text, renderText, layoutContext, useContentInlineSize) {
   const backend = getPretextMorphMeasurementBackend(text, layoutContext);
   if (backend !== "probe") {
@@ -3099,6 +3105,12 @@ function getTrustedPretextMeasurementBackend(text, renderText, layoutContext, us
   }
   return "dom";
 }
+function resolveContentWidthLockInlineSize(layoutHint) {
+  if (layoutHint.flowInlineSize !== null) {
+    return layoutHint.flowInlineSize;
+  }
+  return layoutHint.snapshot.width;
+}
 function shouldMeasureUsingContentInlineSize(layoutContext, layoutHint) {
   if (supportsIntrinsicWidthLock(layoutContext.display, layoutContext.parentDisplay)) {
     return true;
@@ -3109,7 +3121,7 @@ function shouldMeasureUsingContentInlineSize(layoutContext, layoutHint) {
   if (layoutHint === null || !isSingleLineSnapshot(layoutHint.snapshot)) {
     return false;
   }
-  return nearlyEqual(layoutHint.layoutInlineSize, layoutHint.snapshot.width, MORPH.contentWidthLockEpsilon);
+  return nearlyEqual(layoutHint.layoutInlineSize, resolveContentWidthLockInlineSize(layoutHint), MORPH.contentWidthLockEpsilon);
 }
 function createMorphMeasurementRequest({
   text,
@@ -3244,6 +3256,7 @@ function measureFromNodes({
     snapshot,
     layoutInlineSize,
     reservedInlineSize,
+    flowInlineSize: null,
     rootOrigin: readRootOrigin(root)
   };
 }
@@ -3255,6 +3268,7 @@ function pinMeasurementToCurrentOrigin(measurement, origin) {
     snapshot: measurement.snapshot,
     layoutInlineSize: measurement.layoutInlineSize,
     reservedInlineSize: measurement.reservedInlineSize,
+    flowInlineSize: measurement.flowInlineSize,
     rootOrigin: origin
   };
 }
@@ -3384,7 +3398,7 @@ function sameMeasurement(a, b) {
   if (a === b) {
     return true;
   }
-  return sameSnapshot(a.snapshot, b.snapshot) && nearlyEqual(a.layoutInlineSize, b.layoutInlineSize) && (a.reservedInlineSize === null && b.reservedInlineSize === null || a.reservedInlineSize !== null && b.reservedInlineSize !== null && nearlyEqual(a.reservedInlineSize, b.reservedInlineSize)) && nearlyEqual(a.rootOrigin.left, b.rootOrigin.left) && nearlyEqual(a.rootOrigin.top, b.rootOrigin.top);
+  return sameSnapshot(a.snapshot, b.snapshot) && nearlyEqual(a.layoutInlineSize, b.layoutInlineSize) && (a.reservedInlineSize === null && b.reservedInlineSize === null || a.reservedInlineSize !== null && b.reservedInlineSize !== null && nearlyEqual(a.reservedInlineSize, b.reservedInlineSize)) && (a.flowInlineSize === null && b.flowInlineSize === null || a.flowInlineSize !== null && b.flowInlineSize !== null && nearlyEqual(a.flowInlineSize, b.flowInlineSize)) && nearlyEqual(a.rootOrigin.left, b.rootOrigin.left) && nearlyEqual(a.rootOrigin.top, b.rootOrigin.top);
 }
 function refreshAnimatingTarget(activeTarget, measurement) {
   if (sameMeasurement(activeTarget, measurement)) {
@@ -3394,6 +3408,7 @@ function refreshAnimatingTarget(activeTarget, measurement) {
     snapshot: activeTarget.snapshot,
     layoutInlineSize: measurement.layoutInlineSize,
     reservedInlineSize: measurement.reservedInlineSize,
+    flowInlineSize: activeTarget.flowInlineSize,
     rootOrigin: measurement.rootOrigin
   };
 }
@@ -3572,6 +3587,7 @@ function reconcileMorphChange({
 }
 function syncCommittedRootOriginWhenIdle({
   root,
+  flowTextRef,
   layoutContext,
   state,
   session
@@ -3583,8 +3599,9 @@ function syncCommittedRootOriginWhenIdle({
     return;
   }
   const nextRootOrigin = readRootOrigin(root);
+  const nextFlowInlineSize = readFlowInlineSize(flowTextRef.current);
   const committedMeasurement = state.measurement;
-  if (nearlyEqual(committedMeasurement.rootOrigin.left, nextRootOrigin.left) && nearlyEqual(committedMeasurement.rootOrigin.top, nextRootOrigin.top)) {
+  if (nearlyEqual(committedMeasurement.rootOrigin.left, nextRootOrigin.left) && nearlyEqual(committedMeasurement.rootOrigin.top, nextRootOrigin.top) && (committedMeasurement.flowInlineSize === null && nextFlowInlineSize === null || committedMeasurement.flowInlineSize !== null && nextFlowInlineSize !== null && nearlyEqual(committedMeasurement.flowInlineSize, nextFlowInlineSize))) {
     session.committed = committedMeasurement;
     return;
   }
@@ -3592,6 +3609,7 @@ function syncCommittedRootOriginWhenIdle({
     snapshot: committedMeasurement.snapshot,
     layoutInlineSize: committedMeasurement.layoutInlineSize,
     reservedInlineSize: committedMeasurement.reservedInlineSize,
+    flowInlineSize: nextFlowInlineSize,
     rootOrigin: nextRootOrigin
   };
 }
@@ -3781,6 +3799,7 @@ function MeasurementLayer({
 }
 function useMorphTransition(text, className) {
   const { ref, layoutContext } = useObservedLayoutContext([className]);
+  const flowTextRef = useRef(null);
   const measurementLayerRef = useRef(null);
   const completedDomMeasurementKeyRef = useRef(null);
   const domMeasurementSnapshotCacheRef = useRef(new Map);
@@ -3915,6 +3934,7 @@ function useMorphTransition(text, className) {
   useLayoutEffect(() => {
     syncCommittedRootOriginWhenIdle({
       root: ref.current,
+      flowTextRef,
       layoutContext,
       state,
       session: sessionRef.current
@@ -3928,6 +3948,7 @@ function useMorphTransition(text, className) {
   return {
     committedMeasurement: sessionRef.current.committed,
     domMeasurementRequestKey,
+    flowTextRef,
     ref,
     measurementLayerRef,
     renderText,
@@ -3944,6 +3965,7 @@ function ActiveTorph({
   const {
     committedMeasurement,
     domMeasurementRequestKey,
+    flowTextRef,
     ref,
     measurementLayerRef,
     renderText,
@@ -3985,7 +4007,10 @@ function ActiveTorph({
       /* @__PURE__ */ jsxDEV("span", {
         "aria-hidden": "true",
         style: getFallbackTextStyle(shouldRenderOverlay),
-        children: flowText
+        children: /* @__PURE__ */ jsxDEV("span", {
+          ref: flowTextRef,
+          children: flowText
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       measurementLayer,
       overlay
@@ -4005,6 +4030,7 @@ export {
   supportsIntrinsicWidthLock,
   resolveMorphFrameBounds,
   resolveFlowText,
+  resolveContentWidthLockInlineSize,
   pairMorphCharacters,
   needsMeasurementLayer,
   measureMorphSnapshotFromLayer,

package/dist/torph/src/components/Torph.d.ts

@@ -20,6 +20,7 @@ export type MorphMeasurement = {
     snapshot: MorphSnapshot;
     layoutInlineSize: number;
     reservedInlineSize: number | null;
+    flowInlineSize: number | null;
     rootOrigin: {
         left: number;
         top: number;
@@ -79,6 +80,7 @@ type GlyphExit = {
 type GlyphPairing = GlyphMove | GlyphEnter | GlyphExit;
 export declare function needsMeasurementLayer(measurementBackend: PretextMorphMeasurementBackend, renderText: string): boolean;
 export declare function measureMorphSnapshotFromLayer(text: string, renderText: string, segments: readonly MorphSegment[], layer: HTMLElement | null): MorphSnapshot;
+export declare function resolveContentWidthLockInlineSize(layoutHint: MorphMeasurement): number;
 export declare function pairMorphCharacters(previous: MorphCharacterLayout[], next: MorphCharacterLayout[]): GlyphPairing[];
 export declare function resolveMorphFrameBounds(previous: MorphSnapshot, next: MorphSnapshot): {
     width: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grahlnn/comps",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "React components from grahlnn/comps.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",