@grahlnn/comps 0.1.5 → 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
   };
 }
@@ -3692,18 +3710,6 @@ function getMeasurementLayerStyle(layoutContext, useContentInlineSize = false) {
 function resolveFlowText(committedMeasurement, stateMeasurement, text) {
   return committedMeasurement?.snapshot.text ?? stateMeasurement?.snapshot.text ?? text;
 }
-function resolveVisibleFlowText(pendingBootstrapText, committedMeasurement, stateMeasurement, text) {
-  return pendingBootstrapText ?? resolveFlowText(committedMeasurement, stateMeasurement, text);
-}
-function resolveActivationBootstrapText(isActivated, previousText, nextText) {
-  if (!isActivated && nextText !== previousText) {
-    return previousText;
-  }
-  return null;
-}
-function shouldDeferTargetMeasurement(committedMeasurement, pendingBootstrapText, text) {
-  return committedMeasurement === null && pendingBootstrapText !== null && pendingBootstrapText !== text;
-}
 function getOverlayStyle(plan) {
   return {
     ...OVERLAY_STYLE,
@@ -3791,55 +3797,30 @@ function MeasurementLayer({
     }, segment.key, false, undefined, this))
   }, undefined, false, undefined, this);
 }
-function useMorphTransition(text, className, bootstrapText = null) {
+function useMorphTransition(text, className) {
   const { ref, layoutContext } = useObservedLayoutContext([className]);
+  const flowTextRef = useRef(null);
   const measurementLayerRef = useRef(null);
-  const bootstrapMeasurementLayerRef = useRef(null);
   const completedDomMeasurementKeyRef = useRef(null);
   const domMeasurementSnapshotCacheRef = useRef(new Map);
-  const pendingBootstrapTextRef = useRef(bootstrapText);
   const sessionRef = useRef({ ...EMPTY_SESSION });
   const timelineRef = useRef({ ...EMPTY_TIMELINE });
   const [domMeasurementRequestKey, setDomMeasurementRequestKey] = useState(null);
   const [state, setState] = useState(EMPTY_STATE);
-  if (pendingBootstrapTextRef.current === null && bootstrapText !== null && bootstrapText !== text && sessionRef.current.committed === null) {
-    pendingBootstrapTextRef.current = bootstrapText;
-  }
   let measurementHint = sessionRef.current.committed;
   if (sessionRef.current.animating) {
     measurementHint = sessionRef.current.target ?? sessionRef.current.committed;
   }
-  let pendingBootstrapText = null;
-  if (sessionRef.current.committed === null) {
-    pendingBootstrapText = pendingBootstrapTextRef.current;
-  }
-  const isBootstrapping = shouldDeferTargetMeasurement(sessionRef.current.committed, pendingBootstrapText, text);
-  const measurementRequest = useMemo(() => {
-    if (isBootstrapping) {
-      return null;
-    }
-    return createMorphMeasurementRequest({
-      text,
-      layoutContext,
-      layoutHint: measurementHint
-    });
-  }, [text, layoutContext, measurementHint, isBootstrapping]);
-  const bootstrapMeasurementRequest = useMemo(() => {
-    if (!isBootstrapping || pendingBootstrapText === null) {
-      return null;
-    }
-    return createMorphMeasurementRequest({
-      text: pendingBootstrapText,
-      layoutContext,
-      layoutHint: null
-    });
-  }, [pendingBootstrapText, layoutContext, isBootstrapping]);
+  const measurementRequest = useMemo(() => createMorphMeasurementRequest({
+    text,
+    layoutContext,
+    layoutHint: measurementHint
+  }), [text, layoutContext, measurementHint]);
   const renderText = measurementRequest?.renderText ?? text;
   const useContentInlineSize = measurementRequest?.useContentInlineSize ?? false;
   const measurementBackend = measurementRequest?.measurementBackend ?? null;
   const segments = measurementRequest?.segments ?? EMPTY_SEGMENTS;
   const domMeasurementKey = measurementRequest?.domMeasurementKey ?? null;
-  const shouldRenderBootstrapSourceMeasurementLayer = bootstrapMeasurementRequest?.domMeasurementKey !== null;
   useLayoutEffect(() => {
     if (ref.current === null || layoutContext === null) {
       completedDomMeasurementKeyRef.current = null;
@@ -3861,36 +3842,6 @@ function useMorphTransition(text, className, bootstrapText = null) {
       });
       return;
     }
-    if (isBootstrapping && bootstrapMeasurementRequest !== null) {
-      let bootstrapDomSnapshot = null;
-      if (bootstrapMeasurementRequest.domMeasurementKey !== null && canCacheMeasurementLayerSnapshot(bootstrapMeasurementRequest.measurementBackend)) {
-        bootstrapDomSnapshot = readCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, bootstrapMeasurementRequest.domMeasurementKey);
-      }
-      if (bootstrapMeasurementRequest.domMeasurementKey !== null && bootstrapDomSnapshot === null && bootstrapMeasurementLayerRef.current === null) {
-        return;
-      }
-      const bootstrapMeasurement = measureFromNodes({
-        root: ref.current,
-        layoutContext,
-        layoutHint: null,
-        layer: bootstrapMeasurementLayerRef.current,
-        measurementBackend: bootstrapMeasurementRequest.measurementBackend,
-        snapshotOverride: bootstrapDomSnapshot,
-        text: bootstrapMeasurementRequest.text,
-        renderText: bootstrapMeasurementRequest.renderText,
-        segments: bootstrapMeasurementRequest.segments
-      });
-      if (bootstrapMeasurementRequest.domMeasurementKey !== null && bootstrapDomSnapshot === null && canCacheMeasurementLayerSnapshot(bootstrapMeasurementRequest.measurementBackend)) {
-        rememberCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, bootstrapMeasurementRequest.domMeasurementKey, bootstrapMeasurement.snapshot);
-      }
-      completedDomMeasurementKeyRef.current = null;
-      pendingBootstrapTextRef.current = null;
-      if (domMeasurementRequestKey !== null) {
-        setDomMeasurementRequestKey(null);
-      }
-      commitStaticMeasurement(sessionRef.current, bootstrapMeasurement, setState);
-      return;
-    }
     if (domMeasurementKey !== null) {
       let cachedSnapshot = null;
       if (canCacheMeasurementLayerSnapshot(measurementBackend)) {
@@ -3977,15 +3928,13 @@ function useMorphTransition(text, className, bootstrapText = null) {
     layoutContext,
     measurementBackend,
     measurementRequest,
-    isBootstrapping,
-    pendingBootstrapText,
-    bootstrapMeasurementRequest,
     domMeasurementKey,
     domMeasurementRequestKey
   ]);
   useLayoutEffect(() => {
     syncCommittedRootOriginWhenIdle({
       root: ref.current,
+      flowTextRef,
       layoutContext,
       state,
       session: sessionRef.current
@@ -3999,71 +3948,36 @@ function useMorphTransition(text, className, bootstrapText = null) {
   return {
     committedMeasurement: sessionRef.current.committed,
     domMeasurementRequestKey,
+    flowTextRef,
     ref,
-    bootstrapMeasurementLayerRef,
-    measurementBackend,
     measurementLayerRef,
     renderText,
     segments,
     layoutContext,
     state,
-    pendingBootstrapText,
-    shouldRenderBootstrapSourceMeasurementLayer,
-    bootstrapMeasurementRequest,
     useContentInlineSize
   };
 }
-function StaticTorph({ text, className }) {
-  return /* @__PURE__ */ jsxDEV("div", {
-    className,
-    children: [
-      /* @__PURE__ */ jsxDEV("span", {
-        style: SCREEN_READER_ONLY_STYLE,
-        children: text
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("span", {
-        "aria-hidden": "true",
-        style: FALLBACK_TEXT_STYLE,
-        children: text
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
 function ActiveTorph({
   text,
-  className,
-  bootstrapText
+  className
 }) {
   const {
     committedMeasurement,
     domMeasurementRequestKey,
+    flowTextRef,
     ref,
-    bootstrapMeasurementLayerRef,
-    measurementBackend,
     measurementLayerRef,
     renderText,
     segments,
     layoutContext,
     state,
-    pendingBootstrapText,
-    shouldRenderBootstrapSourceMeasurementLayer,
-    bootstrapMeasurementRequest,
     useContentInlineSize
-  } = useMorphTransition(text, className, bootstrapText);
+  } = useMorphTransition(text, className);
   const plan = state.plan;
   const shouldRenderOverlay = state.stage !== "idle" && plan !== null;
   const shouldRenderMeasurementLayer = domMeasurementRequestKey !== null;
-  const flowText = resolveVisibleFlowText(pendingBootstrapText, committedMeasurement, state.measurement, text);
-  let bootstrapMeasurementLayer = null;
-  if (shouldRenderBootstrapSourceMeasurementLayer && bootstrapMeasurementRequest !== null) {
-    bootstrapMeasurementLayer = /* @__PURE__ */ jsxDEV(MeasurementLayer, {
-      layerRef: bootstrapMeasurementLayerRef,
-      layoutContext,
-      text: bootstrapMeasurementRequest.renderText,
-      segments: bootstrapMeasurementRequest.segments,
-      useContentInlineSize: bootstrapMeasurementRequest.useContentInlineSize
-    }, undefined, false, undefined, this);
-  }
+  const flowText = resolveFlowText(committedMeasurement, state.measurement, text);
   let measurementLayer = null;
   if (shouldRenderMeasurementLayer) {
     measurementLayer = /* @__PURE__ */ jsxDEV(MeasurementLayer, {
@@ -4093,9 +4007,11 @@ 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),
-      bootstrapMeasurementLayer,
       measurementLayer,
       overlay
     ]
@@ -4105,37 +4021,16 @@ function Torph({
   text,
   className
 }) {
-  const [isActivated, setIsActivated] = useState(false);
-  const previousTextRef = useRef(text);
-  const bootstrapText = resolveActivationBootstrapText(isActivated, previousTextRef.current, text);
-  const shouldActivate = isActivated || bootstrapText !== null;
-  useLayoutEffect(() => {
-    if (!isActivated && text !== previousTextRef.current) {
-      previousTextRef.current = text;
-      setIsActivated(true);
-      return;
-    }
-    previousTextRef.current = text;
-  }, [isActivated, text]);
-  if (shouldActivate) {
-    return /* @__PURE__ */ jsxDEV(ActiveTorph, {
-      text,
-      className,
-      bootstrapText
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV(StaticTorph, {
+  return /* @__PURE__ */ jsxDEV(ActiveTorph, {
     text,
     className
   }, undefined, false, undefined, this);
 }
 export {
   supportsIntrinsicWidthLock,
-  shouldDeferTargetMeasurement,
-  resolveVisibleFlowText,
   resolveMorphFrameBounds,
   resolveFlowText,
-  resolveActivationBootstrapText,
+  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;
@@ -95,9 +97,6 @@ export declare function getRootDisplay(layoutContext: LayoutContext | null): "gr
 export declare function getRootStyle(stage: MorphStage, plan: MorphRenderPlan | null, measurement: MorphMeasurement | null, layoutContext: LayoutContext | null): CSSProperties;
 export declare function getMeasurementLayerStyle(layoutContext: LayoutContext | null, useContentInlineSize?: boolean): CSSProperties;
 export declare function resolveFlowText(committedMeasurement: MorphMeasurement | null, stateMeasurement: MorphMeasurement | null, text: string): string;
-export declare function resolveVisibleFlowText(pendingBootstrapText: string | null, committedMeasurement: MorphMeasurement | null, stateMeasurement: MorphMeasurement | null, text: string): string;
-export declare function resolveActivationBootstrapText(isActivated: boolean, previousText: string, nextText: string): string | null;
-export declare function shouldDeferTargetMeasurement(committedMeasurement: MorphMeasurement | null, pendingBootstrapText: string | null, text: string): boolean;
 export declare function Torph({ text, className, }: {
     text: string;
     className?: string;

package/package.json

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