@grahlnn/comps 0.1.2 → 0.1.4

package/dist/index.js

@@ -2523,6 +2523,7 @@ var MORPH = {
   maxFadeMs: 150,
   ease: "cubic-bezier(0.22, 1, 0.36, 1)",
   geometryEpsilon: 0.5,
+  contentWidthLockEpsilon: 2,
   lineGroupingEpsilon: 1
 };
 var MORPH_SEGMENT_CACHE_LIMIT = 256;
@@ -2930,6 +2931,15 @@ function getDomMeasurementRequestKey(text, renderText, layoutContext, useContent
   }
   return `dom\x00${inlineSizeMode}\x00${text}\x00${renderText}\x00${layoutContext.measurementVersion}\x00${getMorphMeasurementEpoch()}`;
 }
+function needsMeasurementLayer(measurementBackend, renderText) {
+  if (measurementBackend === "pretext") {
+    return false;
+  }
+  return renderText.length > 0;
+}
+function canCacheMeasurementLayerSnapshot(measurementBackend) {
+  return measurementBackend === "dom";
+}
 function readCachedMorphSnapshot(cache, cacheKey) {
   const cached = cache.get(cacheKey);
   if (cached === undefined) {
@@ -3099,7 +3109,7 @@ function shouldMeasureUsingContentInlineSize(layoutContext, layoutHint) {
   if (layoutHint === null || !isSingleLineSnapshot(layoutHint.snapshot)) {
     return false;
   }
-  return nearlyEqual(layoutHint.layoutInlineSize, layoutHint.snapshot.width);
+  return nearlyEqual(layoutHint.layoutInlineSize, layoutHint.snapshot.width, MORPH.contentWidthLockEpsilon);
 }
 function createMorphMeasurementRequest({
   text,
@@ -3117,7 +3127,7 @@ function createMorphMeasurementRequest({
     segments = EMPTY_SEGMENTS;
   }
   let domMeasurementKey = null;
-  if (measurementBackend === "dom" && renderText.length > 0) {
+  if (needsMeasurementLayer(measurementBackend, renderText)) {
     domMeasurementKey = getDomMeasurementRequestKey(text, renderText, layoutContext, useContentInlineSize);
   }
   return {
@@ -3189,17 +3199,19 @@ function measureFromNodes({
       pretextSnapshot = measureMorphSnapshotWithPretext(text, measurementLayoutContext);
     }
     let domSnapshot = null;
-    if (measurementBackend === "dom") {
-      domSnapshot = measureMorphSnapshotFromLayer(text, renderText, segments, layer);
-    } else if (measurementBackend !== "pretext") {
-      domSnapshot = measureMorphSnapshotWithDomService({
-        root,
-        layoutContext,
-        text,
-        renderText,
-        segments,
-        useContentInlineSize
-      });
+    if (measurementBackend !== "pretext") {
+      if (layer !== null) {
+        domSnapshot = measureMorphSnapshotFromLayer(text, renderText, segments, layer);
+      } else {
+        domSnapshot = measureMorphSnapshotWithDomService({
+          root,
+          layoutContext,
+          text,
+          renderText,
+          segments,
+          useContentInlineSize
+        });
+      }
     }
     if (measurementBackend === "probe" && pretextSnapshot !== null && domSnapshot !== null) {
       const trusted = areSnapshotsEquivalentForPretextTrust(pretextSnapshot, domSnapshot);
@@ -3423,10 +3435,18 @@ function resetMorph(session, timeline, setState) {
   setState(EMPTY_STATE);
 }
 function commitStaticMeasurement(session, measurement, setState) {
+  if (!session.animating && session.target === null && session.committed !== null && sameMeasurement(session.committed, measurement)) {
+    return;
+  }
   session.committed = measurement;
   session.target = null;
   session.animating = false;
-  setState(createStaticState(measurement));
+  setState((current) => {
+    if (current.stage === "idle" && current.plan === null && current.measurement !== null && sameMeasurement(current.measurement, measurement)) {
+      return current;
+    }
+    return createStaticState(measurement);
+  });
 }
 function scheduleMorphTimeline({
   session,
@@ -3810,7 +3830,7 @@ function useMorphTransition(text, className, bootstrapText = null) {
   const measurementBackend = measurementRequest?.measurementBackend ?? null;
   const segments = measurementRequest?.segments ?? EMPTY_SEGMENTS;
   const domMeasurementKey = measurementRequest?.domMeasurementKey ?? null;
-  const shouldRenderBootstrapSourceMeasurementLayer = bootstrapMeasurementRequest?.measurementBackend === "dom" && bootstrapMeasurementRequest.renderText.length > 0;
+  const shouldRenderBootstrapSourceMeasurementLayer = bootstrapMeasurementRequest?.domMeasurementKey !== null;
   useLayoutEffect(() => {
     if (ref.current === null || layoutContext === null) {
       completedDomMeasurementKeyRef.current = null;
@@ -3834,7 +3854,7 @@ function useMorphTransition(text, className, bootstrapText = null) {
     }
     if (pendingBootstrapText !== null && pendingBootstrapText !== text && bootstrapMeasurementRequest !== null && measurementRequest !== null) {
       let bootstrapDomSnapshot = null;
-      if (bootstrapMeasurementRequest.domMeasurementKey !== null) {
+      if (bootstrapMeasurementRequest.domMeasurementKey !== null && canCacheMeasurementLayerSnapshot(bootstrapMeasurementRequest.measurementBackend)) {
         bootstrapDomSnapshot = readCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, bootstrapMeasurementRequest.domMeasurementKey);
       }
       if (bootstrapMeasurementRequest.domMeasurementKey !== null && bootstrapDomSnapshot === null && bootstrapMeasurementLayerRef.current === null) {
@@ -3851,7 +3871,7 @@ function useMorphTransition(text, className, bootstrapText = null) {
         renderText: bootstrapMeasurementRequest.renderText,
         segments: bootstrapMeasurementRequest.segments
       });
-      if (bootstrapMeasurementRequest.domMeasurementKey !== null && bootstrapDomSnapshot === null) {
+      if (bootstrapMeasurementRequest.domMeasurementKey !== null && bootstrapDomSnapshot === null && canCacheMeasurementLayerSnapshot(bootstrapMeasurementRequest.measurementBackend)) {
         rememberCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, bootstrapMeasurementRequest.domMeasurementKey, bootstrapMeasurement.snapshot);
       }
       completedDomMeasurementKeyRef.current = null;
@@ -3863,7 +3883,10 @@ function useMorphTransition(text, className, bootstrapText = null) {
       return;
     }
     if (domMeasurementKey !== null) {
-      const cachedSnapshot = readCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, domMeasurementKey);
+      let cachedSnapshot = null;
+      if (canCacheMeasurementLayerSnapshot(measurementBackend)) {
+        cachedSnapshot = readCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, domMeasurementKey);
+      }
       if (cachedSnapshot !== null) {
         completedDomMeasurementKeyRef.current = domMeasurementKey;
         if (domMeasurementRequestKey !== null) {
@@ -3906,7 +3929,9 @@ function useMorphTransition(text, className, bootstrapText = null) {
           setState
         });
         if (nextMeasurement !== null) {
-          rememberCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, domMeasurementKey, nextMeasurement.snapshot);
+          if (canCacheMeasurementLayerSnapshot(measurementBackend)) {
+            rememberCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, domMeasurementKey, nextMeasurement.snapshot);
+          }
         }
         completedDomMeasurementKeyRef.current = domMeasurementKey;
         if (domMeasurementRequestKey !== null) {
@@ -4017,7 +4042,7 @@ function ActiveTorph({
   } = useMorphTransition(text, className, bootstrapText);
   const plan = state.plan;
   const shouldRenderOverlay = state.stage !== "idle" && plan !== null;
-  const shouldRenderMeasurementLayer = measurementBackend === "dom" && domMeasurementRequestKey !== null;
+  const shouldRenderMeasurementLayer = domMeasurementRequestKey !== null;
   const flowText = resolveVisibleFlowText(pendingBootstrapText, committedMeasurement, state.measurement, text);
   let bootstrapMeasurementLayer = null;
   if (shouldRenderBootstrapSourceMeasurementLayer && bootstrapMeasurementRequest !== null) {
@@ -4101,6 +4126,7 @@ export {
   resolveFlowText,
   resolveActivationBootstrapText,
   pairMorphCharacters,
+  needsMeasurementLayer,
   measureMorphSnapshotFromLayer,
   getRootStyle,
   getRootDisplay,

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

@@ -1,4 +1,5 @@
 import { type CSSProperties } from "react";
+import { type PretextMorphMeasurementBackend } from "../utils/text-layout/pretextMorph";
 export type SupportedWhiteSpace = "normal" | "nowrap" | "pre-wrap";
 export type MorphCharacterLayout = {
     glyph: string;
@@ -76,6 +77,7 @@ type GlyphExit = {
     from: MorphCharacterLayout;
 };
 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 pairMorphCharacters(previous: MorphCharacterLayout[], next: MorphCharacterLayout[]): GlyphPairing[];
 export declare function resolveMorphFrameBounds(previous: MorphSnapshot, next: MorphSnapshot): {

package/package.json

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