@grahlnn/comps 0.1.7 → 0.1.9

package/dist/index.js

@@ -1,9 +1,9 @@
 // torph/src/components/Torph.tsx
 import {
-  useLayoutEffect,
+  useLayoutEffect as useLayoutEffect2,
   useMemo,
-  useRef,
-  useState
+  useRef as useRef2,
+  useState as useState2
 } from "react";
 
 // torph/src/vendor/pretext/bidi.ts
@@ -2516,8 +2516,12 @@ function measureMorphSnapshotWithPretext(text, layoutContext) {
   };
 }
 
-// torph/src/components/Torph.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
+// torph/src/core/math.ts
+function nearlyEqual(a, b, epsilon = 0.5) {
+  return Math.abs(a - b) <= epsilon;
+}
+
+// torph/src/core/types.ts
 var MORPH = {
   durationMs: 280,
   maxFadeMs: 150,
@@ -2526,8 +2530,6 @@ var MORPH = {
   contentWidthLockEpsilon: 2,
   lineGroupingEpsilon: 1
 };
-var MORPH_SEGMENT_CACHE_LIMIT = 256;
-var DOM_MEASUREMENT_SNAPSHOT_CACHE_LIMIT = 8;
 var EMPTY_STATE = {
   stage: "idle",
   measurement: null,
@@ -2548,22 +2550,19 @@ var ZERO_BRIDGE = {
   offsetY: 0
 };
 var EMPTY_SEGMENTS = [];
-var morphSegmentCache = new Map;
-var pretextMorphTrustCache = new Map;
-var morphMeasurementEpoch = 1;
-var activeMorphMeasurementConsumers = 0;
-var detachMorphMeasurementInvalidationListeners = null;
-var SCREEN_READER_ONLY_STYLE = {
+function resolveContentWidthLockInlineSize(layoutHint) {
+  if (layoutHint.flowInlineSize !== null) {
+    return layoutHint.flowInlineSize;
+  }
+  return layoutHint.snapshot.width;
+}
+
+// torph/src/core/render.ts
+var OVERLAY_STYLE = {
   position: "absolute",
-  width: "1px",
-  height: "1px",
-  margin: "-1px",
-  padding: 0,
-  border: 0,
-  clip: "rect(0 0 0 0)",
-  clipPath: "inset(50%)",
-  overflow: "hidden",
-  whiteSpace: "nowrap"
+  inset: 0,
+  minWidth: 0,
+  pointerEvents: "none"
 };
 var MEASUREMENT_LAYER_STYLE = {
   pointerEvents: "none",
@@ -2574,111 +2573,177 @@ var MEASUREMENT_LAYER_STYLE = {
   right: 0,
   display: "block"
 };
-var FALLBACK_TEXT_STYLE = {
-  display: "block",
-  gridArea: "1 / 1"
-};
-var OVERLAY_STYLE = {
-  position: "absolute",
-  inset: 0,
-  minWidth: 0,
-  pointerEvents: "none"
-};
-var SHARED_GLYPH_TYPOGRAPHY_STYLE = {
-  font: "inherit",
-  fontKerning: "inherit",
-  fontFeatureSettings: "inherit",
-  fontOpticalSizing: "inherit",
-  fontStretch: "inherit",
-  fontStyle: "inherit",
-  fontVariant: "inherit",
-  fontVariantNumeric: "inherit",
-  fontVariationSettings: "inherit",
-  fontWeight: "inherit",
-  letterSpacing: "inherit",
-  textTransform: "inherit",
-  wordSpacing: "inherit",
-  direction: "inherit"
-};
-var MEASUREMENT_GLYPH_STYLE = {
-  ...SHARED_GLYPH_TYPOGRAPHY_STYLE,
-  display: "inline"
-};
-var ABSOLUTE_GLYPH_STYLE = {
-  ...SHARED_GLYPH_TYPOGRAPHY_STYLE,
-  position: "absolute",
-  display: "block",
-  overflow: "visible",
-  transformOrigin: "left top",
-  whiteSpace: "pre"
-};
-var graphemeSegmenter = null;
-var domMeasurementService = null;
-function parsePx(value) {
-  const parsed = Number.parseFloat(value);
-  if (Number.isFinite(parsed)) {
-    return parsed;
+function getFadeDuration(fraction) {
+  return Math.min(MORPH.durationMs * fraction, MORPH.maxFadeMs);
+}
+function getOverlayStyle(stage, plan) {
+  if (stage === "idle") {
+    return OVERLAY_STYLE;
   }
-  return null;
+  return {
+    ...OVERLAY_STYLE,
+    right: "auto",
+    bottom: "auto",
+    width: plan.frameWidth,
+    height: plan.frameHeight
+  };
 }
-function readFont(styles) {
-  if (styles.font.length > 0) {
-    return styles.font;
+function getLiveTransform(item, stage, visualBridge) {
+  if (stage !== "prepare") {
+    return "translate(0px, 0px)";
   }
-  return `${styles.fontStyle} ${styles.fontVariant} ${styles.fontWeight} ${styles.fontSize} / ${styles.lineHeight} ${styles.fontFamily}`;
+  if (item.kind === "move") {
+    return `translate(${(item.fromLeft ?? item.left) - item.left + visualBridge.offsetX}px, ${(item.fromTop ?? item.top) - item.top + visualBridge.offsetY}px)`;
+  }
+  return `translate(${visualBridge.offsetX}px, ${visualBridge.offsetY}px)`;
 }
-function readLineHeightPx(styles) {
-  const lineHeightPx = parsePx(styles.lineHeight);
-  if (lineHeightPx !== null) {
-    return lineHeightPx;
+function getLiveTransition(item, stage) {
+  if (stage !== "animate") {
+    return;
   }
-  const fontSizePx = parsePx(styles.fontSize);
-  return (fontSizePx ?? 0) * 1.2;
+  if (item.kind === "enter") {
+    return `opacity ${getFadeDuration(0.5)}ms linear ${getFadeDuration(0.25)}ms`;
+  }
+  return `transform ${MORPH.durationMs}ms ${MORPH.ease}, opacity ${getFadeDuration(0.25)}ms linear`;
 }
-function readSpacingPx(value) {
-  if (value === "normal") {
-    return 0;
+function getExitTransform(visualBridge) {
+  return `translate(${visualBridge.offsetX}px, ${visualBridge.offsetY}px)`;
+}
+function getExitTransition(stage) {
+  if (stage !== "animate") {
+    return;
   }
-  return parsePx(value) ?? 0;
+  return `transform ${MORPH.durationMs}ms ${MORPH.ease}, opacity ${getFadeDuration(0.25)}ms linear`;
 }
-function readWhiteSpace(value) {
-  if (value === "normal" || value === "nowrap" || value === "pre-wrap") {
-    return value;
+function supportsIntrinsicWidthLock(display, parentDisplay) {
+  let parentNeedsReservation = false;
+  if (parentDisplay === "flex" || parentDisplay === "inline-flex" || parentDisplay === "grid" || parentDisplay === "inline-grid") {
+    parentNeedsReservation = true;
   }
-  throw new Error(`Torph only supports white-space: normal | nowrap | pre-wrap. Received: ${value}`);
+  if (display === "inline" || display === "inline-block" || display === "inline-flex" || display === "inline-grid") {
+    return true;
+  }
+  return parentNeedsReservation;
 }
-function readContentWidth(node, styles) {
-  const rectWidth = node.getBoundingClientRect().width;
-  const paddingLeft = parsePx(styles.paddingLeft) ?? 0;
-  const paddingRight = parsePx(styles.paddingRight) ?? 0;
-  const borderLeft = parsePx(styles.borderLeftWidth) ?? 0;
-  const borderRight = parsePx(styles.borderRightWidth) ?? 0;
-  return Math.max(0, rectWidth - paddingLeft - paddingRight - borderLeft - borderRight);
+function getRootDisplay(layoutContext) {
+  if (layoutContext === null) {
+    return "grid";
+  }
+  if (supportsIntrinsicWidthLock(layoutContext.display, layoutContext.parentDisplay)) {
+    return "inline-grid";
+  }
+  return "grid";
 }
-function readLayoutContext(node, width) {
-  const styles = getComputedStyle(node);
-  const parentDisplay = (node.parentElement && getComputedStyle(node.parentElement).display) ?? "block";
+function getRootStyle(stage, plan, measurement, layoutContext) {
+  let width = measurement?.reservedInlineSize;
+  if (measurement !== null && measurement.flowInlineSize !== null) {
+    width = measurement.layoutInlineSize;
+  }
+  if (plan !== null) {
+    width = plan.layoutInlineSizeTo;
+  }
+  let height;
+  if (plan !== null) {
+    height = plan.frameHeight;
+  }
+  const style = {
+    position: "relative",
+    display: getRootDisplay(layoutContext)
+  };
+  if (width !== null && width !== undefined) {
+    style.width = width;
+  }
+  if (height !== undefined) {
+    style.height = height;
+  }
+  return style;
+}
+function getMeasurementLayerStyle(layoutContext, useContentInlineSize = false) {
+  let intrinsicWidthLock = false;
+  if (layoutContext !== null) {
+    if (useContentInlineSize) {
+      intrinsicWidthLock = true;
+    } else if (supportsIntrinsicWidthLock(layoutContext.display, layoutContext.parentDisplay)) {
+      intrinsicWidthLock = true;
+    }
+  }
+  if (!intrinsicWidthLock) {
+    return MEASUREMENT_LAYER_STYLE;
+  }
   return {
-    display: styles.display,
-    direction: styles.direction,
-    font: readFont(styles),
-    fontFeatureSettings: styles.fontFeatureSettings,
-    fontVariationSettings: styles.fontVariationSettings,
-    letterSpacingPx: readSpacingPx(styles.letterSpacing),
-    lineHeightPx: readLineHeightPx(styles),
-    parentDisplay,
-    textTransform: styles.textTransform,
-    whiteSpace: readWhiteSpace(styles.whiteSpace),
-    width: width ?? readContentWidth(node, styles),
-    wordSpacingPx: readSpacingPx(styles.wordSpacing),
-    measurementVersion: 0
+    ...MEASUREMENT_LAYER_STYLE,
+    right: "auto",
+    width: "max-content"
   };
 }
-function sameLayoutContext(a, b) {
-  if (a === null) {
-    return false;
+function resolveFlowText(committedMeasurement, stateMeasurement, text) {
+  return stateMeasurement?.snapshot.text ?? committedMeasurement?.snapshot.text ?? text;
+}
+function shouldRenderGlyphLayer(stage, plan, measurement) {
+  if (stage === "idle") {
+    return measurement !== null;
   }
-  return a.display === b.display && a.direction === b.direction && a.font === b.font && a.fontFeatureSettings === b.fontFeatureSettings && a.fontVariationSettings === b.fontVariationSettings && Math.abs(a.letterSpacingPx - b.letterSpacingPx) < MORPH.geometryEpsilon && Math.abs(a.lineHeightPx - b.lineHeightPx) < MORPH.geometryEpsilon && a.parentDisplay === b.parentDisplay && a.textTransform === b.textTransform && a.whiteSpace === b.whiteSpace && Math.abs(a.width - b.width) < MORPH.geometryEpsilon && Math.abs(a.wordSpacingPx - b.wordSpacingPx) < MORPH.geometryEpsilon;
+  return plan !== null;
+}
+function resolveGlyphSliceWhiteSpace(snapshot) {
+  if (snapshot === null) {
+    return "inherit";
+  }
+  return "nowrap";
+}
+function toSteadyLiveItem(grapheme) {
+  return {
+    ...grapheme,
+    kind: "move",
+    fromLeft: grapheme.left,
+    fromTop: grapheme.top
+  };
+}
+function createSteadyGlyphPlan(measurement) {
+  const snapshot = measurement.snapshot;
+  return {
+    frameWidth: snapshot.width,
+    frameHeight: snapshot.height,
+    layoutInlineSizeFrom: measurement.layoutInlineSize,
+    layoutInlineSizeTo: measurement.layoutInlineSize,
+    sourceRenderText: snapshot.renderText,
+    targetRenderText: snapshot.renderText,
+    sourceRootOrigin: measurement.rootOrigin,
+    visualBridge: ZERO_BRIDGE,
+    liveItems: snapshot.graphemes.map(toSteadyLiveItem),
+    exitItems: []
+  };
+}
+
+// torph/src/core/snapshot.ts
+function isSingleLineSnapshot(snapshot) {
+  if (snapshot.graphemes.length <= 1) {
+    return true;
+  }
+  const firstTop = snapshot.graphemes[0].top;
+  return snapshot.graphemes.every((grapheme) => nearlyEqual(grapheme.top, firstTop, MORPH.lineGroupingEpsilon));
+}
+function assertSingleLineSnapshot(snapshot) {
+  if (isSingleLineSnapshot(snapshot)) {
+    return snapshot;
+  }
+  throw new Error(`Torph only supports single-line text layout. Received wrapped text: "${snapshot.renderText}"`);
+}
+
+// torph/src/core/measurement-policy.ts
+var MORPH_SEGMENT_CACHE_LIMIT = 256;
+var morphSegmentCache = new Map;
+var pretextMorphTrustCache = new Map;
+var morphMeasurementEpoch = 1;
+var graphemeSegmenter = null;
+function getGraphemeSegmenter() {
+  if (graphemeSegmenter !== null) {
+    return graphemeSegmenter;
+  }
+  graphemeSegmenter = new Intl.Segmenter(undefined, {
+    granularity: "grapheme"
+  });
+  return graphemeSegmenter;
 }
 function clearPretextMorphTrustCache() {
   pretextMorphTrustCache.clear();
@@ -2694,33 +2759,620 @@ function bumpMorphMeasurementEpoch() {
 function getMorphMeasurementEpoch() {
   return morphMeasurementEpoch;
 }
-function isSingleLineSnapshot(snapshot) {
-  if (snapshot.graphemes.length <= 1) {
-    return true;
+function readCachedMorphSegments(text) {
+  const cached = morphSegmentCache.get(text);
+  if (cached !== undefined) {
+    morphSegmentCache.delete(text);
+    morphSegmentCache.set(text, cached);
+    return cached;
   }
-  const firstTop = snapshot.graphemes[0].top;
-  return snapshot.graphemes.every((grapheme) => nearlyEqual(grapheme.top, firstTop, MORPH.lineGroupingEpsilon));
-}
-function acquireMorphMeasurementInvalidationListeners() {
-  activeMorphMeasurementConsumers += 1;
-  if (detachMorphMeasurementInvalidationListeners === null) {
-    const handleFontChange = () => {
-      clearMorphMeasurementCaches();
-      bumpMorphMeasurementEpoch();
-    };
-    document.fonts.ready.then(handleFontChange);
-    if (typeof document.fonts.addEventListener === "function") {
-      document.fonts.addEventListener("loadingdone", handleFontChange);
+  const segments = Array.from(getGraphemeSegmenter().segment(text), (segment, index) => ({
+    glyph: segment.segment,
+    key: `${segment.segment}:${index}`
+  }));
+  morphSegmentCache.set(text, segments);
+  if (morphSegmentCache.size > MORPH_SEGMENT_CACHE_LIMIT) {
+    const oldest = morphSegmentCache.keys().next();
+    if (!oldest.done) {
+      morphSegmentCache.delete(oldest.value);
     }
-    detachMorphMeasurementInvalidationListeners = () => {
-      if (typeof document.fonts.removeEventListener === "function") {
-        document.fonts.removeEventListener("loadingdone", handleFontChange);
-      }
-    };
   }
+  return segments;
 }
-function releaseMorphMeasurementInvalidationListeners() {
-  activeMorphMeasurementConsumers = Math.max(0, activeMorphMeasurementConsumers - 1);
+function shouldMeasureUsingContentInlineSize(layoutContext, layoutHint) {
+  if (supportsIntrinsicWidthLock(layoutContext.display, layoutContext.parentDisplay)) {
+    return true;
+  }
+  if (layoutContext.whiteSpace === "nowrap") {
+    return true;
+  }
+  if (layoutHint === null) {
+    return false;
+  }
+  if (!isSingleLineSnapshot(layoutHint.snapshot)) {
+    return false;
+  }
+  return nearlyEqual(layoutHint.layoutInlineSize, resolveContentWidthLockInlineSize(layoutHint), MORPH.contentWidthLockEpsilon);
+}
+function getTrustedPretextMeasurementBackend(text, renderText, layoutContext, useContentInlineSize) {
+  const backend = getPretextMorphMeasurementBackend(text, layoutContext);
+  if (backend !== "probe") {
+    return backend;
+  }
+  const signature = getPretextMorphTrustSignature({
+    renderText,
+    layoutContext,
+    useContentInlineSize
+  });
+  if (signature === null) {
+    return "dom";
+  }
+  const trusted = pretextMorphTrustCache.get(signature);
+  if (trusted === undefined) {
+    return "probe";
+  }
+  if (trusted) {
+    return "pretext";
+  }
+  return "dom";
+}
+function getDomMeasurementRequestKey(text, renderText, layoutContext, useContentInlineSize) {
+  let inlineSizeMode = "container";
+  if (useContentInlineSize) {
+    inlineSizeMode = "content";
+  }
+  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 createMorphMeasurementRequest({
+  text,
+  layoutContext,
+  layoutHint
+}) {
+  if (layoutContext === null) {
+    return null;
+  }
+  const renderText = getPretextMorphRenderedText(text, layoutContext);
+  const useContentInlineSize = shouldMeasureUsingContentInlineSize(layoutContext, layoutHint);
+  const measurementBackend = getTrustedPretextMeasurementBackend(text, renderText, layoutContext, useContentInlineSize);
+  let segments = readCachedMorphSegments(renderText);
+  if (measurementBackend === "pretext") {
+    segments = EMPTY_SEGMENTS;
+  }
+  let domMeasurementKey = null;
+  if (needsMeasurementLayer(measurementBackend, renderText)) {
+    domMeasurementKey = getDomMeasurementRequestKey(text, renderText, layoutContext, useContentInlineSize);
+  }
+  return {
+    text,
+    renderText,
+    segments,
+    measurementBackend,
+    useContentInlineSize,
+    domMeasurementKey
+  };
+}
+function rememberPretextMeasurementTrust({
+  renderText,
+  layoutContext,
+  useContentInlineSize,
+  trusted
+}) {
+  const signature = getPretextMorphTrustSignature({
+    renderText,
+    layoutContext,
+    useContentInlineSize
+  });
+  if (signature === null) {
+    return;
+  }
+  pretextMorphTrustCache.set(signature, trusted);
+}
+function areSnapshotsEquivalentForPretextTrust(left, right) {
+  if (left.renderText !== right.renderText || left.graphemes.length !== right.graphemes.length) {
+    return false;
+  }
+  if (Math.abs(left.width - right.width) > MORPH.geometryEpsilon) {
+    return false;
+  }
+  if (Math.abs(left.height - right.height) > MORPH.geometryEpsilon) {
+    return false;
+  }
+  for (let index = 0;index < left.graphemes.length; index += 1) {
+    const from = left.graphemes[index];
+    const to = right.graphemes[index];
+    if (from.glyph !== to.glyph) {
+      return false;
+    }
+    if (Math.abs(from.left - to.left) > MORPH.geometryEpsilon) {
+      return false;
+    }
+    if (Math.abs(from.top - to.top) > MORPH.geometryEpsilon) {
+      return false;
+    }
+    if (Math.abs(from.width - to.width) > MORPH.geometryEpsilon) {
+      return false;
+    }
+    if (Math.abs(from.height - to.height) > MORPH.geometryEpsilon) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// torph/src/core/finalize-barrier.ts
+function createMorphFinalizeBarrier(hasMoveTransitions) {
+  return {
+    waitForLiveTransform: hasMoveTransitions,
+    sawLiveTransform: false
+  };
+}
+function recordMorphFinalizeSignal(barrier, signal) {
+  return {
+    ...barrier,
+    sawLiveTransform: signal === "live-transform"
+  };
+}
+function isMorphFinalizeBarrierSatisfied(barrier) {
+  if (barrier.waitForLiveTransform && !barrier.sawLiveTransform) {
+    return false;
+  }
+  return true;
+}
+function summarizeMorphFinalizeBarrier(barrier) {
+  return {
+    waitForLiveTransform: barrier.waitForLiveTransform,
+    sawLiveTransform: barrier.sawLiveTransform,
+    satisfied: isMorphFinalizeBarrierSatisfied(barrier)
+  };
+}
+
+// torph/src/core/session.ts
+function bucketByGlyph(graphemes) {
+  const buckets = new Map;
+  for (const grapheme of graphemes) {
+    const bucket = buckets.get(grapheme.glyph);
+    if (bucket !== undefined) {
+      bucket.push(grapheme);
+      continue;
+    }
+    buckets.set(grapheme.glyph, [grapheme]);
+  }
+  return buckets;
+}
+function pairMorphCharacters(previous, next) {
+  const previousBuckets = bucketByGlyph(previous);
+  const nextBuckets = bucketByGlyph(next);
+  const pairings = [];
+  for (const [glyph, previousItems] of previousBuckets) {
+    const nextItems = nextBuckets.get(glyph) ?? [];
+    const shared = Math.min(previousItems.length, nextItems.length);
+    for (let index = 0;index < shared; index += 1) {
+      pairings.push({
+        kind: "move",
+        from: previousItems[index],
+        to: nextItems[index]
+      });
+    }
+    for (let index = shared;index < previousItems.length; index += 1) {
+      pairings.push({
+        kind: "exit",
+        from: previousItems[index]
+      });
+    }
+  }
+  for (const [glyph, nextItems] of nextBuckets) {
+    const previousItems = previousBuckets.get(glyph) ?? [];
+    const shared = Math.min(previousItems.length, nextItems.length);
+    for (let index = shared;index < nextItems.length; index += 1) {
+      pairings.push({
+        kind: "enter",
+        to: nextItems[index]
+      });
+    }
+  }
+  return pairings;
+}
+function resolveMorphFrameBounds(previous, next) {
+  return {
+    width: Math.max(previous.width, next.width),
+    height: Math.max(previous.height, next.height)
+  };
+}
+function buildMorphPlan(previous, next, visualBridge = ZERO_BRIDGE) {
+  const pairings = pairMorphCharacters(previous.snapshot.graphemes, next.snapshot.graphemes);
+  const movesByDestinationKey = new Map;
+  const exitItems = [];
+  for (const pairing of pairings) {
+    if (pairing.kind === "move") {
+      movesByDestinationKey.set(pairing.to.key, pairing);
+      continue;
+    }
+    if (pairing.kind === "exit") {
+      exitItems.push(pairing.from);
+    }
+  }
+  const frame = resolveMorphFrameBounds(previous.snapshot, next.snapshot);
+  return {
+    frameWidth: frame.width,
+    frameHeight: frame.height,
+    layoutInlineSizeFrom: previous.layoutInlineSize,
+    layoutInlineSizeTo: next.layoutInlineSize,
+    sourceRenderText: previous.snapshot.renderText,
+    targetRenderText: next.snapshot.renderText,
+    sourceRootOrigin: previous.rootOrigin,
+    visualBridge,
+    liveItems: next.snapshot.graphemes.map((grapheme) => {
+      const move = movesByDestinationKey.get(grapheme.key);
+      if (move !== undefined) {
+        return {
+          ...grapheme,
+          kind: "move",
+          fromLeft: move.from.left,
+          fromTop: move.from.top
+        };
+      }
+      return {
+        ...grapheme,
+        kind: "enter",
+        fromLeft: null,
+        fromTop: null
+      };
+    }),
+    exitItems
+  };
+}
+function sameSnapshot(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (a.text !== b.text || a.renderText !== b.renderText || a.graphemes.length !== b.graphemes.length) {
+    return false;
+  }
+  if (!nearlyEqual(a.width, b.width, MORPH.geometryEpsilon)) {
+    return false;
+  }
+  if (!nearlyEqual(a.height, b.height, MORPH.geometryEpsilon)) {
+    return false;
+  }
+  for (let index = 0;index < a.graphemes.length; index += 1) {
+    const left = a.graphemes[index];
+    const right = b.graphemes[index];
+    if (left.glyph !== right.glyph || left.key !== right.key) {
+      return false;
+    }
+    if (!nearlyEqual(left.left, right.left, MORPH.geometryEpsilon)) {
+      return false;
+    }
+    if (!nearlyEqual(left.top, right.top, MORPH.geometryEpsilon)) {
+      return false;
+    }
+    if (!nearlyEqual(left.width, right.width, MORPH.geometryEpsilon)) {
+      return false;
+    }
+    if (!nearlyEqual(left.height, right.height, MORPH.geometryEpsilon)) {
+      return false;
+    }
+  }
+  return true;
+}
+function sameMeasurement(a, b) {
+  const sameReservedInlineSize = a.reservedInlineSize === null && b.reservedInlineSize === null || a.reservedInlineSize !== null && b.reservedInlineSize !== null && nearlyEqual(a.reservedInlineSize, b.reservedInlineSize, MORPH.geometryEpsilon);
+  const sameFlowInlineSize = a.flowInlineSize === null && b.flowInlineSize === null || a.flowInlineSize !== null && b.flowInlineSize !== null && nearlyEqual(a.flowInlineSize, b.flowInlineSize, MORPH.geometryEpsilon);
+  return sameSnapshot(a.snapshot, b.snapshot) && nearlyEqual(a.layoutInlineSize, b.layoutInlineSize, MORPH.geometryEpsilon) && sameReservedInlineSize && sameFlowInlineSize && nearlyEqual(a.rootOrigin.left, b.rootOrigin.left, MORPH.geometryEpsilon) && nearlyEqual(a.rootOrigin.top, b.rootOrigin.top, MORPH.geometryEpsilon);
+}
+function selectMorphLayoutHint(session) {
+  if (session.animating && session.target !== null) {
+    return session.target;
+  }
+  return session.committed;
+}
+function decideMorphSessionUpdate({
+  committed,
+  target,
+  animating,
+  nextMeasurement,
+  fontsReady
+}) {
+  let source = committed;
+  if (animating && target !== null) {
+    source = target;
+  }
+  if (source === null) {
+    return {
+      kind: "commit-static",
+      measurement: nextMeasurement
+    };
+  }
+  if (!fontsReady) {
+    return {
+      kind: "commit-static",
+      measurement: nextMeasurement
+    };
+  }
+  if (animating && target !== null) {
+    if (nextMeasurement.snapshot.renderText === target.snapshot.renderText) {
+      return {
+        kind: "freeze-animating-target",
+        target
+      };
+    }
+  }
+  if (committed !== null) {
+    if (committed.snapshot.renderText === nextMeasurement.snapshot.renderText) {
+      if (sameMeasurement(committed, nextMeasurement)) {
+        return {
+          kind: "commit-static",
+          measurement: committed
+        };
+      }
+      return {
+        kind: "commit-static",
+        measurement: nextMeasurement
+      };
+    }
+  }
+  return {
+    kind: "start-morph",
+    source,
+    target: nextMeasurement
+  };
+}
+function pinMeasurementToCurrentOrigin(measurement, origin) {
+  if (nearlyEqual(measurement.rootOrigin.left, origin.left, MORPH.geometryEpsilon) && nearlyEqual(measurement.rootOrigin.top, origin.top, MORPH.geometryEpsilon)) {
+    return measurement;
+  }
+  return {
+    snapshot: measurement.snapshot,
+    layoutInlineSize: measurement.layoutInlineSize,
+    reservedInlineSize: measurement.reservedInlineSize,
+    flowInlineSize: measurement.flowInlineSize,
+    rootOrigin: origin
+  };
+}
+function createStaticState(measurement) {
+  return {
+    stage: "idle",
+    measurement,
+    plan: null
+  };
+}
+function areFontsReady() {
+  return document.fonts.status === "loaded";
+}
+function cancelTimeline(timeline) {
+  if (timeline.prepareFrame !== null) {
+    cancelAnimationFrame(timeline.prepareFrame);
+    timeline.prepareFrame = null;
+  }
+  if (timeline.animateFrame !== null) {
+    cancelAnimationFrame(timeline.animateFrame);
+    timeline.animateFrame = null;
+  }
+  if (timeline.finalizeTimer !== null) {
+    window.clearTimeout(timeline.finalizeTimer);
+    timeline.finalizeTimer = null;
+  }
+}
+function resetMorph(session, timeline, setState) {
+  cancelTimeline(timeline);
+  session.committed = null;
+  session.target = null;
+  session.animating = false;
+  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((current) => {
+    if (current.stage === "idle" && current.plan === null && current.measurement !== null && sameMeasurement(current.measurement, measurement)) {
+      return current;
+    }
+    return createStaticState(measurement);
+  });
+}
+function applyMorphSessionDecision({
+  decision,
+  session,
+  timeline,
+  setState
+}) {
+  if (decision.kind === "freeze-animating-target") {
+    return decision.target;
+  }
+  cancelTimeline(timeline);
+  if (decision.kind === "commit-static") {
+    commitStaticMeasurement(session, decision.measurement, setState);
+    return decision.measurement;
+  }
+  startMorph({
+    source: decision.source,
+    target: decision.target,
+    session,
+    timeline,
+    setState
+  });
+  return decision.target;
+}
+function reconcileMorphSessionUpdate({
+  session,
+  timeline,
+  nextMeasurement,
+  fontsReady,
+  setState
+}) {
+  const decision = decideMorphSessionUpdate({
+    committed: session.committed,
+    target: session.target,
+    animating: session.animating,
+    nextMeasurement,
+    fontsReady
+  });
+  return applyMorphSessionDecision({
+    decision,
+    session,
+    timeline,
+    setState
+  });
+}
+function finalizeMorphTransition({
+  session,
+  timeline,
+  measurement,
+  setState
+}) {
+  cancelTimeline(timeline);
+  commitStaticMeasurement(session, session.target ?? measurement, setState);
+}
+function resolvePreparedMeasurementOrigin(measurement, origin) {
+  return pinMeasurementToCurrentOrigin(measurement, origin);
+}
+function resolvePreparedPlanVisualBridge(plan, origin) {
+  const offsetX = plan.sourceRootOrigin.left - origin.left;
+  const offsetY = plan.sourceRootOrigin.top - origin.top;
+  if (nearlyEqual(plan.visualBridge.offsetX, offsetX, MORPH.geometryEpsilon) && nearlyEqual(plan.visualBridge.offsetY, offsetY, MORPH.geometryEpsilon)) {
+    return plan;
+  }
+  return {
+    ...plan,
+    visualBridge: {
+      offsetX,
+      offsetY
+    }
+  };
+}
+function startMorph({
+  source,
+  target,
+  session,
+  timeline,
+  setState
+}) {
+  const plan = buildMorphPlan(source, target, ZERO_BRIDGE);
+  session.target = target;
+  session.animating = true;
+  setState({
+    stage: "prepare",
+    measurement: target,
+    plan
+  });
+}
+
+// torph/src/core/layout-observer.ts
+import { useLayoutEffect, useRef, useState } from "react";
+var activeMorphMeasurementConsumers = 0;
+var detachMorphMeasurementInvalidationListeners = null;
+var morphMeasurementInvalidationSubscribers = new Set;
+function parsePx(value) {
+  const parsed = Number.parseFloat(value);
+  if (Number.isFinite(parsed)) {
+    return parsed;
+  }
+  return null;
+}
+function readFont(styles) {
+  if (styles.font.length > 0) {
+    return styles.font;
+  }
+  return `${styles.fontStyle} ${styles.fontVariant} ${styles.fontWeight} ${styles.fontSize} / ${styles.lineHeight} ${styles.fontFamily}`;
+}
+function readLineHeightPx(styles) {
+  const lineHeightPx = parsePx(styles.lineHeight);
+  if (lineHeightPx !== null) {
+    return lineHeightPx;
+  }
+  const fontSizePx = parsePx(styles.fontSize);
+  return (fontSizePx ?? 0) * 1.2;
+}
+function readSpacingPx(value) {
+  if (value === "normal") {
+    return 0;
+  }
+  return parsePx(value) ?? 0;
+}
+function readWhiteSpace(value) {
+  if (value === "normal" || value === "nowrap" || value === "pre-wrap") {
+    return value;
+  }
+  throw new Error(`Torph only supports white-space: normal | nowrap | pre-wrap. Received: ${value}`);
+}
+function readContentWidth(node, styles) {
+  const rectWidth = node.getBoundingClientRect().width;
+  const paddingLeft = parsePx(styles.paddingLeft) ?? 0;
+  const paddingRight = parsePx(styles.paddingRight) ?? 0;
+  const borderLeft = parsePx(styles.borderLeftWidth) ?? 0;
+  const borderRight = parsePx(styles.borderRightWidth) ?? 0;
+  return Math.max(0, rectWidth - paddingLeft - paddingRight - borderLeft - borderRight);
+}
+function readLayoutContext(node, width) {
+  const styles = getComputedStyle(node);
+  const parentDisplay = (node.parentElement && getComputedStyle(node.parentElement).display) ?? "block";
+  return {
+    display: styles.display,
+    direction: styles.direction,
+    font: readFont(styles),
+    fontFeatureSettings: styles.fontFeatureSettings,
+    fontVariationSettings: styles.fontVariationSettings,
+    letterSpacingPx: readSpacingPx(styles.letterSpacing),
+    lineHeightPx: readLineHeightPx(styles),
+    parentDisplay,
+    textTransform: styles.textTransform,
+    whiteSpace: readWhiteSpace(styles.whiteSpace),
+    width: width ?? readContentWidth(node, styles),
+    wordSpacingPx: readSpacingPx(styles.wordSpacing),
+    measurementVersion: 0
+  };
+}
+function sameLayoutContext(a, b) {
+  if (a === null) {
+    return false;
+  }
+  return a.display === b.display && a.direction === b.direction && a.font === b.font && a.fontFeatureSettings === b.fontFeatureSettings && a.fontVariationSettings === b.fontVariationSettings && Math.abs(a.letterSpacingPx - b.letterSpacingPx) < MORPH.geometryEpsilon && Math.abs(a.lineHeightPx - b.lineHeightPx) < MORPH.geometryEpsilon && a.parentDisplay === b.parentDisplay && a.textTransform === b.textTransform && a.whiteSpace === b.whiteSpace && Math.abs(a.width - b.width) < MORPH.geometryEpsilon && Math.abs(a.wordSpacingPx - b.wordSpacingPx) < MORPH.geometryEpsilon;
+}
+function notifyMorphMeasurementInvalidationSubscribers() {
+  for (const subscriber of morphMeasurementInvalidationSubscribers) {
+    subscriber();
+  }
+}
+function subscribeMorphMeasurementInvalidation(subscriber) {
+  morphMeasurementInvalidationSubscribers.add(subscriber);
+  return () => {
+    morphMeasurementInvalidationSubscribers.delete(subscriber);
+  };
+}
+function acquireMorphMeasurementInvalidationListeners() {
+  activeMorphMeasurementConsumers += 1;
+  if (detachMorphMeasurementInvalidationListeners === null) {
+    const handleFontChange = () => {
+      clearMorphMeasurementCaches();
+      bumpMorphMeasurementEpoch();
+      notifyMorphMeasurementInvalidationSubscribers();
+    };
+    document.fonts.ready.then(handleFontChange);
+    if (typeof document.fonts.addEventListener === "function") {
+      document.fonts.addEventListener("loadingdone", handleFontChange);
+    }
+    detachMorphMeasurementInvalidationListeners = () => {
+      if (typeof document.fonts.removeEventListener === "function") {
+        document.fonts.removeEventListener("loadingdone", handleFontChange);
+      }
+    };
+  }
+}
+function releaseMorphMeasurementInvalidationListeners() {
+  activeMorphMeasurementConsumers = Math.max(0, activeMorphMeasurementConsumers - 1);
   if (activeMorphMeasurementConsumers === 0 && detachMorphMeasurementInvalidationListeners !== null) {
     detachMorphMeasurementInvalidationListeners();
     detachMorphMeasurementInvalidationListeners = null;
@@ -2729,6 +3381,7 @@ function releaseMorphMeasurementInvalidationListeners() {
 function useObservedLayoutContext(deps) {
   const ref = useRef(null);
   const [layoutContext, setLayoutContext] = useState(null);
+  const syncLayoutContextRef = useRef(null);
   useLayoutEffect(() => {
     const node = ref.current;
     if (node === null) {
@@ -2757,9 +3410,15 @@ function useObservedLayoutContext(deps) {
       const next = readLayoutContext(node, width);
       commitLayoutContext(next, refreshMeasurements);
     };
+    syncLayoutContextRef.current = syncLayoutContext;
     const initialLayoutContext = readLayoutContext(node);
     const shouldObserveWrappingWidth = initialLayoutContext.whiteSpace !== "nowrap" && !supportsIntrinsicWidthLock(initialLayoutContext.display, initialLayoutContext.parentDisplay);
     commitLayoutContext(initialLayoutContext, true);
+    const unsubscribeInvalidation = subscribeMorphMeasurementInvalidation(() => {
+      syncLayoutContext({
+        refreshMeasurements: true
+      });
+    });
     let resizeObserver = null;
     if (shouldObserveWrappingWidth) {
       resizeObserver = new ResizeObserver(([entry]) => {
@@ -2772,43 +3431,27 @@ function useObservedLayoutContext(deps) {
     acquireMorphMeasurementInvalidationListeners();
     return () => {
       disposed = true;
+      syncLayoutContextRef.current = null;
+      unsubscribeInvalidation();
       resizeObserver?.disconnect();
       releaseMorphMeasurementInvalidationListeners();
     };
   }, deps);
   return { ref, layoutContext };
 }
-function getSegmenter() {
-  if (graphemeSegmenter !== null) {
-    return graphemeSegmenter;
+
+// torph/src/core/dom-measurement.ts
+var domMeasurementService = null;
+function readFirstTextNode(node) {
+  if (node === null) {
+    return null;
   }
-  const segmenterConstructor = Intl.Segmenter;
-  if (segmenterConstructor === undefined) {
-    throw new Error("Torph requires Intl.Segmenter for grapheme-safe pairing.");
+  for (const childNode of node.childNodes) {
+    if (childNode.nodeType === Node.TEXT_NODE) {
+      return childNode;
+    }
   }
-  graphemeSegmenter = new segmenterConstructor(undefined, {
-    granularity: "grapheme"
-  });
-  return graphemeSegmenter;
-}
-function createMeasurementGlyphNode() {
-  const node = document.createElement("span");
-  node.style.font = "inherit";
-  node.style.fontKerning = "inherit";
-  node.style.fontFeatureSettings = "inherit";
-  node.style.fontOpticalSizing = "inherit";
-  node.style.fontStretch = "inherit";
-  node.style.fontStyle = "inherit";
-  node.style.fontVariant = "inherit";
-  node.style.fontVariantNumeric = "inherit";
-  node.style.fontVariationSettings = "inherit";
-  node.style.fontWeight = "inherit";
-  node.style.letterSpacing = "inherit";
-  node.style.textTransform = "inherit";
-  node.style.wordSpacing = "inherit";
-  node.style.direction = "inherit";
-  node.style.display = "inline";
-  return node;
+  return null;
 }
 function getDomMeasurementService() {
   if (domMeasurementService !== null) {
@@ -2831,25 +3474,10 @@ function getDomMeasurementService() {
   document.body.appendChild(root);
   domMeasurementService = {
     root,
-    host,
-    glyphNodes: []
+    host
   };
   return domMeasurementService;
 }
-function syncMeasurementGlyphNodes(service, segments) {
-  while (service.glyphNodes.length < segments.length) {
-    const node = createMeasurementGlyphNode();
-    service.host.appendChild(node);
-    service.glyphNodes.push(node);
-  }
-  while (service.glyphNodes.length > segments.length) {
-    const node = service.glyphNodes.pop();
-    node?.remove();
-  }
-  for (let index = 0;index < segments.length; index += 1) {
-    service.glyphNodes[index].textContent = segments[index].glyph;
-  }
-}
 function applyMeasurementHostStyle({
   host,
   root,
@@ -2895,51 +3523,6 @@ function applyMeasurementHostStyle({
     host.style.width = "max-content";
   }
 }
-function segmentTorphText(text) {
-  const segments = [];
-  let ordinal = 0;
-  for (const segment of getSegmenter().segment(text)) {
-    segments.push({
-      glyph: segment.segment,
-      key: `${segment.segment}:${ordinal}`
-    });
-    ordinal += 1;
-  }
-  return segments;
-}
-function readCachedMorphSegments(text) {
-  const cached = morphSegmentCache.get(text);
-  if (cached !== undefined) {
-    morphSegmentCache.delete(text);
-    morphSegmentCache.set(text, cached);
-    return cached;
-  }
-  const segments = segmentTorphText(text);
-  morphSegmentCache.set(text, segments);
-  if (morphSegmentCache.size > MORPH_SEGMENT_CACHE_LIMIT) {
-    const oldest = morphSegmentCache.keys().next();
-    if (!oldest.done) {
-      morphSegmentCache.delete(oldest.value);
-    }
-  }
-  return segments;
-}
-function getDomMeasurementRequestKey(text, renderText, layoutContext, useContentInlineSize) {
-  let inlineSizeMode = "container";
-  if (useContentInlineSize) {
-    inlineSizeMode = "content";
-  }
-  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) {
@@ -2952,58 +3535,45 @@ function readCachedMorphSnapshot(cache, cacheKey) {
 function rememberCachedMorphSnapshot(cache, cacheKey, snapshot) {
   cache.delete(cacheKey);
   cache.set(cacheKey, snapshot);
-  if (cache.size > DOM_MEASUREMENT_SNAPSHOT_CACHE_LIMIT) {
+  if (cache.size > 8) {
     const oldest = cache.keys().next();
     if (!oldest.done) {
       cache.delete(oldest.value);
     }
   }
 }
-function assertMeasurementLayer(layer, segments) {
+function assertMeasurementLayer(layer) {
   if (layer === null) {
     throw new Error("Torph measurement layer is missing.");
   }
-  if (layer.children.length !== segments.length) {
-    throw new Error(`Torph measurement layer is out of sync. Expected ${segments.length} glyph nodes, received ${layer.children.length}.`);
-  }
   return layer;
 }
 function readMeasuredGlyphLayouts(layer, layerRect, segments) {
   const measuredGlyphs = [];
-  const layerOffsetTop = layer.offsetTop;
+  const textNode = readFirstTextNode(layer);
+  if (textNode === null) {
+    throw new Error("Torph measurement layer text node is missing.");
+  }
+  const range = document.createRange();
+  let offset = 0;
   for (let index = 0;index < segments.length; index += 1) {
     const segment = segments[index];
-    const child = layer.children[index];
-    if (!(child instanceof HTMLElement)) {
-      throw new Error(`Torph glyph node ${index} is not an HTMLElement.`);
-    }
-    const rect = child.getBoundingClientRect();
+    const nextOffset = offset + segment.glyph.length;
+    range.setStart(textNode, offset);
+    range.setEnd(textNode, nextOffset);
+    const rect = range.getBoundingClientRect();
     measuredGlyphs.push({
       glyph: segment.glyph,
       key: segment.key,
       left: rect.left - layerRect.left,
-      top: child.offsetTop - layerOffsetTop,
-      width: rect.width
+      top: rect.top - layerRect.top,
+      width: rect.width,
+      height: rect.height
     });
+    offset = nextOffset;
   }
   return measuredGlyphs;
 }
-function assignMeasuredGlyphLineIndices(measuredGlyphs) {
-  const lineIndices = [];
-  let lineCount = 0;
-  let currentLineTop = null;
-  for (const glyph of measuredGlyphs) {
-    if (currentLineTop === null || Math.abs(glyph.top - currentLineTop) > MORPH.lineGroupingEpsilon) {
-      currentLineTop = glyph.top;
-      lineCount += 1;
-    }
-    lineIndices.push(lineCount - 1);
-  }
-  return {
-    lineCount,
-    lineIndices
-  };
-}
 function measureMorphSnapshotFromLayer(text, renderText, segments, layer) {
   if (renderText.length === 0) {
     return {
@@ -3014,28 +3584,19 @@ function measureMorphSnapshotFromLayer(text, renderText, segments, layer) {
       graphemes: []
     };
   }
-  const measurementLayer = assertMeasurementLayer(layer, segments);
+  const measurementLayer = assertMeasurementLayer(layer);
   const layerRect = measurementLayer.getBoundingClientRect();
   const measuredGlyphs = readMeasuredGlyphLayouts(measurementLayer, layerRect, segments);
-  const { lineCount, lineIndices } = assignMeasuredGlyphLineIndices(measuredGlyphs);
-  let lineHeight = 0;
-  if (lineCount !== 0) {
-    lineHeight = layerRect.height / lineCount;
-  }
   let width = 0;
-  const graphemes = measuredGlyphs.map((glyph, index) => {
-    const lineIndex = lineIndices[index];
-    if (lineIndex === undefined) {
-      throw new Error("Torph failed to assign a line index.");
-    }
+  const graphemes = measuredGlyphs.map((glyph) => {
     width = Math.max(width, glyph.left + glyph.width);
     return {
       glyph: glyph.glyph,
       key: glyph.key,
       left: glyph.left,
-      top: lineIndex * lineHeight,
+      top: glyph.top,
       width: glyph.width,
-      height: lineHeight
+      height: glyph.height
     };
   });
   return {
@@ -3070,121 +3631,143 @@ function measureMorphSnapshotWithDomService({
     layoutContext,
     useContentInlineSize
   });
-  syncMeasurementGlyphNodes(service, segments);
+  service.host.textContent = renderText;
   return measureMorphSnapshotFromLayer(text, renderText, segments, service.host);
 }
 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") {
-    return backend;
-  }
-  const signature = getPretextMorphTrustSignature({
-    renderText,
-    layoutContext,
-    useContentInlineSize
-  });
-  if (signature === null) {
-    return "dom";
-  }
-  const trusted = pretextMorphTrustCache.get(signature);
-  if (trusted === undefined) {
-    return "probe";
-  }
-  if (trusted) {
-    return "pretext";
-  }
-  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;
-  }
-  if (layoutContext.whiteSpace === "nowrap") {
-    return true;
-  }
-  if (layoutHint === null || !isSingleLineSnapshot(layoutHint.snapshot)) {
-    return false;
-  }
-  return nearlyEqual(layoutHint.layoutInlineSize, resolveContentWidthLockInlineSize(layoutHint), MORPH.contentWidthLockEpsilon);
-}
-function createMorphMeasurementRequest({
-  text,
-  layoutContext,
-  layoutHint
-}) {
-  if (layoutContext === null) {
+function measureLiveFlowSnapshot(root, flowTextNode) {
+  const textNode = readFirstTextNode(flowTextNode);
+  if (textNode === null) {
     return null;
   }
-  const renderText = getPretextMorphRenderedText(text, layoutContext);
-  const useContentInlineSize = shouldMeasureUsingContentInlineSize(layoutContext, layoutHint);
-  const measurementBackend = getTrustedPretextMeasurementBackend(text, renderText, layoutContext, useContentInlineSize);
-  let segments = readCachedMorphSegments(renderText);
-  if (measurementBackend === "pretext") {
-    segments = EMPTY_SEGMENTS;
+  const text = textNode.data;
+  const renderText = text;
+  if (renderText.length === 0) {
+    return {
+      text,
+      renderText,
+      width: 0,
+      height: 0,
+      graphemes: []
+    };
   }
-  let domMeasurementKey = null;
-  if (needsMeasurementLayer(measurementBackend, renderText)) {
-    domMeasurementKey = getDomMeasurementRequestKey(text, renderText, layoutContext, useContentInlineSize);
+  const rootRect = root.getBoundingClientRect();
+  const range = document.createRange();
+  const graphemes = [];
+  let width = 0;
+  let height = 0;
+  let offset = 0;
+  const segments = readCachedMorphSegments(renderText);
+  for (const segment of segments) {
+    const nextOffset = offset + segment.glyph.length;
+    range.setStart(textNode, offset);
+    range.setEnd(textNode, nextOffset);
+    const rect = range.getBoundingClientRect();
+    graphemes.push({
+      glyph: segment.glyph,
+      key: segment.key,
+      left: rect.left - rootRect.left,
+      top: rect.top - rootRect.top,
+      width: rect.width,
+      height: rect.height
+    });
+    width = Math.max(width, rect.right - rootRect.left);
+    height = Math.max(height, rect.bottom - rootRect.top);
+    offset = nextOffset;
   }
   return {
     text,
     renderText,
-    segments,
-    measurementBackend,
-    useContentInlineSize,
-    domMeasurementKey
+    width,
+    height,
+    graphemes
   };
 }
-function rememberPretextMeasurementTrust({
-  renderText,
-  layoutContext,
-  useContentInlineSize,
-  trusted
-}) {
-  const signature = getPretextMorphTrustSignature({
-    renderText,
-    layoutContext,
-    useContentInlineSize
-  });
-  if (signature === null) {
-    return;
+function measureSnapshotDrift(expected, actual) {
+  const comparedGlyphs = Math.min(expected.graphemes.length, actual.graphemes.length);
+  const mismatches = [];
+  let maxAbsLeftDelta = 0;
+  let maxAbsTopDelta = 0;
+  let maxAbsWidthDelta = 0;
+  let maxAbsHeightDelta = 0;
+  for (let index = 0;index < comparedGlyphs; index += 1) {
+    const expectedGlyph = expected.graphemes[index];
+    const actualGlyph = actual.graphemes[index];
+    const leftDelta = actualGlyph.left - expectedGlyph.left;
+    const topDelta = actualGlyph.top - expectedGlyph.top;
+    const widthDelta = actualGlyph.width - expectedGlyph.width;
+    const heightDelta = actualGlyph.height - expectedGlyph.height;
+    maxAbsLeftDelta = Math.max(maxAbsLeftDelta, Math.abs(leftDelta));
+    maxAbsTopDelta = Math.max(maxAbsTopDelta, Math.abs(topDelta));
+    maxAbsWidthDelta = Math.max(maxAbsWidthDelta, Math.abs(widthDelta));
+    maxAbsHeightDelta = Math.max(maxAbsHeightDelta, Math.abs(heightDelta));
+    if (mismatches.length < 8 && (Math.abs(leftDelta) > MORPH.geometryEpsilon || Math.abs(topDelta) > MORPH.geometryEpsilon || Math.abs(widthDelta) > MORPH.geometryEpsilon || Math.abs(heightDelta) > MORPH.geometryEpsilon)) {
+      mismatches.push({
+        index,
+        glyph: expectedGlyph.glyph,
+        leftDelta,
+        topDelta,
+        widthDelta,
+        heightDelta
+      });
+    }
   }
-  pretextMorphTrustCache.set(signature, trusted);
+  return {
+    comparedGlyphs,
+    expectedGlyphs: expected.graphemes.length,
+    actualGlyphs: actual.graphemes.length,
+    maxAbsLeftDelta,
+    maxAbsTopDelta,
+    maxAbsWidthDelta,
+    maxAbsHeightDelta,
+    snapshotWidthDelta: actual.width - expected.width,
+    snapshotHeightDelta: actual.height - expected.height,
+    mismatches
+  };
 }
-function areSnapshotsEquivalentForPretextTrust(left, right) {
-  if (left.renderText !== right.renderText || left.graphemes.length !== right.graphemes.length) {
-    return false;
-  }
-  if (Math.abs(left.width - right.width) > MORPH.geometryEpsilon || Math.abs(left.height - right.height) > MORPH.geometryEpsilon) {
-    return false;
+function measureOverlayBoxSnapshot(root, overlayRoot, role) {
+  const nodes = overlayRoot.querySelectorAll(`[data-morph-role='${role}']`);
+  if (nodes.length === 0) {
+    return null;
   }
-  for (let index = 0;index < left.graphemes.length; index += 1) {
-    const from = left.graphemes[index];
-    const to = right.graphemes[index];
-    if (from.glyph !== to.glyph) {
-      return false;
-    }
-    if (Math.abs(from.left - to.left) > MORPH.geometryEpsilon || Math.abs(from.top - to.top) > MORPH.geometryEpsilon || Math.abs(from.width - to.width) > MORPH.geometryEpsilon || Math.abs(from.height - to.height) > MORPH.geometryEpsilon) {
-      return false;
+  const rootRect = root.getBoundingClientRect();
+  const graphemes = [];
+  let width = 0;
+  let height = 0;
+  let renderText = "";
+  for (const node of nodes) {
+    const key = node.dataset.morphKey;
+    const glyph = node.dataset.morphGlyph;
+    if (key === undefined || glyph === undefined) {
+      return null;
     }
+    const rect = node.getBoundingClientRect();
+    const left = rect.left - rootRect.left;
+    const top = rect.top - rootRect.top;
+    const boxWidth = rect.width;
+    const boxHeight = rect.height;
+    graphemes.push({
+      glyph,
+      key,
+      left,
+      top,
+      width: boxWidth,
+      height: boxHeight
+    });
+    renderText += glyph;
+    width = Math.max(width, left + boxWidth);
+    height = Math.max(height, top + boxHeight);
   }
-  return true;
+  return {
+    text: renderText,
+    renderText,
+    width,
+    height,
+    graphemes
+  };
 }
 function measureFromNodes({
   root,
@@ -3205,7 +3788,7 @@ function measureFromNodes({
       width: Number.MAX_SAFE_INTEGER / 4
     };
   }
-  const snapshot = snapshotOverride ?? (() => {
+  const snapshot = assertSingleLineSnapshot(snapshotOverride ?? (() => {
     let pretextSnapshot = null;
     if (measurementBackend !== "dom") {
       pretextSnapshot = measureMorphSnapshotWithPretext(text, measurementLayoutContext);
@@ -3243,7 +3826,7 @@ function measureFromNodes({
       throw new Error("Torph failed to resolve a measurement snapshot.");
     }
     return resolvedSnapshot;
-  })();
+  })());
   let layoutInlineSize = layoutContext.width;
   if (useContentInlineSize) {
     layoutInlineSize = snapshot.width;
@@ -3252,276 +3835,366 @@ function measureFromNodes({
   if (supportsIntrinsicWidthLock(layoutContext.display, layoutContext.parentDisplay)) {
     reservedInlineSize = snapshot.width;
   }
+  let flowInlineSize = null;
+  if (useContentInlineSize) {
+    flowInlineSize = snapshot.width;
+  }
   return {
     snapshot,
     layoutInlineSize,
     reservedInlineSize,
-    flowInlineSize: null,
+    flowInlineSize,
     rootOrigin: readRootOrigin(root)
   };
 }
-function pinMeasurementToCurrentOrigin(measurement, origin) {
-  if (nearlyEqual(measurement.rootOrigin.left, origin.left) && nearlyEqual(measurement.rootOrigin.top, origin.top)) {
-    return measurement;
-  }
-  return {
-    snapshot: measurement.snapshot,
-    layoutInlineSize: measurement.layoutInlineSize,
-    reservedInlineSize: measurement.reservedInlineSize,
-    flowInlineSize: measurement.flowInlineSize,
-    rootOrigin: origin
-  };
+
+// torph/src/debug/trace.ts
+var TORPH_TRACE_MAX_BYTES = 4 * 1024 * 1024;
+var TORPH_TRACE_MAX_LINES = 4000;
+var TORPH_TRACE_SCHEMA_VERSION = 7;
+var DEFAULT_TORPH_DEBUG_CONFIG = {
+  capture: false,
+  console: false
+};
+var torphDebugInstanceOrdinal = 0;
+function nextTorphDebugInstanceId() {
+  torphDebugInstanceOrdinal += 1;
+  return torphDebugInstanceOrdinal;
 }
-function bucketByGlyph(graphemes) {
-  const buckets = new Map;
-  for (const grapheme of graphemes) {
-    const bucket = buckets.get(grapheme.glyph);
-    if (bucket) {
-      bucket.push(grapheme);
-    } else {
-      buckets.set(grapheme.glyph, [grapheme]);
-    }
-  }
-  return buckets;
+function readTorphDebugConfig() {
+  const scope = globalThis;
+  return scope.__TORPH_DEBUG__ ?? DEFAULT_TORPH_DEBUG_CONFIG;
 }
-function pairMorphCharacters(previous, next) {
-  const previousBuckets = bucketByGlyph(previous);
-  const nextBuckets = bucketByGlyph(next);
-  const pairings = [];
-  for (const [glyph, previousItems] of previousBuckets) {
-    const nextItems = nextBuckets.get(glyph) ?? [];
-    const shared = Math.min(previousItems.length, nextItems.length);
-    for (let index = 0;index < shared; index += 1) {
-      pairings.push({
-        kind: "move",
-        from: previousItems[index],
-        to: nextItems[index]
-      });
-    }
-    for (let index = shared;index < previousItems.length; index += 1) {
-      pairings.push({
-        kind: "exit",
-        from: previousItems[index]
-      });
-    }
+function shouldCaptureTorphTrace(config) {
+  if (config === null) {
+    return false;
   }
-  for (const [glyph, nextItems] of nextBuckets) {
-    const previousItems = previousBuckets.get(glyph) ?? [];
-    const shared = Math.min(previousItems.length, nextItems.length);
-    for (let index = shared;index < nextItems.length; index += 1) {
-      pairings.push({
-        kind: "enter",
-        to: nextItems[index]
-      });
-    }
+  if (typeof config === "boolean") {
+    return config;
   }
-  return pairings;
+  if (config.capture === true) {
+    return true;
+  }
+  return false;
 }
-function resolveMorphFrameBounds(previous, next) {
-  return {
-    width: Math.max(previous.width, next.width),
-    height: Math.max(previous.height, next.height)
-  };
+function isTorphDebugEnabled(config) {
+  if (config === null) {
+    return false;
+  }
+  if (typeof config === "boolean") {
+    return config;
+  }
+  if (config.console !== undefined) {
+    return config.console;
+  }
+  if (config.enabled === true) {
+    return true;
+  }
+  return false;
 }
-function buildMorphVisualBridge(previous, next) {
-  return {
-    offsetX: previous.rootOrigin.left - next.rootOrigin.left,
-    offsetY: previous.rootOrigin.top - next.rootOrigin.top
-  };
+function shouldRunTorphInstrumentation(config) {
+  if (shouldCaptureTorphTrace(config)) {
+    return true;
+  }
+  return isTorphDebugEnabled(config);
 }
-function buildMorphPlan(previous, next, visualBridge = ZERO_BRIDGE) {
-  const pairings = pairMorphCharacters(previous.snapshot.graphemes, next.snapshot.graphemes);
-  const movesByDestinationKey = new Map;
-  const exitItems = [];
-  for (const pairing of pairings) {
-    if (pairing.kind === "move") {
-      movesByDestinationKey.set(pairing.to.key, pairing);
-      continue;
-    }
-    if (pairing.kind === "exit") {
-      exitItems.push(pairing.from);
-    }
+function getTorphTraceStore() {
+  const scope = globalThis;
+  let store = scope.__TORPH_TRACE_STORE__;
+  if (store !== undefined) {
+    return store;
   }
-  const frame = resolveMorphFrameBounds(previous.snapshot, next.snapshot);
-  return {
-    frameWidth: frame.width,
-    frameHeight: frame.height,
-    layoutInlineSizeFrom: previous.layoutInlineSize,
-    layoutInlineSizeTo: next.layoutInlineSize,
-    visualBridge,
-    liveItems: next.snapshot.graphemes.map((grapheme) => {
-      const move = movesByDestinationKey.get(grapheme.key);
-      if (move) {
-        return {
-          ...grapheme,
-          kind: "move",
-          fromLeft: move.from.left,
-          fromTop: move.from.top
-        };
-      }
-      return {
-        ...grapheme,
-        kind: "enter",
-        fromLeft: null,
-        fromTop: null
-      };
-    }),
-    exitItems
+  store = {
+    lines: [],
+    nextSeq: 1,
+    totalBytes: 0
   };
+  scope.__TORPH_TRACE_STORE__ = store;
+  return store;
 }
-function nearlyEqual(a, b, epsilon = MORPH.geometryEpsilon) {
-  return Math.abs(a - b) <= epsilon;
+function getTorphTraceText() {
+  return getTorphTraceStore().lines.join("");
 }
-function sameSnapshot(a, b) {
-  if (a === b) {
-    return true;
-  }
-  if (a.text !== b.text || a.renderText !== b.renderText || a.graphemes.length !== b.graphemes.length) {
-    return false;
-  }
-  if (!nearlyEqual(a.width, b.width) || !nearlyEqual(a.height, b.height)) {
-    return false;
+function clearTorphTrace() {
+  const store = getTorphTraceStore();
+  store.lines = [];
+  store.nextSeq = 1;
+  store.totalBytes = 0;
+}
+function downloadTorphTrace(filename) {
+  if (typeof document === "undefined") {
+    return null;
   }
-  for (let index = 0;index < a.graphemes.length; index += 1) {
-    const left = a.graphemes[index];
-    const right = b.graphemes[index];
-    if (left.glyph !== right.glyph || left.key !== right.key) {
-      return false;
-    }
-    if (!nearlyEqual(left.left, right.left) || !nearlyEqual(left.top, right.top) || !nearlyEqual(left.width, right.width) || !nearlyEqual(left.height, right.height)) {
-      return false;
+  const text = getTorphTraceText();
+  const blob = new Blob([text], { type: "application/x-ndjson;charset=utf-8" });
+  const href = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  let resolvedFilename = filename;
+  if (resolvedFilename === undefined) {
+    resolvedFilename = `torph-trace-${new Date().toISOString().replaceAll(":", "-")}.jsonl`;
+  }
+  anchor.href = href;
+  anchor.download = resolvedFilename;
+  anchor.click();
+  window.setTimeout(() => {
+    URL.revokeObjectURL(href);
+  }, 0);
+  return resolvedFilename;
+}
+function ensureTorphTraceApi() {
+  const scope = globalThis;
+  if (scope.__TORPH_TRACE__ !== undefined) {
+    return scope.__TORPH_TRACE__;
+  }
+  const api = {
+    clear: clearTorphTrace,
+    count: () => getTorphTraceStore().lines.length,
+    download: downloadTorphTrace,
+    text: getTorphTraceText
+  };
+  scope.__TORPH_TRACE__ = api;
+  return api;
+}
+function appendTorphTrace(instanceId, event, payload) {
+  ensureTorphTraceApi();
+  const store = getTorphTraceStore();
+  const entry = {
+    instanceId,
+    event,
+    payload,
+    seq: store.nextSeq,
+    time: new Date().toISOString()
+  };
+  store.nextSeq += 1;
+  const line = `${JSON.stringify(entry)}
+`;
+  store.lines.push(line);
+  store.totalBytes += line.length;
+  while (store.lines.length > TORPH_TRACE_MAX_LINES || store.totalBytes > TORPH_TRACE_MAX_BYTES) {
+    const removed = store.lines.shift();
+    if (removed === undefined) {
+      break;
     }
+    store.totalBytes = Math.max(0, store.totalBytes - removed.length);
   }
-  return true;
-}
-function sameMeasurement(a, b) {
-  if (a === b) {
-    return true;
+}
+function roundDebugValue(value) {
+  if (value === null || value === undefined) {
+    return value;
   }
-  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);
+  return Math.round(value * 1e4) / 1e4;
 }
-function refreshAnimatingTarget(activeTarget, measurement) {
-  if (sameMeasurement(activeTarget, measurement)) {
-    return activeTarget;
+function summarizeDebugSnapshot(snapshot) {
+  if (snapshot === null) {
+    return null;
   }
   return {
-    snapshot: activeTarget.snapshot,
-    layoutInlineSize: measurement.layoutInlineSize,
-    reservedInlineSize: measurement.reservedInlineSize,
-    flowInlineSize: activeTarget.flowInlineSize,
-    rootOrigin: measurement.rootOrigin
+    text: snapshot.text,
+    renderText: snapshot.renderText,
+    width: roundDebugValue(snapshot.width),
+    height: roundDebugValue(snapshot.height),
+    graphemes: snapshot.graphemes.length
   };
 }
-function reuseCommittedMeasurement(committed, measurement) {
-  if (sameMeasurement(committed, measurement)) {
-    return committed;
+function summarizeDebugGlyphs(snapshot) {
+  if (snapshot === null) {
+    return null;
+  }
+  return snapshot.graphemes.map((grapheme, index) => ({
+    index,
+    glyph: grapheme.glyph,
+    key: grapheme.key,
+    left: roundDebugValue(grapheme.left),
+    top: roundDebugValue(grapheme.top),
+    width: roundDebugValue(grapheme.width),
+    height: roundDebugValue(grapheme.height)
+  }));
+}
+function summarizeDebugMeasurement(measurement) {
+  if (measurement === null) {
+    return null;
   }
-  return measurement;
+  return {
+    layoutInlineSize: roundDebugValue(measurement.layoutInlineSize),
+    reservedInlineSize: roundDebugValue(measurement.reservedInlineSize),
+    flowInlineSize: roundDebugValue(measurement.flowInlineSize),
+    rootOrigin: {
+      left: roundDebugValue(measurement.rootOrigin.left),
+      top: roundDebugValue(measurement.rootOrigin.top)
+    },
+    snapshot: summarizeDebugSnapshot(measurement.snapshot)
+  };
 }
-function createStaticState(measurement) {
+function summarizeDebugLayoutContext(layoutContext) {
+  if (layoutContext === null) {
+    return null;
+  }
   return {
-    stage: "idle",
-    measurement,
-    plan: null
+    display: layoutContext.display,
+    parentDisplay: layoutContext.parentDisplay,
+    whiteSpace: layoutContext.whiteSpace,
+    width: roundDebugValue(layoutContext.width),
+    measurementVersion: layoutContext.measurementVersion
   };
 }
-function areFontsReady() {
-  return document.fonts.status === "loaded";
+function summarizeDebugRect(rect) {
+  if (rect === null) {
+    return null;
+  }
+  return {
+    left: roundDebugValue(rect.left),
+    top: roundDebugValue(rect.top),
+    width: roundDebugValue(rect.width),
+    height: roundDebugValue(rect.height)
+  };
 }
-function cancelTimeline(timeline) {
-  if (timeline.prepareFrame !== null) {
-    cancelAnimationFrame(timeline.prepareFrame);
-    timeline.prepareFrame = null;
+function collectDebugAnchorIndices(length) {
+  const indices = new Set;
+  if (length <= 0) {
+    return [];
   }
-  if (timeline.animateFrame !== null) {
-    cancelAnimationFrame(timeline.animateFrame);
-    timeline.animateFrame = null;
+  indices.add(0);
+  if (length > 1) {
+    indices.add(1);
+    indices.add(length - 2);
   }
-  if (timeline.finalizeTimer !== null) {
-    window.clearTimeout(timeline.finalizeTimer);
-    timeline.finalizeTimer = null;
+  if (length > 2) {
+    indices.add(Math.floor((length - 1) / 2));
   }
+  indices.add(length - 1);
+  return Array.from(indices).sort((left, right) => left - right);
 }
-function resetMorph(session, timeline, setState) {
-  cancelTimeline(timeline);
-  session.committed = null;
-  session.target = null;
-  session.animating = false;
-  setState(EMPTY_STATE);
-}
-function commitStaticMeasurement(session, measurement, setState) {
-  if (!session.animating && session.target === null && session.committed !== null && sameMeasurement(session.committed, measurement)) {
-    return;
+function summarizeDebugViewportAnchors(snapshot, rootRect) {
+  if (snapshot === null || rootRect === null) {
+    return null;
   }
-  session.committed = measurement;
-  session.target = null;
-  session.animating = false;
-  setState((current) => {
-    if (current.stage === "idle" && current.plan === null && current.measurement !== null && sameMeasurement(current.measurement, measurement)) {
-      return current;
+  const anchors = [];
+  const anchorIndices = collectDebugAnchorIndices(snapshot.graphemes.length);
+  for (const index of anchorIndices) {
+    const grapheme = snapshot.graphemes[index];
+    if (grapheme === undefined) {
+      continue;
     }
-    return createStaticState(measurement);
-  });
-}
-function scheduleMorphTimeline({
-  session,
-  timeline,
-  measurement,
-  plan,
-  setState
-}) {
-  timeline.prepareFrame = requestAnimationFrame(() => {
-    timeline.prepareFrame = null;
-    setState((current) => {
-      if (current.measurement !== measurement || current.plan !== plan) {
-        return current;
-      }
-      return {
-        stage: "animate",
-        measurement,
-        plan
-      };
+    anchors.push({
+      index,
+      glyph: grapheme.glyph,
+      left: roundDebugValue(rootRect.left + grapheme.left),
+      top: roundDebugValue(rootRect.top + grapheme.top),
+      width: roundDebugValue(grapheme.width),
+      height: roundDebugValue(grapheme.height)
     });
-    timeline.animateFrame = requestAnimationFrame(() => {
-      timeline.animateFrame = null;
-      timeline.finalizeTimer = window.setTimeout(() => {
-        timeline.finalizeTimer = null;
-        commitStaticMeasurement(session, session.target ?? measurement, setState);
-      }, MORPH.durationMs);
-    });
-  });
+  }
+  return anchors;
 }
-function startMorph({
-  nextMeasurement,
-  session,
-  timeline,
-  setState
-}) {
-  let sourceMeasurement = session.committed;
-  if (session.animating && session.target) {
-    sourceMeasurement = session.target;
+function summarizeDebugRootOriginDrift(measurement, rootRect) {
+  if (measurement === null || rootRect === null) {
+    return null;
   }
-  if (sourceMeasurement === null) {
-    commitStaticMeasurement(session, nextMeasurement, setState);
+  return {
+    expectedLeft: roundDebugValue(measurement.rootOrigin.left),
+    expectedTop: roundDebugValue(measurement.rootOrigin.top),
+    actualLeft: roundDebugValue(rootRect.left),
+    actualTop: roundDebugValue(rootRect.top),
+    deltaLeft: roundDebugValue(rootRect.left - measurement.rootOrigin.left),
+    deltaTop: roundDebugValue(rootRect.top - measurement.rootOrigin.top)
+  };
+}
+function summarizeSnapshotDrift(drift) {
+  return {
+    comparedGlyphs: drift.comparedGlyphs,
+    expectedGlyphs: drift.expectedGlyphs,
+    actualGlyphs: drift.actualGlyphs,
+    snapshotWidthDelta: roundDebugValue(drift.snapshotWidthDelta),
+    snapshotHeightDelta: roundDebugValue(drift.snapshotHeightDelta),
+    maxAbsLeftDelta: roundDebugValue(drift.maxAbsLeftDelta),
+    maxAbsTopDelta: roundDebugValue(drift.maxAbsTopDelta),
+    maxAbsWidthDelta: roundDebugValue(drift.maxAbsWidthDelta),
+    maxAbsHeightDelta: roundDebugValue(drift.maxAbsHeightDelta),
+    mismatches: drift.mismatches.map((mismatch) => ({
+      index: mismatch.index,
+      glyph: mismatch.glyph,
+      leftDelta: roundDebugValue(mismatch.leftDelta),
+      topDelta: roundDebugValue(mismatch.topDelta),
+      widthDelta: roundDebugValue(mismatch.widthDelta),
+      heightDelta: roundDebugValue(mismatch.heightDelta)
+    }))
+  };
+}
+function logTorphDebug(instanceId, event, payload) {
+  const config = readTorphDebugConfig();
+  const captureTrace = shouldCaptureTorphTrace(config);
+  const logToConsole = isTorphDebugEnabled(config);
+  if (!captureTrace && !logToConsole) {
     return;
   }
-  const previousMeasurement = pinMeasurementToCurrentOrigin(sourceMeasurement, nextMeasurement.rootOrigin);
-  const visualBridge = buildMorphVisualBridge(previousMeasurement, nextMeasurement);
-  const plan = buildMorphPlan(previousMeasurement, nextMeasurement, visualBridge);
-  session.target = nextMeasurement;
-  session.animating = true;
-  setState({
-    stage: "prepare",
-    measurement: nextMeasurement,
-    plan
-  });
-  scheduleMorphTimeline({
-    session,
-    timeline,
-    measurement: nextMeasurement,
-    plan,
-    setState
-  });
+  if (captureTrace) {
+    appendTorphTrace(instanceId, event, payload);
+  }
+  if (logToConsole) {
+    console.log(`[Torph#${instanceId}] ${event}`, payload);
+  }
+}
+
+// torph/src/components/Torph.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+var SCREEN_READER_ONLY_STYLE = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  margin: "-1px",
+  padding: 0,
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  overflow: "hidden",
+  whiteSpace: "nowrap"
+};
+var FALLBACK_TEXT_STYLE = {
+  display: "block",
+  gridArea: "1 / 1"
+};
+var SHARED_GLYPH_TYPOGRAPHY_STYLE = {
+  font: "inherit",
+  fontKerning: "inherit",
+  fontFeatureSettings: "inherit",
+  fontOpticalSizing: "inherit",
+  fontStretch: "inherit",
+  fontStyle: "inherit",
+  fontVariant: "inherit",
+  fontVariantNumeric: "inherit",
+  fontVariationSettings: "inherit",
+  fontWeight: "inherit",
+  letterSpacing: "inherit",
+  textTransform: "inherit",
+  wordSpacing: "inherit",
+  direction: "inherit"
+};
+var ABSOLUTE_GLYPH_STYLE = {
+  position: "absolute",
+  display: "block",
+  overflow: "hidden",
+  transformOrigin: "left top"
+};
+var CONTEXT_SLICE_TEXT_STYLE = {
+  ...SHARED_GLYPH_TYPOGRAPHY_STYLE,
+  position: "absolute",
+  display: "block",
+  minWidth: 0,
+  whiteSpace: "inherit"
+};
+var debugDomNodeIds = new WeakMap;
+var debugDomNodeOrdinal = 0;
+function getDebugDomNodeId(node) {
+  if (node === null) {
+    return null;
+  }
+  const existing = debugDomNodeIds.get(node);
+  if (existing !== undefined) {
+    return existing;
+  }
+  debugDomNodeOrdinal += 1;
+  debugDomNodeIds.set(node, debugDomNodeOrdinal);
+  return debugDomNodeOrdinal;
 }
 function reconcileMorphChange({
   root,
@@ -3543,10 +4216,7 @@ function reconcileMorphChange({
   if (measurementBackend === null) {
     throw new Error("Torph measurement backend is missing.");
   }
-  let layoutHint = session.committed;
-  if (session.animating && session.target !== null) {
-    layoutHint = session.target;
-  }
+  const layoutHint = selectMorphLayoutHint(session);
   const nextMeasurement = measureFromNodes({
     root,
     layoutContext,
@@ -3558,72 +4228,13 @@ function reconcileMorphChange({
     renderText,
     segments
   });
-  if (session.animating && session.target !== null) {
-    if (nextMeasurement.snapshot.renderText === session.target.snapshot.renderText) {
-      session.target = refreshAnimatingTarget(session.target, nextMeasurement);
-      return nextMeasurement;
-    }
-  }
-  cancelTimeline(timeline);
-  if (session.committed === null) {
-    commitStaticMeasurement(session, nextMeasurement, setState);
-    return nextMeasurement;
-  }
-  if (!areFontsReady()) {
-    commitStaticMeasurement(session, nextMeasurement, setState);
-    return nextMeasurement;
-  }
-  if (session.committed.snapshot.renderText === nextMeasurement.snapshot.renderText) {
-    commitStaticMeasurement(session, reuseCommittedMeasurement(session.committed, nextMeasurement), setState);
-    return nextMeasurement;
-  }
-  startMorph({
-    nextMeasurement,
+  return reconcileMorphSessionUpdate({
     session,
     timeline,
+    nextMeasurement,
+    fontsReady: areFontsReady(),
     setState
   });
-  return nextMeasurement;
-}
-function syncCommittedRootOriginWhenIdle({
-  root,
-  flowTextRef,
-  layoutContext,
-  state,
-  session
-}) {
-  if (root === null || layoutContext === null) {
-    return;
-  }
-  if (state.stage !== "idle" || state.measurement === null) {
-    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) && (committedMeasurement.flowInlineSize === null && nextFlowInlineSize === null || committedMeasurement.flowInlineSize !== null && nextFlowInlineSize !== null && nearlyEqual(committedMeasurement.flowInlineSize, nextFlowInlineSize))) {
-    session.committed = committedMeasurement;
-    return;
-  }
-  session.committed = {
-    snapshot: committedMeasurement.snapshot,
-    layoutInlineSize: committedMeasurement.layoutInlineSize,
-    reservedInlineSize: committedMeasurement.reservedInlineSize,
-    flowInlineSize: nextFlowInlineSize,
-    rootOrigin: nextRootOrigin
-  };
-}
-function getFadeDuration(fraction) {
-  return Math.min(MORPH.durationMs * fraction, MORPH.maxFadeMs);
-}
-function getLiveTransform(item, stage, visualBridge) {
-  if (stage !== "prepare") {
-    return "translate(0px, 0px)";
-  }
-  if (item.kind === "move") {
-    return `translate(${(item.fromLeft ?? item.left) - item.left + visualBridge.offsetX}px, ${(item.fromTop ?? item.top) - item.top + visualBridge.offsetY}px)`;
-  }
-  return `translate(${visualBridge.offsetX}px, ${visualBridge.offsetY}px)`;
 }
 function getLiveOpacity(item, stage) {
   if (stage === "prepare" && item.kind === "enter") {
@@ -3631,96 +4242,14 @@ function getLiveOpacity(item, stage) {
   }
   return 1;
 }
-function getLiveTransition(item, stage) {
-  if (stage !== "animate") {
-    return;
-  }
-  if (item.kind === "enter") {
-    return `opacity ${getFadeDuration(0.5)}ms linear ${getFadeDuration(0.25)}ms`;
-  }
-  return `transform ${MORPH.durationMs}ms ${MORPH.ease}, opacity ${getFadeDuration(0.25)}ms linear`;
-}
-function getExitOpacity(stage) {
-  if (stage === "animate") {
-    return 0;
-  }
-  return 1;
-}
-function getExitTransform(visualBridge) {
-  return `translate(${visualBridge.offsetX}px, ${visualBridge.offsetY}px)`;
-}
-function getExitTransition(stage) {
-  if (stage !== "animate") {
-    return;
-  }
-  return `transform ${MORPH.durationMs}ms ${MORPH.ease}, opacity ${getFadeDuration(0.25)}ms linear`;
-}
-function supportsIntrinsicWidthLock(display, parentDisplay) {
-  const parentNeedsReservation = parentDisplay === "flex" || parentDisplay === "inline-flex" || parentDisplay === "grid" || parentDisplay === "inline-grid";
-  return display === "inline" || display === "inline-block" || display === "inline-flex" || display === "inline-grid" || parentNeedsReservation;
-}
-function getRootDisplay(layoutContext) {
-  if (layoutContext === null) {
-    return "grid";
-  }
-  if (supportsIntrinsicWidthLock(layoutContext.display, layoutContext.parentDisplay)) {
-    return "inline-grid";
-  }
-  return "grid";
-}
-function getRootStyle(stage, plan, measurement, layoutContext) {
-  let width = measurement?.reservedInlineSize ?? undefined;
-  if (plan !== null) {
-    width = plan.layoutInlineSizeTo;
-    if (stage === "prepare") {
-      width = plan.layoutInlineSizeFrom;
-    }
-  }
-  let height;
-  if (plan !== null) {
-    height = plan.frameHeight;
-  }
-  const shouldTransitionWidth = stage === "animate" && plan !== null && !nearlyEqual(plan.layoutInlineSizeFrom, plan.layoutInlineSizeTo);
-  const style = {
-    position: "relative",
-    display: getRootDisplay(layoutContext)
-  };
-  if (width !== undefined) {
-    style.width = width;
-  }
-  if (height !== undefined) {
-    style.height = height;
-  }
-  if (shouldTransitionWidth) {
-    style.transition = `width ${MORPH.durationMs}ms ${MORPH.ease}`;
-  }
-  return style;
-}
-function getMeasurementLayerStyle(layoutContext, useContentInlineSize = false) {
-  const intrinsicWidthLock = layoutContext !== null && (useContentInlineSize || supportsIntrinsicWidthLock(layoutContext.display, layoutContext.parentDisplay));
-  if (!intrinsicWidthLock) {
-    return MEASUREMENT_LAYER_STYLE;
-  }
-  return {
-    ...MEASUREMENT_LAYER_STYLE,
-    right: "auto",
-    width: "max-content"
-  };
-}
-function resolveFlowText(committedMeasurement, stateMeasurement, text) {
-  return committedMeasurement?.snapshot.text ?? stateMeasurement?.snapshot.text ?? text;
-}
-function getOverlayStyle(plan) {
-  return {
-    ...OVERLAY_STYLE,
-    right: "auto",
-    bottom: "auto",
-    width: plan.frameWidth,
-    height: plan.frameHeight
-  };
-}
-function getFallbackTextStyle(shouldRenderOverlay) {
-  if (!shouldRenderOverlay) {
+function getExitOpacity(stage) {
+  if (stage === "animate") {
+    return 0;
+  }
+  return 1;
+}
+function getFallbackTextStyle(shouldHideFlowText) {
+  if (!shouldHideFlowText) {
     return FALLBACK_TEXT_STYLE;
   }
   return {
@@ -3736,7 +4265,6 @@ function getLiveGlyphStyle(item, stage, visualBridge) {
     top: item.top,
     width: item.width,
     height: item.height,
-    lineHeight: `${item.height}px`,
     opacity: getLiveOpacity(item, stage),
     transform: getLiveTransform(item, stage, visualBridge),
     transition: getLiveTransition(item, stage)
@@ -3749,28 +4277,173 @@ function getExitGlyphStyle(item, stage, visualBridge) {
     top: item.top,
     width: item.width,
     height: item.height,
-    lineHeight: `${item.height}px`,
     opacity: getExitOpacity(stage),
     transform: getExitTransform(visualBridge),
     transition: getExitTransition(stage)
   };
 }
-function MorphOverlay({ stage, plan }) {
+function getContextSliceStyle(layoutInlineSize, item, whiteSpace) {
+  return {
+    ...CONTEXT_SLICE_TEXT_STYLE,
+    left: -item.left,
+    top: -item.top,
+    width: layoutInlineSize,
+    whiteSpace
+  };
+}
+function summarizePreciseRect(rect) {
+  if (rect === null) {
+    return null;
+  }
+  return {
+    left: roundDebugValue(rect.left),
+    top: roundDebugValue(rect.top),
+    width: roundDebugValue(rect.width),
+    height: roundDebugValue(rect.height)
+  };
+}
+function summarizePreciseGlyphs(snapshot, rootRect) {
+  if (snapshot === null) {
+    return null;
+  }
+  return snapshot.graphemes.map((grapheme, index) => ({
+    index,
+    glyph: grapheme.glyph,
+    key: grapheme.key,
+    left: roundDebugValue(grapheme.left),
+    top: roundDebugValue(grapheme.top),
+    width: roundDebugValue(grapheme.width),
+    height: roundDebugValue(grapheme.height),
+    viewportLeft: rootRect === null ? null : roundDebugValue(rootRect.left + grapheme.left),
+    viewportTop: rootRect === null ? null : roundDebugValue(rootRect.top + grapheme.top)
+  }));
+}
+function summarizeLiveNodeStyles(overlayNode) {
+  if (overlayNode === null) {
+    return null;
+  }
+  return Array.from(overlayNode.querySelectorAll("[data-morph-role='live']")).map((node, index) => {
+    const styles = getComputedStyle(node);
+    const sliceNode = node.firstElementChild;
+    let sliceStyles = null;
+    let sliceRect = null;
+    if (sliceNode instanceof HTMLElement) {
+      sliceStyles = getComputedStyle(sliceNode);
+      sliceRect = sliceNode.getBoundingClientRect();
+    }
+    let nodeRect = null;
+    nodeRect = node.getBoundingClientRect();
+    let sliceScrollWidth = null;
+    let sliceClientWidth = null;
+    let sliceOffsetWidth = null;
+    if (sliceNode instanceof HTMLElement) {
+      sliceScrollWidth = sliceNode.scrollWidth;
+      sliceClientWidth = sliceNode.clientWidth;
+      sliceOffsetWidth = sliceNode.offsetWidth;
+    }
+    return {
+      index,
+      nodeId: getDebugDomNodeId(node),
+      key: node.dataset.morphKey ?? null,
+      glyph: node.dataset.morphGlyph ?? null,
+      kind: node.dataset.morphKind ?? null,
+      transform: styles.transform,
+      inlineTransform: node.style.transform,
+      opacity: styles.opacity,
+      transitionProperty: styles.transitionProperty,
+      transitionDuration: styles.transitionDuration,
+      transitionTimingFunction: styles.transitionTimingFunction,
+      nodeRect: summarizePreciseRect(nodeRect),
+      sliceNodeId: getDebugDomNodeId(sliceNode),
+      sliceInlineLeft: node.firstElementChild instanceof HTMLElement ? node.firstElementChild.style.left : null,
+      sliceInlineTop: node.firstElementChild instanceof HTMLElement ? node.firstElementChild.style.top : null,
+      sliceInlineWidth: node.firstElementChild instanceof HTMLElement ? node.firstElementChild.style.width : null,
+      sliceLeft: sliceStyles?.left ?? null,
+      sliceTop: sliceStyles?.top ?? null,
+      sliceWidth: sliceStyles?.width ?? null,
+      sliceWhiteSpace: sliceStyles?.whiteSpace ?? null,
+      sliceText: sliceNode instanceof HTMLElement ? sliceNode.textContent : null,
+      sliceRect: summarizePreciseRect(sliceRect),
+      sliceScrollWidth: roundDebugValue(sliceScrollWidth),
+      sliceClientWidth: roundDebugValue(sliceClientWidth),
+      sliceOffsetWidth: roundDebugValue(sliceOffsetWidth)
+    };
+  });
+}
+function summarizeRootRuntimeStyles(root) {
+  if (root === null) {
+    return null;
+  }
+  const styles = getComputedStyle(root);
+  const parent = root.parentElement;
+  let parentStyles = null;
+  let parentRect = null;
+  if (parent instanceof HTMLElement) {
+    parentStyles = getComputedStyle(parent);
+    parentRect = parent.getBoundingClientRect();
+  }
+  let parentSummary = null;
+  if (parent !== null) {
+    parentSummary = {
+      display: parentStyles?.display ?? null,
+      justifyContent: parentStyles?.justifyContent ?? null,
+      alignItems: parentStyles?.alignItems ?? null,
+      placeItems: parentStyles?.placeItems ?? null,
+      textAlign: parentStyles?.textAlign ?? null,
+      rect: summarizePreciseRect(parentRect)
+    };
+  }
+  return {
+    inlineWidth: root.style.width || null,
+    computedWidth: styles.width,
+    inlineTransition: root.style.transition || null,
+    computedTransitionProperty: styles.transitionProperty,
+    computedTransitionDuration: styles.transitionDuration,
+    computedTransform: styles.transform,
+    offsetWidth: roundDebugValue(root.offsetWidth),
+    clientWidth: roundDebugValue(root.clientWidth),
+    scrollWidth: roundDebugValue(root.scrollWidth),
+    parent: parentSummary
+  };
+}
+function MorphOverlay({
+  overlayRef,
+  stage,
+  plan,
+  sourceSliceWhiteSpace,
+  targetSliceWhiteSpace
+}) {
   let exitItems = [];
   if (stage !== "idle") {
     exitItems = plan.exitItems;
   }
   return /* @__PURE__ */ jsxDEV("div", {
+    ref: overlayRef,
     "aria-hidden": "true",
-    style: getOverlayStyle(plan),
+    style: getOverlayStyle(stage, plan),
     children: [
       exitItems.map((item) => /* @__PURE__ */ jsxDEV("span", {
+        "data-morph-role": "exit",
+        "data-morph-key": item.key,
+        "data-morph-glyph": item.glyph,
         style: getExitGlyphStyle(item, stage, plan.visualBridge),
-        children: item.glyph
+        children: /* @__PURE__ */ jsxDEV("span", {
+          "data-morph-slice": "context",
+          style: getContextSliceStyle(plan.layoutInlineSizeFrom, item, sourceSliceWhiteSpace),
+          children: plan.sourceRenderText
+        }, undefined, false, undefined, this)
       }, `exit-${item.key}`, false, undefined, this)),
       plan.liveItems.map((item) => /* @__PURE__ */ jsxDEV("span", {
+        "data-morph-role": "live",
+        "data-morph-key": item.key,
+        "data-morph-glyph": item.glyph,
+        "data-morph-kind": item.kind,
         style: getLiveGlyphStyle(item, stage, plan.visualBridge),
-        children: item.glyph
+        children: /* @__PURE__ */ jsxDEV("span", {
+          "data-morph-slice": "context",
+          style: getContextSliceStyle(plan.layoutInlineSizeTo, item, targetSliceWhiteSpace),
+          children: plan.targetRenderText
+        }, undefined, false, undefined, this)
       }, item.key, false, undefined, this))
     ]
   }, undefined, true, undefined, this);
@@ -3779,38 +4452,55 @@ function MeasurementLayer({
   layerRef,
   layoutContext,
   text,
-  segments,
   useContentInlineSize
 }) {
-  let glyphs = segments;
-  if (text.length === 0) {
-    glyphs = EMPTY_SEGMENTS;
-  }
   return /* @__PURE__ */ jsxDEV("span", {
     ref: layerRef,
     "aria-hidden": "true",
     style: getMeasurementLayerStyle(layoutContext, useContentInlineSize),
-    children: glyphs.map((segment) => /* @__PURE__ */ jsxDEV("span", {
-      "data-morph-key": segment.key,
-      style: MEASUREMENT_GLYPH_STYLE,
-      children: segment.glyph
-    }, segment.key, false, undefined, this))
+    children: text
   }, undefined, false, undefined, this);
 }
-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);
-  const sessionRef = useRef({ ...EMPTY_SESSION });
-  const timelineRef = useRef({ ...EMPTY_TIMELINE });
-  const [domMeasurementRequestKey, setDomMeasurementRequestKey] = useState(null);
-  const [state, setState] = useState(EMPTY_STATE);
-  let measurementHint = sessionRef.current.committed;
-  if (sessionRef.current.animating) {
-    measurementHint = sessionRef.current.target ?? sessionRef.current.committed;
+function isMorphOverlayTransformFinalizeEvent(event, hasMoveTransitions) {
+  if (!hasMoveTransitions) {
+    return false;
+  }
+  const target = event.target;
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+  if (target.dataset.morphRole !== "live") {
+    return false;
+  }
+  return event.propertyName === "transform";
+}
+function resolveMorphFinalizeSignal(event, hasMoveTransitions) {
+  if (isMorphOverlayTransformFinalizeEvent(event, hasMoveTransitions)) {
+    return "live-transform";
   }
+  return null;
+}
+function useMorphTransition(text, className) {
+  const [state, setState] = useState2(EMPTY_STATE);
+  const { ref, layoutContext } = useObservedLayoutContext([
+    className
+  ]);
+  const debugInstanceIdRef = useRef2(null);
+  const debugRenderOrdinalRef = useRef2(0);
+  const flowTextRef = useRef2(null);
+  const measurementLayerRef = useRef2(null);
+  const completedDomMeasurementKeyRef = useRef2(null);
+  const domMeasurementSnapshotCacheRef = useRef2(new Map);
+  const sessionRef = useRef2({ ...EMPTY_SESSION });
+  const timelineRef = useRef2({ ...EMPTY_TIMELINE });
+  const debugDriftSignatureRef = useRef2(null);
+  const [domMeasurementRequestKey, setDomMeasurementRequestKey] = useState2(null);
+  debugRenderOrdinalRef.current += 1;
+  const debugRenderOrdinal = debugRenderOrdinalRef.current;
+  if (debugInstanceIdRef.current === null) {
+    debugInstanceIdRef.current = nextTorphDebugInstanceId();
+  }
+  const measurementHint = selectMorphLayoutHint(sessionRef.current);
   const measurementRequest = useMemo(() => createMorphMeasurementRequest({
     text,
     layoutContext,
@@ -3821,10 +4511,39 @@ function useMorphTransition(text, className) {
   const measurementBackend = measurementRequest?.measurementBackend ?? null;
   const segments = measurementRequest?.segments ?? EMPTY_SEGMENTS;
   const domMeasurementKey = measurementRequest?.domMeasurementKey ?? null;
-  useLayoutEffect(() => {
+  const logTransitionTrace = (event, payload = {}) => {
+    const config = readTorphDebugConfig();
+    if (!shouldRunTorphInstrumentation(config)) {
+      return;
+    }
+    logTorphDebug(debugInstanceIdRef.current, event, {
+      traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+      renderOrdinal: debugRenderOrdinal,
+      text,
+      renderText,
+      stateStage: state.stage,
+      committed: summarizeDebugMeasurement(sessionRef.current.committed),
+      stateMeasurement: summarizeDebugMeasurement(state.measurement),
+      layoutContext: summarizeDebugLayoutContext(layoutContext),
+      measurementBackend,
+      useContentInlineSize,
+      domMeasurementKey,
+      domMeasurementRequestKey,
+      completedDomMeasurementKey: completedDomMeasurementKeyRef.current,
+      ...payload
+    });
+  };
+  useLayoutEffect2(() => {
+    ensureTorphTraceApi();
+  }, []);
+  useLayoutEffect2(() => {
     if (ref.current === null || layoutContext === null) {
       completedDomMeasurementKeyRef.current = null;
       if (domMeasurementRequestKey !== null) {
+        logTransitionTrace("effect:dom-measurement-request-update", {
+          reason: "clear-missing-root-or-layout",
+          nextDomMeasurementRequestKey: null
+        });
         setDomMeasurementRequestKey(null);
       }
       reconcileMorphChange({
@@ -3850,6 +4569,11 @@ function useMorphTransition(text, className) {
       if (cachedSnapshot !== null) {
         completedDomMeasurementKeyRef.current = domMeasurementKey;
         if (domMeasurementRequestKey !== null) {
+          logTransitionTrace("effect:dom-measurement-request-update", {
+            reason: "clear-after-cache-hit",
+            nextDomMeasurementRequestKey: null,
+            snapshotSource: "cache"
+          });
           setDomMeasurementRequestKey(null);
         }
         reconcileMorphChange({
@@ -3869,13 +4593,20 @@ function useMorphTransition(text, className) {
       }
       if (completedDomMeasurementKeyRef.current !== domMeasurementKey) {
         if (domMeasurementRequestKey !== domMeasurementKey) {
+          logTransitionTrace("effect:dom-measurement-request-update", {
+            reason: "request-measurement-layer",
+            nextDomMeasurementRequestKey: domMeasurementKey
+          });
           setDomMeasurementRequestKey(domMeasurementKey);
           return;
         }
         if (measurementLayerRef.current === null) {
+          logTransitionTrace("effect:dom-measurement-await-layer", {
+            reason: "measurement-layer-not-mounted"
+          });
           return;
         }
-        const nextMeasurement = reconcileMorphChange({
+        const nextMeasurement2 = reconcileMorphChange({
           root: ref.current,
           measurementLayer: measurementLayerRef.current,
           measurementBackend,
@@ -3888,27 +4619,40 @@ function useMorphTransition(text, className) {
           timeline: timelineRef.current,
           setState
         });
-        if (nextMeasurement !== null) {
+        if (nextMeasurement2 !== null) {
           if (canCacheMeasurementLayerSnapshot(measurementBackend)) {
-            rememberCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, domMeasurementKey, nextMeasurement.snapshot);
+            rememberCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, domMeasurementKey, nextMeasurement2.snapshot);
           }
         }
         completedDomMeasurementKeyRef.current = domMeasurementKey;
         if (domMeasurementRequestKey !== null) {
+          logTransitionTrace("effect:dom-measurement-request-update", {
+            reason: "clear-after-live-measurement",
+            nextDomMeasurementRequestKey: null,
+            snapshotSource: "layer"
+          });
           setDomMeasurementRequestKey(null);
         }
         return;
       }
       if (domMeasurementRequestKey !== null) {
+        logTransitionTrace("effect:dom-measurement-request-update", {
+          reason: "clear-completed-measurement",
+          nextDomMeasurementRequestKey: null
+        });
         setDomMeasurementRequestKey(null);
       }
       return;
     }
     completedDomMeasurementKeyRef.current = null;
     if (domMeasurementRequestKey !== null) {
+      logTransitionTrace("effect:dom-measurement-request-update", {
+        reason: "clear-no-dom-measurement-needed",
+        nextDomMeasurementRequestKey: null
+      });
       setDomMeasurementRequestKey(null);
     }
-    reconcileMorphChange({
+    const nextMeasurement = reconcileMorphChange({
       root: ref.current,
       measurementLayer: measurementLayerRef.current,
       measurementBackend,
@@ -3931,68 +4675,874 @@ function useMorphTransition(text, className) {
     domMeasurementKey,
     domMeasurementRequestKey
   ]);
-  useLayoutEffect(() => {
-    syncCommittedRootOriginWhenIdle({
-      root: ref.current,
-      flowTextRef,
-      layoutContext,
-      state,
-      session: sessionRef.current
+  useLayoutEffect2(() => {
+    const config = readTorphDebugConfig();
+    if (!shouldRunTorphInstrumentation(config)) {
+      debugDriftSignatureRef.current = null;
+      return;
+    }
+    if (state.stage !== "idle" || state.measurement === null) {
+      debugDriftSignatureRef.current = null;
+      return;
+    }
+    const root = ref.current;
+    const flowTextNode = flowTextRef.current;
+    if (root === null || flowTextNode === null) {
+      debugDriftSignatureRef.current = null;
+      return;
+    }
+    const liveSnapshot = measureLiveFlowSnapshot(root, flowTextNode);
+    if (liveSnapshot === null) {
+      debugDriftSignatureRef.current = null;
+      return;
+    }
+    const drift = measureSnapshotDrift(state.measurement.snapshot, liveSnapshot);
+    const hasDrift = drift.expectedGlyphs !== drift.actualGlyphs || Math.abs(drift.snapshotWidthDelta) > MORPH.geometryEpsilon || drift.maxAbsLeftDelta > MORPH.geometryEpsilon || drift.maxAbsTopDelta > MORPH.geometryEpsilon || drift.maxAbsWidthDelta > MORPH.geometryEpsilon || drift.maxAbsHeightDelta > MORPH.geometryEpsilon;
+    if (!hasDrift) {
+      debugDriftSignatureRef.current = null;
+      return;
+    }
+    const signature = JSON.stringify({
+      text,
+      renderText: state.measurement.snapshot.renderText,
+      drift: summarizeSnapshotDrift(drift)
     });
-  }, [layoutContext, state]);
-  useLayoutEffect(() => {
+    if (debugDriftSignatureRef.current === signature) {
+      return;
+    }
+    debugDriftSignatureRef.current = signature;
+    logTorphDebug(debugInstanceIdRef.current, "effect:idle-flow-drift", {
+      text,
+      expected: summarizeDebugSnapshot(state.measurement.snapshot),
+      actual: summarizeDebugSnapshot(liveSnapshot),
+      drift: summarizeSnapshotDrift(drift)
+    });
+  }, [state, text]);
+  useLayoutEffect2(() => {
     return () => {
       cancelTimeline(timelineRef.current);
     };
   }, []);
+  useLayoutEffect2(() => {
+    if (state.stage !== "prepare" || state.measurement === null || state.plan === null) {
+      return;
+    }
+    const root = ref.current;
+    if (root === null) {
+      return;
+    }
+    const nextOrigin = readRootOrigin(root);
+    const nextMeasurement = resolvePreparedMeasurementOrigin(state.measurement, nextOrigin);
+    const nextPlan = resolvePreparedPlanVisualBridge(state.plan, nextOrigin);
+    if (nextMeasurement !== state.measurement || nextPlan !== state.plan) {
+      sessionRef.current.target = nextMeasurement;
+      logTransitionTrace("effect:prepare-refine", {
+        preparedOrigin: {
+          left: roundDebugValue(nextOrigin.left),
+          top: roundDebugValue(nextOrigin.top)
+        },
+        refinedMeasurement: summarizeDebugMeasurement(nextMeasurement),
+        refinedVisualBridge: {
+          offsetX: roundDebugValue(nextPlan.visualBridge.offsetX),
+          offsetY: roundDebugValue(nextPlan.visualBridge.offsetY)
+        }
+      });
+      setState((current) => {
+        if (current.stage !== "prepare" || current.measurement === null || current.plan === null) {
+          return current;
+        }
+        if (current.measurement === nextMeasurement && current.plan === nextPlan) {
+          return current;
+        }
+        return {
+          stage: "prepare",
+          measurement: nextMeasurement,
+          plan: nextPlan
+        };
+      });
+      return;
+    }
+    timelineRef.current.prepareFrame = requestAnimationFrame(() => {
+      timelineRef.current.prepareFrame = null;
+      timelineRef.current.animateFrame = requestAnimationFrame(() => {
+        timelineRef.current.animateFrame = null;
+        logTransitionTrace("effect:prepare-animate", {
+          preparedOrigin: {
+            left: roundDebugValue(nextOrigin.left),
+            top: roundDebugValue(nextOrigin.top)
+          },
+          visualBridge: {
+            offsetX: roundDebugValue(nextPlan.visualBridge.offsetX),
+            offsetY: roundDebugValue(nextPlan.visualBridge.offsetY)
+          }
+        });
+        setState((current) => {
+          if (current.stage !== "prepare" || current.measurement === null || current.plan === null) {
+            return current;
+          }
+          return {
+            stage: "animate",
+            measurement: current.measurement,
+            plan: current.plan
+          };
+        });
+      });
+    });
+    return () => {
+      if (timelineRef.current.prepareFrame !== null) {
+        cancelAnimationFrame(timelineRef.current.prepareFrame);
+        timelineRef.current.prepareFrame = null;
+      }
+      if (timelineRef.current.animateFrame !== null) {
+        cancelAnimationFrame(timelineRef.current.animateFrame);
+        timelineRef.current.animateFrame = null;
+      }
+    };
+  }, [state.measurement, state.plan, state.stage]);
+  const finalizeMorphTransition2 = (measurement, reason) => {
+    logTransitionTrace("effect:finalize-trigger", {
+      reason,
+      measurement: summarizeDebugMeasurement(measurement)
+    });
+    finalizeMorphTransition({
+      session: sessionRef.current,
+      timeline: timelineRef.current,
+      measurement,
+      setState
+    });
+  };
   return {
+    debugInstanceId: debugInstanceIdRef.current,
+    debugRenderOrdinal,
     committedMeasurement: sessionRef.current.committed,
     domMeasurementRequestKey,
     flowTextRef,
     ref,
     measurementLayerRef,
+    measurementBackend,
+    domMeasurementKey,
     renderText,
     segments,
     layoutContext,
     state,
-    useContentInlineSize
+    useContentInlineSize,
+    finalizeMorphTransition: finalizeMorphTransition2,
+    timelineRef
   };
 }
 function ActiveTorph({
   text,
   className
 }) {
+  const debugRenderOrdinalRef = useRef2(0);
+  const overlayRef = useRef2(null);
+  const debugFinalizeSignatureRef = useRef2(null);
+  const debugFrameHandleRef = useRef2(null);
+  const debugFrameOrdinalRef = useRef2(0);
+  const debugAnimateTailFramesRef = useRef2([]);
+  const debugIdlePostFrameHandleRef = useRef2(null);
+  const debugIdlePostFrameOrdinalRef = useRef2(0);
+  const debugIdlePostFrameTokenRef = useRef2(0);
+  const debugPendingIdlePostFramesRef = useRef2(false);
+  const debugPreviousStageRef = useRef2(null);
+  debugRenderOrdinalRef.current += 1;
+  const debugRenderOrdinal = debugRenderOrdinalRef.current;
   const {
+    debugInstanceId,
+    debugRenderOrdinal: hookRenderOrdinal,
     committedMeasurement,
     domMeasurementRequestKey,
+    domMeasurementKey,
     flowTextRef,
     ref,
     measurementLayerRef,
+    measurementBackend,
     renderText,
     segments,
     layoutContext,
     state,
-    useContentInlineSize
+    useContentInlineSize,
+    finalizeMorphTransition: finalizeMorphTransition2,
+    timelineRef
   } = useMorphTransition(text, className);
   const plan = state.plan;
-  const shouldRenderOverlay = state.stage !== "idle" && plan !== null;
+  let visibleGlyphPlan = plan;
+  if (state.stage === "idle" && state.measurement !== null) {
+    visibleGlyphPlan = createSteadyGlyphPlan(state.measurement);
+  }
+  let sourceSliceWhiteSpace = "inherit";
+  if (committedMeasurement !== null) {
+    sourceSliceWhiteSpace = resolveGlyphSliceWhiteSpace(committedMeasurement.snapshot);
+  }
+  let targetSliceWhiteSpace = "inherit";
+  if (state.measurement !== null) {
+    targetSliceWhiteSpace = resolveGlyphSliceWhiteSpace(state.measurement.snapshot);
+  }
+  const shouldRenderGlyphLayer2 = shouldRenderGlyphLayer(state.stage, visibleGlyphPlan, state.measurement);
+  const shouldHideFlowText = shouldRenderGlyphLayer2;
   const shouldRenderMeasurementLayer = domMeasurementRequestKey !== null;
   const flowText = resolveFlowText(committedMeasurement, state.measurement, text);
+  useLayoutEffect2(() => {
+    const config = readTorphDebugConfig();
+    if (!shouldRunTorphInstrumentation(config)) {
+      return;
+    }
+    logTorphDebug(debugInstanceId, "effect:trace-meta", {
+      traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+      includesIdlePostFrame: true,
+      includesIdlePostFrameLifecycle: true,
+      includesViewportAnchors: true,
+      includesRootOriginRefine: true,
+      includesFullGlyphLayouts: true,
+      includesIdleVisibleGlyphLayer: true,
+      includesPreciseGlyphGeometry: true,
+      includesAnimateTailFrames: true,
+      includesLiveNodeStyles: true
+    });
+  }, [debugInstanceId]);
+  useLayoutEffect2(() => {
+    const config = readTorphDebugConfig();
+    if (!shouldRunTorphInstrumentation(config)) {
+      debugFinalizeSignatureRef.current = null;
+      return;
+    }
+    if (state.stage !== "animate" || state.measurement === null || plan === null) {
+      debugFinalizeSignatureRef.current = null;
+    }
+  }, [plan, state.measurement, state.stage]);
+  const logAnimateFinalizeSnapshot = (measurement, activePlan, reason, barrier, signal, event) => {
+    const config = readTorphDebugConfig();
+    if (!shouldRunTorphInstrumentation(config)) {
+      return;
+    }
+    const root = ref.current;
+    const overlayNode = overlayRef.current;
+    const flowNode = flowTextRef.current;
+    if (root === null || overlayNode === null || flowNode === null) {
+      return;
+    }
+    const overlayLiveSnapshot = measureOverlayBoxSnapshot(root, overlayNode, "live");
+    const overlayExitSnapshot = measureOverlayBoxSnapshot(root, overlayNode, "exit");
+    const flowSnapshot = measureLiveFlowSnapshot(root, flowNode);
+    if (overlayLiveSnapshot === null || flowSnapshot === null) {
+      return;
+    }
+    const overlayLiveDrift = measureSnapshotDrift(measurement.snapshot, overlayLiveSnapshot);
+    const flowDrift = measureSnapshotDrift(measurement.snapshot, flowSnapshot);
+    const rootRect = root.getBoundingClientRect();
+    const flowRect = flowNode.getBoundingClientRect();
+    const overlayRect = overlayNode.getBoundingClientRect();
+    const signature = JSON.stringify({
+      text,
+      renderText: measurement.snapshot.renderText,
+      reason,
+      signal,
+      barrier: summarizeMorphFinalizeBarrier(barrier),
+      overlayLiveDrift: summarizeSnapshotDrift(overlayLiveDrift),
+      flowDrift: summarizeSnapshotDrift(flowDrift),
+      overlayWidth: roundDebugValue(overlayRect.width),
+      rootWidth: roundDebugValue(rootRect.width)
+    });
+    if (debugFinalizeSignatureRef.current === signature) {
+      return;
+    }
+    debugFinalizeSignatureRef.current = signature;
+    let morphRole = null;
+    let morphKey = null;
+    let morphGlyph = null;
+    const target = event?.target;
+    if (target instanceof HTMLElement) {
+      morphRole = target.dataset.morphRole ?? null;
+      morphKey = target.dataset.morphKey ?? null;
+      morphGlyph = target.dataset.morphGlyph ?? null;
+    }
+    logTorphDebug(debugInstanceId, "effect:animate-finalize-snapshot", {
+      text,
+      reason,
+      propertyName: event?.propertyName ?? null,
+      finalizeSignal: signal,
+      morphRole,
+      morphKey,
+      morphGlyph,
+      barrier: summarizeMorphFinalizeBarrier(barrier),
+      target: {
+        layoutInlineSize: roundDebugValue(measurement.layoutInlineSize),
+        reservedInlineSize: roundDebugValue(measurement.reservedInlineSize),
+        flowInlineSize: roundDebugValue(measurement.flowInlineSize),
+        rootOrigin: {
+          left: roundDebugValue(measurement.rootOrigin.left),
+          top: roundDebugValue(measurement.rootOrigin.top)
+        },
+        snapshot: summarizeDebugSnapshot(measurement.snapshot)
+      },
+      plan: {
+        frameWidth: roundDebugValue(activePlan.frameWidth),
+        frameHeight: roundDebugValue(activePlan.frameHeight),
+        layoutInlineSizeFrom: roundDebugValue(activePlan.layoutInlineSizeFrom),
+        layoutInlineSizeTo: roundDebugValue(activePlan.layoutInlineSizeTo),
+        sourceRenderText: activePlan.sourceRenderText,
+        targetRenderText: activePlan.targetRenderText
+      },
+      overlayLive: summarizeDebugSnapshot(overlayLiveSnapshot),
+      overlayLiveGlyphs: summarizeDebugGlyphs(overlayLiveSnapshot),
+      overlayLiveGlyphsPrecise: summarizePreciseGlyphs(overlayLiveSnapshot, rootRect),
+      overlayLiveDrift: summarizeSnapshotDrift(overlayLiveDrift),
+      overlayExit: summarizeDebugSnapshot(overlayExitSnapshot),
+      overlayExitGlyphs: summarizeDebugGlyphs(overlayExitSnapshot),
+      flow: summarizeDebugSnapshot(flowSnapshot),
+      flowGlyphs: summarizeDebugGlyphs(flowSnapshot),
+      flowGlyphsPrecise: summarizePreciseGlyphs(flowSnapshot, rootRect),
+      flowDrift: summarizeSnapshotDrift(flowDrift),
+      rootOriginDrift: summarizeDebugRootOriginDrift(measurement, rootRect),
+      overlayLiveViewportAnchors: summarizeDebugViewportAnchors(overlayLiveSnapshot, rootRect),
+      overlayExitViewportAnchors: summarizeDebugViewportAnchors(overlayExitSnapshot, rootRect),
+      flowViewportAnchors: summarizeDebugViewportAnchors(flowSnapshot, rootRect),
+      rootBox: {
+        width: roundDebugValue(rootRect.width),
+        height: roundDebugValue(rootRect.height)
+      },
+      overlayBox: {
+        width: roundDebugValue(overlayRect.width),
+        height: roundDebugValue(overlayRect.height)
+      },
+      flowBox: {
+        width: roundDebugValue(flowRect.width),
+        height: roundDebugValue(flowRect.height)
+      },
+      rootBoxPrecise: summarizePreciseRect(rootRect),
+      overlayBoxPrecise: summarizePreciseRect(overlayRect),
+      flowBoxPrecise: summarizePreciseRect(flowRect),
+      rootRuntimeStyles: summarizeRootRuntimeStyles(root),
+      overlayLiveNodeStyles: summarizeLiveNodeStyles(overlayNode),
+      animateTailFrames: debugAnimateTailFramesRef.current
+    });
+    debugAnimateTailFramesRef.current = [];
+  };
+  useLayoutEffect2(() => {
+    if (state.stage !== "animate" || state.measurement === null || plan === null) {
+      return;
+    }
+    const root = ref.current;
+    if (root === null) {
+      return;
+    }
+    const measurement = state.measurement;
+    const hasMoveTransitions = plan.liveItems.some((item) => item.kind === "move");
+    let barrier = createMorphFinalizeBarrier(hasMoveTransitions);
+    let finalizeScheduled = false;
+    let finalizeCommitted = false;
+    let finalizeFrame = null;
+    const armedAt = performance.now();
+    const finalizeNow = (reason, signal, barrierState, event) => {
+      if (finalizeCommitted) {
+        return;
+      }
+      finalizeCommitted = true;
+      const target = event?.target;
+      let morphRole = null;
+      let morphKey = null;
+      let morphGlyph = null;
+      if (target instanceof HTMLElement) {
+        morphRole = target.dataset.morphRole ?? null;
+        morphKey = target.dataset.morphKey ?? null;
+        morphGlyph = target.dataset.morphGlyph ?? null;
+      }
+      logAnimateFinalizeSnapshot(measurement, plan, reason, barrierState, signal, event);
+      finalizeMorphTransition2(measurement, reason);
+      const config = readTorphDebugConfig();
+      if (!shouldRunTorphInstrumentation(config)) {
+        return;
+      }
+      logTorphDebug(debugInstanceId, "effect:finalize-authority", {
+        text,
+        reason,
+        propertyName: event?.propertyName ?? null,
+        morphRole,
+        morphKey,
+        morphGlyph,
+        elapsedMs: roundDebugValue(performance.now() - armedAt),
+        hasMoveTransitions,
+        finalizeSignal: signal,
+        barrier: summarizeMorphFinalizeBarrier(barrierState),
+        measurement: summarizeDebugMeasurement(measurement)
+      });
+    };
+    const scheduleFinalize = (reason, signal, barrierState, event) => {
+      if (finalizeCommitted || finalizeScheduled) {
+        return;
+      }
+      finalizeScheduled = true;
+      if (timelineRef.current.finalizeTimer !== null) {
+        window.clearTimeout(timelineRef.current.finalizeTimer);
+        timelineRef.current.finalizeTimer = null;
+      }
+      logTorphDebug(debugInstanceId, "effect:finalize-raf-schedule", {
+        text,
+        reason,
+        propertyName: event?.propertyName ?? null,
+        finalizeSignal: signal,
+        elapsedMs: roundDebugValue(performance.now() - armedAt),
+        barrier: summarizeMorphFinalizeBarrier(barrierState)
+      });
+      finalizeFrame = requestAnimationFrame(() => {
+        finalizeFrame = null;
+        finalizeNow(reason, signal, barrierState, event);
+      });
+    };
+    const onTransitionEnd = (event) => {
+      const signal = resolveMorphFinalizeSignal(event, hasMoveTransitions);
+      if (signal === null) {
+        return;
+      }
+      barrier = recordMorphFinalizeSignal(barrier, signal);
+      const target = event.target;
+      let morphRole = null;
+      let morphKey = null;
+      let morphGlyph = null;
+      if (target instanceof HTMLElement) {
+        morphRole = target.dataset.morphRole ?? null;
+        morphKey = target.dataset.morphKey ?? null;
+        morphGlyph = target.dataset.morphGlyph ?? null;
+      }
+      logTorphDebug(debugInstanceId, "effect:finalize-barrier-progress", {
+        text,
+        propertyName: event.propertyName,
+        signal,
+        morphRole,
+        morphKey,
+        morphGlyph,
+        elapsedMs: roundDebugValue(performance.now() - armedAt),
+        barrier: summarizeMorphFinalizeBarrier(barrier)
+      });
+      if (!isMorphFinalizeBarrierSatisfied(barrier)) {
+        return;
+      }
+      scheduleFinalize("transitionend", signal, barrier, event);
+    };
+    root.addEventListener("transitionend", onTransitionEnd);
+    if (timelineRef.current.finalizeTimer !== null) {
+      window.clearTimeout(timelineRef.current.finalizeTimer);
+    }
+    timelineRef.current.finalizeTimer = window.setTimeout(() => {
+      timelineRef.current.finalizeTimer = null;
+      scheduleFinalize("watchdog-timeout", null, barrier);
+    }, MORPH.durationMs + 32);
+    return () => {
+      root.removeEventListener("transitionend", onTransitionEnd);
+      if (finalizeFrame !== null) {
+        cancelAnimationFrame(finalizeFrame);
+        finalizeFrame = null;
+      }
+      if (timelineRef.current.finalizeTimer !== null) {
+        window.clearTimeout(timelineRef.current.finalizeTimer);
+        timelineRef.current.finalizeTimer = null;
+      }
+    };
+  }, [
+    debugInstanceId,
+    finalizeMorphTransition2,
+    plan,
+    state.measurement,
+    state.stage,
+    text,
+    timelineRef
+  ]);
+  useLayoutEffect2(() => {
+    const config = readTorphDebugConfig();
+    if (!shouldRunTorphInstrumentation(config)) {
+      debugPendingIdlePostFramesRef.current = false;
+      debugPreviousStageRef.current = state.stage;
+      return;
+    }
+    const previousStage = debugPreviousStageRef.current;
+    if (previousStage !== state.stage) {
+      if (state.stage === "idle") {
+        debugPendingIdlePostFramesRef.current = true;
+        debugIdlePostFrameTokenRef.current += 1;
+      } else {
+        debugPendingIdlePostFramesRef.current = false;
+      }
+      logTorphDebug(debugInstanceId, "effect:stage-transition", {
+        traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+        renderOrdinal: debugRenderOrdinal,
+        text,
+        fromStage: previousStage,
+        toStage: state.stage,
+        committed: summarizeDebugMeasurement(committedMeasurement),
+        stateMeasurement: summarizeDebugMeasurement(state.measurement),
+        flowText,
+        domMeasurementRequestKey,
+        domMeasurementKey,
+        measurementBackend
+      });
+      debugPreviousStageRef.current = state.stage;
+    }
+  }, [committedMeasurement, debugInstanceId, flowText, state, text]);
+  useLayoutEffect2(() => {
+    const config = readTorphDebugConfig();
+    if (!shouldRunTorphInstrumentation(config)) {
+      if (debugFrameHandleRef.current !== null) {
+        cancelAnimationFrame(debugFrameHandleRef.current);
+        debugFrameHandleRef.current = null;
+      }
+      debugAnimateTailFramesRef.current = [];
+      return;
+    }
+    if (state.stage === "idle" || state.measurement === null) {
+      if (debugFrameHandleRef.current !== null) {
+        cancelAnimationFrame(debugFrameHandleRef.current);
+        debugFrameHandleRef.current = null;
+      }
+      debugFrameOrdinalRef.current = 0;
+      debugAnimateTailFramesRef.current = [];
+      return;
+    }
+    debugFrameOrdinalRef.current = 0;
+    const measurement = state.measurement;
+    let cancelled = false;
+    const captureFrame = () => {
+      if (cancelled) {
+        return;
+      }
+      const root = ref.current;
+      const flowNode = flowTextRef.current;
+      const overlayNode = overlayRef.current;
+      let rootRect = null;
+      if (root !== null) {
+        rootRect = root.getBoundingClientRect();
+      }
+      let flowRect = null;
+      if (flowNode !== null) {
+        flowRect = flowNode.getBoundingClientRect();
+      }
+      let overlayRect = null;
+      if (overlayNode !== null) {
+        overlayRect = overlayNode.getBoundingClientRect();
+      }
+      let overlayLiveSnapshot = null;
+      if (root !== null && overlayNode !== null) {
+        overlayLiveSnapshot = measureOverlayBoxSnapshot(root, overlayNode, "live");
+      }
+      let overlayExitSnapshot = null;
+      if (root !== null && overlayNode !== null) {
+        overlayExitSnapshot = measureOverlayBoxSnapshot(root, overlayNode, "exit");
+      }
+      let flowSnapshot = null;
+      if (root !== null && flowNode !== null) {
+        flowSnapshot = measureLiveFlowSnapshot(root, flowNode);
+      }
+      let overlayLiveDrift = null;
+      if (overlayLiveSnapshot !== null) {
+        overlayLiveDrift = summarizeSnapshotDrift(measureSnapshotDrift(measurement.snapshot, overlayLiveSnapshot));
+      }
+      let flowDrift = null;
+      if (flowSnapshot !== null) {
+        flowDrift = summarizeSnapshotDrift(measureSnapshotDrift(measurement.snapshot, flowSnapshot));
+      }
+      debugAnimateTailFramesRef.current.push({
+        frame: debugFrameOrdinalRef.current,
+        stateStage: state.stage,
+        rootBoxPrecise: summarizePreciseRect(rootRect),
+        overlayBoxPrecise: summarizePreciseRect(overlayRect),
+        flowBoxPrecise: summarizePreciseRect(flowRect),
+        overlayLiveGlyphsPrecise: summarizePreciseGlyphs(overlayLiveSnapshot, rootRect),
+        flowGlyphsPrecise: summarizePreciseGlyphs(flowSnapshot, rootRect),
+        overlayLiveNodeStyles: summarizeLiveNodeStyles(overlayNode)
+      });
+      if (debugAnimateTailFramesRef.current.length > 8) {
+        debugAnimateTailFramesRef.current.shift();
+      }
+      let planSummary = null;
+      if (plan !== null) {
+        planSummary = {
+          frameWidth: roundDebugValue(plan.frameWidth),
+          frameHeight: roundDebugValue(plan.frameHeight),
+          layoutInlineSizeFrom: roundDebugValue(plan.layoutInlineSizeFrom),
+          layoutInlineSizeTo: roundDebugValue(plan.layoutInlineSizeTo),
+          sourceRenderText: plan.sourceRenderText,
+          targetRenderText: plan.targetRenderText,
+          visualBridge: {
+            offsetX: roundDebugValue(plan.visualBridge.offsetX),
+            offsetY: roundDebugValue(plan.visualBridge.offsetY)
+          },
+          liveItems: plan.liveItems.length,
+          exitItems: plan.exitItems.length
+        };
+      }
+      logTorphDebug(debugInstanceId, "effect:frame-snapshot", {
+        text,
+        frame: debugFrameOrdinalRef.current,
+        stateStage: state.stage,
+        propText: text,
+        flowText,
+        committed: summarizeDebugMeasurement(committedMeasurement),
+        stateMeasurement: summarizeDebugMeasurement(measurement),
+        plan: planSummary,
+        rootBox: summarizeDebugRect(rootRect),
+        overlayBox: summarizeDebugRect(overlayRect),
+        flowBox: summarizeDebugRect(flowRect),
+        rootOriginDrift: summarizeDebugRootOriginDrift(measurement, rootRect),
+        overlayLive: summarizeDebugSnapshot(overlayLiveSnapshot),
+        overlayLiveGlyphs: summarizeDebugGlyphs(overlayLiveSnapshot),
+        overlayLiveViewportAnchors: summarizeDebugViewportAnchors(overlayLiveSnapshot, rootRect),
+        overlayLiveDrift,
+        overlayExit: summarizeDebugSnapshot(overlayExitSnapshot),
+        overlayExitGlyphs: summarizeDebugGlyphs(overlayExitSnapshot),
+        overlayExitViewportAnchors: summarizeDebugViewportAnchors(overlayExitSnapshot, rootRect),
+        flow: summarizeDebugSnapshot(flowSnapshot),
+        flowGlyphs: summarizeDebugGlyphs(flowSnapshot),
+        flowViewportAnchors: summarizeDebugViewportAnchors(flowSnapshot, rootRect),
+        flowDrift,
+        rootRuntimeStyles: summarizeRootRuntimeStyles(root)
+      });
+      debugFrameOrdinalRef.current += 1;
+      debugFrameHandleRef.current = requestAnimationFrame(captureFrame);
+    };
+    debugFrameHandleRef.current = requestAnimationFrame(captureFrame);
+    return () => {
+      cancelled = true;
+      if (debugFrameHandleRef.current !== null) {
+        cancelAnimationFrame(debugFrameHandleRef.current);
+        debugFrameHandleRef.current = null;
+      }
+    };
+  }, [committedMeasurement, debugInstanceId, flowText, plan, ref, state, text]);
+  useLayoutEffect2(() => {
+    const config = readTorphDebugConfig();
+    if (!shouldRunTorphInstrumentation(config)) {
+      debugPendingIdlePostFramesRef.current = false;
+      if (debugIdlePostFrameHandleRef.current !== null) {
+        logTorphDebug(debugInstanceId, "effect:idle-post-frame-cleanup", {
+          traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+          reason: "instrumentation-disabled",
+          renderOrdinal: debugRenderOrdinal,
+          hookRenderOrdinal,
+          token: debugIdlePostFrameTokenRef.current,
+          handle: debugIdlePostFrameHandleRef.current,
+          domMeasurementRequestKey,
+          domMeasurementKey,
+          measurementBackend
+        });
+        cancelAnimationFrame(debugIdlePostFrameHandleRef.current);
+        debugIdlePostFrameHandleRef.current = null;
+      }
+      return;
+    }
+    if (!debugPendingIdlePostFramesRef.current) {
+      return;
+    }
+    if (state.stage !== "idle" || state.measurement === null) {
+      return;
+    }
+    debugIdlePostFrameOrdinalRef.current = 0;
+    const token = debugIdlePostFrameTokenRef.current;
+    const scheduledRenderOrdinal = debugRenderOrdinal;
+    const scheduledHookRenderOrdinal = hookRenderOrdinal;
+    const measurement = state.measurement;
+    let remainingFrames = 3;
+    let cancelled = false;
+    logTorphDebug(debugInstanceId, "effect:idle-post-frame-arm", {
+      traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+      renderOrdinal: scheduledRenderOrdinal,
+      hookRenderOrdinal: scheduledHookRenderOrdinal,
+      token,
+      text,
+      stateStage: state.stage,
+      flowText,
+      committed: summarizeDebugMeasurement(committedMeasurement),
+      stateMeasurement: summarizeDebugMeasurement(measurement),
+      domMeasurementRequestKey,
+      domMeasurementKey,
+      measurementBackend
+    });
+    const captureIdlePostFrame = () => {
+      if (cancelled) {
+        return;
+      }
+      if (debugPendingIdlePostFramesRef.current) {
+        debugPendingIdlePostFramesRef.current = false;
+      }
+      logTorphDebug(debugInstanceId, "effect:idle-post-frame-fire", {
+        traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+        renderOrdinal: debugRenderOrdinalRef.current,
+        hookRenderOrdinal,
+        scheduledRenderOrdinal,
+        scheduledHookRenderOrdinal,
+        token,
+        frame: debugIdlePostFrameOrdinalRef.current,
+        remainingFrames,
+        text,
+        stateStage: state.stage,
+        flowText
+      });
+      const root = ref.current;
+      const flowNode = flowTextRef.current;
+      const overlayNode = overlayRef.current;
+      if (root === null || flowNode === null || overlayNode === null) {
+        logTorphDebug(debugInstanceId, "effect:idle-post-frame-skip", {
+          traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+          renderOrdinal: debugRenderOrdinalRef.current,
+          hookRenderOrdinal,
+          scheduledRenderOrdinal,
+          scheduledHookRenderOrdinal,
+          token,
+          text,
+          stateStage: state.stage,
+          frame: debugIdlePostFrameOrdinalRef.current,
+          hasRoot: root !== null,
+          hasFlowNode: flowNode !== null,
+          hasOverlayNode: overlayNode !== null,
+          flowText,
+          committed: summarizeDebugMeasurement(committedMeasurement),
+          stateMeasurement: summarizeDebugMeasurement(measurement)
+        });
+        return;
+      }
+      const rootRect = root.getBoundingClientRect();
+      const flowRect = flowNode.getBoundingClientRect();
+      const overlayRect = overlayNode.getBoundingClientRect();
+      const flowSnapshot = measureLiveFlowSnapshot(root, flowNode);
+      let visibleSnapshot = null;
+      if (overlayNode !== null) {
+        visibleSnapshot = measureOverlayBoxSnapshot(root, overlayNode, "live");
+      }
+      let flowDrift = null;
+      if (flowSnapshot !== null) {
+        flowDrift = summarizeSnapshotDrift(measureSnapshotDrift(measurement.snapshot, flowSnapshot));
+      }
+      let visibleDrift = null;
+      if (visibleSnapshot !== null) {
+        visibleDrift = summarizeSnapshotDrift(measureSnapshotDrift(measurement.snapshot, visibleSnapshot));
+      }
+      logTorphDebug(debugInstanceId, "effect:idle-post-frame", {
+        traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+        renderOrdinal: debugRenderOrdinalRef.current,
+        hookRenderOrdinal,
+        scheduledRenderOrdinal,
+        scheduledHookRenderOrdinal,
+        token,
+        text,
+        frame: debugIdlePostFrameOrdinalRef.current,
+        stateStage: state.stage,
+        propText: text,
+        flowText,
+        committed: summarizeDebugMeasurement(committedMeasurement),
+        stateMeasurement: summarizeDebugMeasurement(measurement),
+        rootBox: summarizeDebugRect(rootRect),
+        rootBoxPrecise: summarizePreciseRect(rootRect),
+        overlayBox: summarizeDebugRect(overlayRect),
+        overlayBoxPrecise: summarizePreciseRect(overlayRect),
+        flowBox: summarizeDebugRect(flowRect),
+        flowBoxPrecise: summarizePreciseRect(flowRect),
+        rootRuntimeStyles: summarizeRootRuntimeStyles(root),
+        rootOriginDrift: summarizeDebugRootOriginDrift(measurement, rootRect),
+        flow: summarizeDebugSnapshot(flowSnapshot),
+        flowGlyphs: summarizeDebugGlyphs(flowSnapshot),
+        flowGlyphsPrecise: summarizePreciseGlyphs(flowSnapshot, rootRect),
+        flowViewportAnchors: summarizeDebugViewportAnchors(flowSnapshot, rootRect),
+        flowDrift,
+        visible: summarizeDebugSnapshot(visibleSnapshot),
+        visibleGlyphs: summarizeDebugGlyphs(visibleSnapshot),
+        visibleGlyphsPrecise: summarizePreciseGlyphs(visibleSnapshot, rootRect),
+        visibleViewportAnchors: summarizeDebugViewportAnchors(visibleSnapshot, rootRect),
+        visibleDrift,
+        visibleLiveNodeStyles: summarizeLiveNodeStyles(overlayNode)
+      });
+      debugIdlePostFrameOrdinalRef.current += 1;
+      remainingFrames -= 1;
+      if (remainingFrames <= 0) {
+        debugIdlePostFrameHandleRef.current = null;
+        return;
+      }
+      debugIdlePostFrameHandleRef.current = requestAnimationFrame(captureIdlePostFrame);
+      logTorphDebug(debugInstanceId, "effect:idle-post-frame-reschedule", {
+        traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+        renderOrdinal: debugRenderOrdinalRef.current,
+        hookRenderOrdinal,
+        scheduledRenderOrdinal,
+        scheduledHookRenderOrdinal,
+        token,
+        handle: debugIdlePostFrameHandleRef.current,
+        nextFrame: debugIdlePostFrameOrdinalRef.current,
+        remainingFrames,
+        text,
+        stateStage: state.stage,
+        flowText
+      });
+    };
+    debugIdlePostFrameHandleRef.current = requestAnimationFrame(captureIdlePostFrame);
+    logTorphDebug(debugInstanceId, "effect:idle-post-frame-schedule", {
+      traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+      renderOrdinal: scheduledRenderOrdinal,
+      hookRenderOrdinal: scheduledHookRenderOrdinal,
+      token,
+      handle: debugIdlePostFrameHandleRef.current,
+      remainingFrames,
+      text,
+      stateStage: state.stage,
+      flowText,
+      domMeasurementRequestKey,
+      domMeasurementKey,
+      measurementBackend
+    });
+    return () => {
+      cancelled = true;
+      if (debugIdlePostFrameHandleRef.current !== null) {
+        logTorphDebug(debugInstanceId, "effect:idle-post-frame-cleanup", {
+          traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+          reason: "effect-rerun-or-unmount",
+          renderOrdinal: debugRenderOrdinalRef.current,
+          hookRenderOrdinal,
+          scheduledRenderOrdinal,
+          scheduledHookRenderOrdinal,
+          token,
+          handle: debugIdlePostFrameHandleRef.current,
+          completedFrames: debugIdlePostFrameOrdinalRef.current,
+          remainingFrames,
+          text,
+          stateStage: state.stage,
+          flowText,
+          domMeasurementRequestKey,
+          domMeasurementKey,
+          measurementBackend
+        });
+        cancelAnimationFrame(debugIdlePostFrameHandleRef.current);
+        debugIdlePostFrameHandleRef.current = null;
+      }
+    };
+  }, [committedMeasurement, debugInstanceId, flowText, ref, state, text]);
+  useLayoutEffect2(() => {
+    return () => {
+      if (debugIdlePostFrameHandleRef.current !== null) {
+        logTorphDebug(debugInstanceId, "effect:idle-post-frame-cleanup", {
+          traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+          reason: "component-unmount",
+          renderOrdinal: debugRenderOrdinalRef.current,
+          token: debugIdlePostFrameTokenRef.current,
+          handle: debugIdlePostFrameHandleRef.current
+        });
+        cancelAnimationFrame(debugIdlePostFrameHandleRef.current);
+        debugIdlePostFrameHandleRef.current = null;
+      }
+    };
+  }, []);
   let measurementLayer = null;
   if (shouldRenderMeasurementLayer) {
     measurementLayer = /* @__PURE__ */ jsxDEV(MeasurementLayer, {
       layerRef: measurementLayerRef,
       layoutContext,
       text: renderText,
-      segments,
       useContentInlineSize
     }, undefined, false, undefined, this);
   }
   let overlay = null;
-  if (shouldRenderOverlay) {
+  if (shouldRenderGlyphLayer2 && visibleGlyphPlan !== null) {
     overlay = /* @__PURE__ */ jsxDEV(MorphOverlay, {
+      overlayRef,
       stage: state.stage,
-      plan
+      plan: visibleGlyphPlan,
+      sourceSliceWhiteSpace,
+      targetSliceWhiteSpace
     }, undefined, false, undefined, this);
   }
   return /* @__PURE__ */ jsxDEV("div", {
@@ -4006,7 +5556,7 @@ function ActiveTorph({
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("span", {
         "aria-hidden": "true",
-        style: getFallbackTextStyle(shouldRenderOverlay),
+        style: getFallbackTextStyle(shouldHideFlowText),
         children: /* @__PURE__ */ jsxDEV("span", {
           ref: flowTextRef,
           children: flowText
@@ -4027,21 +5577,5 @@ function Torph({
   }, undefined, false, undefined, this);
 }
 export {
-  supportsIntrinsicWidthLock,
-  resolveMorphFrameBounds,
-  resolveFlowText,
-  resolveContentWidthLockInlineSize,
-  pairMorphCharacters,
-  needsMeasurementLayer,
-  measureMorphSnapshotFromLayer,
-  getRootStyle,
-  getRootDisplay,
-  getMeasurementLayerStyle,
-  getLiveTransition,
-  getLiveTransform,
-  getExitTransition,
-  getExitTransform,
-  buildMorphVisualBridge,
-  buildMorphPlan,
   Torph
 };