@grahlnn/comps 0.1.7 → 0.1.8

package/dist/index.js

@@ -2600,20 +2600,273 @@ var SHARED_GLYPH_TYPOGRAPHY_STYLE = {
   wordSpacing: "inherit",
   direction: "inherit"
 };
-var MEASUREMENT_GLYPH_STYLE = {
-  ...SHARED_GLYPH_TYPOGRAPHY_STYLE,
-  display: "inline"
-};
 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",
-  overflow: "visible",
-  transformOrigin: "left top",
-  whiteSpace: "pre"
+  minWidth: 0,
+  whiteSpace: "inherit"
 };
 var graphemeSegmenter = null;
 var domMeasurementService = null;
+var torphDebugInstanceOrdinal = 0;
+var TORPH_TRACE_MAX_BYTES = 4 * 1024 * 1024;
+var TORPH_TRACE_MAX_LINES = 4000;
+var TORPH_TRACE_SCHEMA_VERSION = 2;
+function nextTorphDebugInstanceId() {
+  torphDebugInstanceOrdinal += 1;
+  return torphDebugInstanceOrdinal;
+}
+function readTorphDebugConfig() {
+  const scope = globalThis;
+  return scope.__TORPH_DEBUG__ ?? null;
+}
+function shouldCaptureTorphTrace(config) {
+  if (config === null) {
+    return true;
+  }
+  if (typeof config === "boolean") {
+    return config;
+  }
+  if (config.capture === false) {
+    return false;
+  }
+  return true;
+}
+function isTorphDebugEnabled(config) {
+  if (config === null) {
+    return false;
+  }
+  if (typeof config === "boolean") {
+    return config;
+  }
+  if (config.console !== undefined) {
+    return config.console;
+  }
+  return config.enabled !== false;
+}
+function shouldRunTorphInstrumentation(config) {
+  if (shouldCaptureTorphTrace(config)) {
+    return true;
+  }
+  return isTorphDebugEnabled(config);
+}
+function getTorphTraceStore() {
+  const scope = globalThis;
+  let store = scope.__TORPH_TRACE_STORE__;
+  if (store !== undefined) {
+    return store;
+  }
+  store = {
+    lines: [],
+    nextSeq: 1,
+    totalBytes: 0
+  };
+  scope.__TORPH_TRACE_STORE__ = store;
+  return store;
+}
+function getTorphTraceText() {
+  return getTorphTraceStore().lines.join("");
+}
+function clearTorphTrace() {
+  const store = getTorphTraceStore();
+  store.lines = [];
+  store.nextSeq = 1;
+  store.totalBytes = 0;
+}
+function downloadTorphTrace(filename) {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  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);
+  }
+}
+function roundDebugValue(value) {
+  if (value === null || value === undefined) {
+    return value;
+  }
+  return Math.round(value * 100) / 100;
+}
+function summarizeDebugSnapshot(snapshot) {
+  if (snapshot === null) {
+    return null;
+  }
+  return {
+    text: snapshot.text,
+    renderText: snapshot.renderText,
+    width: roundDebugValue(snapshot.width),
+    height: roundDebugValue(snapshot.height),
+    graphemes: snapshot.graphemes.length
+  };
+}
+function summarizeDebugMeasurement(measurement) {
+  if (measurement === null) {
+    return null;
+  }
+  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 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 collectDebugAnchorIndices(length) {
+  const indices = new Set;
+  if (length <= 0) {
+    return [];
+  }
+  indices.add(0);
+  if (length > 1) {
+    indices.add(1);
+    indices.add(length - 2);
+  }
+  if (length > 2) {
+    indices.add(Math.floor((length - 1) / 2));
+  }
+  indices.add(length - 1);
+  return Array.from(indices).sort((left, right) => left - right);
+}
+function summarizeDebugViewportAnchors(snapshot, rootRect) {
+  if (snapshot === null || rootRect === null) {
+    return null;
+  }
+  const anchors = [];
+  const anchorIndices = collectDebugAnchorIndices(snapshot.graphemes.length);
+  for (const index of anchorIndices) {
+    const grapheme = snapshot.graphemes[index];
+    if (grapheme === undefined) {
+      continue;
+    }
+    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)
+    });
+  }
+  return anchors;
+}
+function summarizeDebugRootOriginDrift(measurement, rootRect) {
+  if (measurement === null || rootRect === null) {
+    return null;
+  }
+  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;
+  }
+  if (captureTrace) {
+    appendTorphTrace(instanceId, event, payload);
+  }
+  if (logToConsole) {
+    console.log(`[Torph#${instanceId}] ${event}`, payload);
+  }
+}
 function parsePx(value) {
   const parsed = Number.parseFloat(value);
   if (Number.isFinite(parsed)) {
@@ -2701,6 +2954,21 @@ function isSingleLineSnapshot(snapshot) {
   const firstTop = snapshot.graphemes[0].top;
   return snapshot.graphemes.every((grapheme) => nearlyEqual(grapheme.top, firstTop, MORPH.lineGroupingEpsilon));
 }
+function countSnapshotLines(snapshot) {
+  if (snapshot.graphemes.length === 0) {
+    return 0;
+  }
+  let lineCount = 1;
+  let currentTop = snapshot.graphemes[0].top;
+  for (let index = 1;index < snapshot.graphemes.length; index += 1) {
+    const top = snapshot.graphemes[index].top;
+    if (!nearlyEqual(top, currentTop, MORPH.lineGroupingEpsilon)) {
+      currentTop = top;
+      lineCount += 1;
+    }
+  }
+  return lineCount;
+}
 function acquireMorphMeasurementInvalidationListeners() {
   activeMorphMeasurementConsumers += 1;
   if (detachMorphMeasurementInvalidationListeners === null) {
@@ -2791,25 +3059,6 @@ function getSegmenter() {
   });
   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;
-}
 function getDomMeasurementService() {
   if (domMeasurementService !== null) {
     return domMeasurementService;
@@ -2831,25 +3080,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,
@@ -2959,51 +3193,38 @@ function rememberCachedMorphSnapshot(cache, cacheKey, snapshot) {
     }
   }
 }
-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 +3235,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,7 +3282,7 @@ function measureMorphSnapshotWithDomService({
     layoutContext,
     useContentInlineSize
   });
-  syncMeasurementGlyphNodes(service, segments);
+  service.host.textContent = renderText;
   return measureMorphSnapshotFromLayer(text, renderText, segments, service.host);
 }
 function readRootOrigin(node) {
@@ -3083,6 +3295,169 @@ function readFlowInlineSize(node) {
   }
   return node.getBoundingClientRect().width;
 }
+function readFlowLineCount(node) {
+  if (node === null) {
+    return null;
+  }
+  const rects = Array.from(node.getClientRects());
+  if (rects.length === 0) {
+    if ((node.textContent ?? "").length === 0) {
+      return 0;
+    }
+    return 1;
+  }
+  let lineCount = 0;
+  let currentTop = null;
+  for (const rect of rects) {
+    if (currentTop === null || !nearlyEqual(rect.top, currentTop, MORPH.lineGroupingEpsilon)) {
+      currentTop = rect.top;
+      lineCount += 1;
+    }
+  }
+  return lineCount;
+}
+function readFirstTextNode(node) {
+  if (node === null) {
+    return null;
+  }
+  for (const childNode of node.childNodes) {
+    if (childNode.nodeType === Node.TEXT_NODE) {
+      return childNode;
+    }
+  }
+  return null;
+}
+function measureLiveFlowSnapshot(root, flowTextNode) {
+  const textNode = readFirstTextNode(flowTextNode);
+  if (textNode === null) {
+    return null;
+  }
+  const text = textNode.data;
+  const renderText = text;
+  if (renderText.length === 0) {
+    return {
+      text,
+      renderText,
+      width: 0,
+      height: 0,
+      graphemes: []
+    };
+  }
+  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,
+    width,
+    height,
+    graphemes
+  };
+}
+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
+      });
+    }
+  }
+  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 measureOverlayBoxSnapshot(root, overlayRoot, role) {
+  const nodes = overlayRoot.querySelectorAll(`[data-morph-role='${role}']`);
+  if (nodes.length === 0) {
+    return null;
+  }
+  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 {
+    text: renderText,
+    renderText,
+    width,
+    height,
+    graphemes
+  };
+}
 function getTrustedPretextMeasurementBackend(text, renderText, layoutContext, useContentInlineSize) {
   const backend = getPretextMorphMeasurementBackend(text, layoutContext);
   if (backend !== "probe") {
@@ -3123,16 +3498,48 @@ function shouldMeasureUsingContentInlineSize(layoutContext, layoutHint) {
   }
   return nearlyEqual(layoutHint.layoutInlineSize, resolveContentWidthLockInlineSize(layoutHint), MORPH.contentWidthLockEpsilon);
 }
+function shouldHealIdleMeasurementFromFlow(measurement, flowLineCount) {
+  if (flowLineCount !== 1) {
+    return false;
+  }
+  return countSnapshotLines(measurement.snapshot) > 1;
+}
+function refineMeasurementWithLiveGeometry(measurement, liveGeometry) {
+  const sameFlowInlineSize = measurement.flowInlineSize === null && liveGeometry.flowInlineSize === null || measurement.flowInlineSize !== null && liveGeometry.flowInlineSize !== null && nearlyEqual(measurement.flowInlineSize, liveGeometry.flowInlineSize);
+  if (sameFlowInlineSize && nearlyEqual(measurement.rootOrigin.left, liveGeometry.rootOrigin.left) && nearlyEqual(measurement.rootOrigin.top, liveGeometry.rootOrigin.top)) {
+    return measurement;
+  }
+  return {
+    snapshot: measurement.snapshot,
+    layoutInlineSize: measurement.layoutInlineSize,
+    reservedInlineSize: measurement.reservedInlineSize,
+    flowInlineSize: liveGeometry.flowInlineSize,
+    rootOrigin: liveGeometry.rootOrigin
+  };
+}
+function refineMeasurementFromLiveNodes(measurement, root, flowTextNode) {
+  if (root === null) {
+    return measurement;
+  }
+  return refineMeasurementWithLiveGeometry(measurement, {
+    flowInlineSize: readFlowInlineSize(flowTextNode),
+    rootOrigin: readRootOrigin(root)
+  });
+}
 function createMorphMeasurementRequest({
   text,
   layoutContext,
-  layoutHint
+  layoutHint,
+  forceContentInlineSize = false
 }) {
   if (layoutContext === null) {
     return null;
   }
   const renderText = getPretextMorphRenderedText(text, layoutContext);
-  const useContentInlineSize = shouldMeasureUsingContentInlineSize(layoutContext, layoutHint);
+  let useContentInlineSize = shouldMeasureUsingContentInlineSize(layoutContext, layoutHint);
+  if (forceContentInlineSize) {
+    useContentInlineSize = true;
+  }
   const measurementBackend = getTrustedPretextMeasurementBackend(text, renderText, layoutContext, useContentInlineSize);
   let segments = readCachedMorphSegments(renderText);
   if (measurementBackend === "pretext") {
@@ -3348,6 +3755,8 @@ function buildMorphPlan(previous, next, visualBridge = ZERO_BRIDGE) {
     frameHeight: frame.height,
     layoutInlineSizeFrom: previous.layoutInlineSize,
     layoutInlineSizeTo: next.layoutInlineSize,
+    sourceRenderText: previous.snapshot.renderText,
+    targetRenderText: next.snapshot.renderText,
     visualBridge,
     liveItems: next.snapshot.graphemes.map((grapheme) => {
       const move = movesByDestinationKey.get(grapheme.key);
@@ -3466,6 +3875,7 @@ function commitStaticMeasurement(session, measurement, setState) {
 function scheduleMorphTimeline({
   session,
   timeline,
+  finalizeMeasurement,
   measurement,
   plan,
   setState
@@ -3486,12 +3896,13 @@ function scheduleMorphTimeline({
       timeline.animateFrame = null;
       timeline.finalizeTimer = window.setTimeout(() => {
         timeline.finalizeTimer = null;
-        commitStaticMeasurement(session, session.target ?? measurement, setState);
+        commitStaticMeasurement(session, finalizeMeasurement(session.target ?? measurement), setState);
       }, MORPH.durationMs);
     });
   });
 }
 function startMorph({
+  finalizeMeasurement,
   nextMeasurement,
   session,
   timeline,
@@ -3518,12 +3929,14 @@ function startMorph({
   scheduleMorphTimeline({
     session,
     timeline,
+    finalizeMeasurement,
     measurement: nextMeasurement,
     plan,
     setState
   });
 }
 function reconcileMorphChange({
+  finalizeMeasurement,
   root,
   measurementLayer,
   measurementBackend,
@@ -3578,6 +3991,7 @@ function reconcileMorphChange({
     return nextMeasurement;
   }
   startMorph({
+    finalizeMeasurement,
     nextMeasurement,
     session,
     timeline,
@@ -3708,7 +4122,7 @@ function getMeasurementLayerStyle(layoutContext, useContentInlineSize = false) {
   };
 }
 function resolveFlowText(committedMeasurement, stateMeasurement, text) {
-  return committedMeasurement?.snapshot.text ?? stateMeasurement?.snapshot.text ?? text;
+  return stateMeasurement?.snapshot.text ?? committedMeasurement?.snapshot.text ?? text;
 }
 function getOverlayStyle(plan) {
   return {
@@ -3736,7 +4150,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 +4162,52 @@ 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) {
+  return {
+    ...CONTEXT_SLICE_TEXT_STYLE,
+    left: -item.left,
+    top: -item.top,
+    width: layoutInlineSize
+  };
+}
+function MorphOverlay({
+  overlayRef,
+  stage,
+  plan
+}) {
   let exitItems = [];
   if (stage !== "idle") {
     exitItems = plan.exitItems;
   }
   return /* @__PURE__ */ jsxDEV("div", {
+    ref: overlayRef,
     "aria-hidden": "true",
     style: getOverlayStyle(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", {
+          style: getContextSliceStyle(plan.layoutInlineSizeFrom, item),
+          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,
         style: getLiveGlyphStyle(item, stage, plan.visualBridge),
-        children: item.glyph
+        children: /* @__PURE__ */ jsxDEV("span", {
+          style: getContextSliceStyle(plan.layoutInlineSizeTo, item),
+          children: plan.targetRenderText
+        }, undefined, false, undefined, this)
       }, item.key, false, undefined, this))
     ]
   }, undefined, true, undefined, this);
@@ -3779,55 +4216,63 @@ 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 debugInstanceIdRef = useRef(null);
   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 debugDriftSignatureRef = useRef(null);
   const [domMeasurementRequestKey, setDomMeasurementRequestKey] = useState(null);
+  const [forceContentMeasurementText, setForceContentMeasurementText] = useState(null);
   const [state, setState] = useState(EMPTY_STATE);
+  if (debugInstanceIdRef.current === null) {
+    debugInstanceIdRef.current = nextTorphDebugInstanceId();
+  }
   let measurementHint = sessionRef.current.committed;
   if (sessionRef.current.animating) {
     measurementHint = sessionRef.current.target ?? sessionRef.current.committed;
   }
+  const forceContentInlineSize = forceContentMeasurementText === text;
   const measurementRequest = useMemo(() => createMorphMeasurementRequest({
     text,
     layoutContext,
-    layoutHint: measurementHint
-  }), [text, layoutContext, measurementHint]);
+    layoutHint: measurementHint,
+    forceContentInlineSize
+  }), [text, layoutContext, measurementHint, forceContentInlineSize]);
   const renderText = measurementRequest?.renderText ?? text;
   const useContentInlineSize = measurementRequest?.useContentInlineSize ?? false;
   const measurementBackend = measurementRequest?.measurementBackend ?? null;
   const segments = measurementRequest?.segments ?? EMPTY_SEGMENTS;
   const domMeasurementKey = measurementRequest?.domMeasurementKey ?? null;
   useLayoutEffect(() => {
+    const config = readTorphDebugConfig();
+    if (!shouldCaptureTorphTrace(config)) {
+      return;
+    }
+    ensureTorphTraceApi();
+  }, []);
+  useLayoutEffect(() => {
+    const finalizeMeasurement = (measurement) => refineMeasurementFromLiveNodes(measurement, ref.current, flowTextRef.current);
     if (ref.current === null || layoutContext === null) {
       completedDomMeasurementKeyRef.current = null;
       if (domMeasurementRequestKey !== null) {
         setDomMeasurementRequestKey(null);
       }
       reconcileMorphChange({
+        finalizeMeasurement,
         root: ref.current,
         measurementLayer: measurementLayerRef.current,
         measurementBackend,
@@ -3853,6 +4298,7 @@ function useMorphTransition(text, className) {
           setDomMeasurementRequestKey(null);
         }
         reconcileMorphChange({
+          finalizeMeasurement,
           root: ref.current,
           measurementLayer: null,
           measurementBackend,
@@ -3875,7 +4321,8 @@ function useMorphTransition(text, className) {
         if (measurementLayerRef.current === null) {
           return;
         }
-        const nextMeasurement = reconcileMorphChange({
+        const nextMeasurement2 = reconcileMorphChange({
+          finalizeMeasurement,
           root: ref.current,
           measurementLayer: measurementLayerRef.current,
           measurementBackend,
@@ -3888,9 +4335,9 @@ 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;
@@ -3908,7 +4355,8 @@ function useMorphTransition(text, className) {
     if (domMeasurementRequestKey !== null) {
       setDomMeasurementRequestKey(null);
     }
-    reconcileMorphChange({
+    const nextMeasurement = reconcileMorphChange({
+      finalizeMeasurement,
       root: ref.current,
       measurementLayer: measurementLayerRef.current,
       measurementBackend,
@@ -3940,12 +4388,76 @@ function useMorphTransition(text, className) {
       session: sessionRef.current
     });
   }, [layoutContext, state]);
+  useLayoutEffect(() => {
+    if (forceContentMeasurementText !== null && forceContentMeasurementText !== text) {
+      setForceContentMeasurementText(null);
+      return;
+    }
+    if (state.stage !== "idle" || state.measurement === null) {
+      return;
+    }
+    const flowLineCount = readFlowLineCount(flowTextRef.current);
+    const shouldHeal = shouldHealIdleMeasurementFromFlow(state.measurement, flowLineCount);
+    if (shouldHeal) {
+      if (forceContentMeasurementText !== text) {
+        setForceContentMeasurementText(text);
+      }
+      return;
+    }
+    if (forceContentMeasurementText === text) {
+      setForceContentMeasurementText(null);
+    }
+  }, [forceContentMeasurementText, state, text]);
+  useLayoutEffect(() => {
+    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)
+    });
+    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]);
   useLayoutEffect(() => {
     return () => {
       cancelTimeline(timelineRef.current);
     };
   }, []);
   return {
+    debugInstanceId: debugInstanceIdRef.current,
     committedMeasurement: sessionRef.current.committed,
     domMeasurementRequestKey,
     flowTextRef,
@@ -3962,7 +4474,16 @@ function ActiveTorph({
   text,
   className
 }) {
+  const overlayRef = useRef(null);
+  const debugFinalizeSignatureRef = useRef(null);
+  const debugFrameHandleRef = useRef(null);
+  const debugFrameOrdinalRef = useRef(0);
+  const debugIdlePostFrameHandleRef = useRef(null);
+  const debugIdlePostFrameOrdinalRef = useRef(0);
+  const debugPendingIdlePostFramesRef = useRef(false);
+  const debugPreviousStageRef = useRef(null);
   const {
+    debugInstanceId,
     committedMeasurement,
     domMeasurementRequestKey,
     flowTextRef,
@@ -3978,19 +4499,338 @@ function ActiveTorph({
   const shouldRenderOverlay = state.stage !== "idle" && plan !== null;
   const shouldRenderMeasurementLayer = domMeasurementRequestKey !== null;
   const flowText = resolveFlowText(committedMeasurement, state.measurement, text);
+  useLayoutEffect(() => {
+    const config = readTorphDebugConfig();
+    if (!shouldRunTorphInstrumentation(config)) {
+      return;
+    }
+    logTorphDebug(debugInstanceId, "effect:trace-meta", {
+      traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
+      includesIdlePostFrame: true,
+      includesViewportAnchors: true,
+      includesRootOriginRefine: true
+    });
+  }, [debugInstanceId]);
+  useLayoutEffect(() => {
+    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;
+      }
+      logTorphDebug(debugInstanceId, "effect:stage-transition", {
+        text,
+        fromStage: previousStage,
+        toStage: state.stage,
+        committed: summarizeDebugMeasurement(committedMeasurement),
+        stateMeasurement: summarizeDebugMeasurement(state.measurement),
+        flowText
+      });
+      debugPreviousStageRef.current = state.stage;
+    }
+  }, [committedMeasurement, debugInstanceId, flowText, state, text]);
+  useLayoutEffect(() => {
+    const config = readTorphDebugConfig();
+    if (!shouldRunTorphInstrumentation(config)) {
+      if (debugFrameHandleRef.current !== null) {
+        cancelAnimationFrame(debugFrameHandleRef.current);
+        debugFrameHandleRef.current = null;
+      }
+      return;
+    }
+    if (state.stage === "idle" || state.measurement === null) {
+      if (debugFrameHandleRef.current !== null) {
+        cancelAnimationFrame(debugFrameHandleRef.current);
+        debugFrameHandleRef.current = null;
+      }
+      debugFrameOrdinalRef.current = 0;
+      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));
+      }
+      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),
+        overlayLiveViewportAnchors: summarizeDebugViewportAnchors(overlayLiveSnapshot, rootRect),
+        overlayLiveDrift,
+        overlayExit: summarizeDebugSnapshot(overlayExitSnapshot),
+        overlayExitViewportAnchors: summarizeDebugViewportAnchors(overlayExitSnapshot, rootRect),
+        flow: summarizeDebugSnapshot(flowSnapshot),
+        flowViewportAnchors: summarizeDebugViewportAnchors(flowSnapshot, rootRect),
+        flowDrift
+      });
+      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]);
+  useLayoutEffect(() => {
+    const config = readTorphDebugConfig();
+    if (!shouldRunTorphInstrumentation(config)) {
+      debugPendingIdlePostFramesRef.current = false;
+      if (debugIdlePostFrameHandleRef.current !== null) {
+        cancelAnimationFrame(debugIdlePostFrameHandleRef.current);
+        debugIdlePostFrameHandleRef.current = null;
+      }
+      return;
+    }
+    if (!debugPendingIdlePostFramesRef.current) {
+      return;
+    }
+    if (state.stage !== "idle" || state.measurement === null) {
+      return;
+    }
+    debugPendingIdlePostFramesRef.current = false;
+    debugIdlePostFrameOrdinalRef.current = 0;
+    const measurement = state.measurement;
+    let remainingFrames = 3;
+    let cancelled = false;
+    const captureIdlePostFrame = () => {
+      if (cancelled) {
+        return;
+      }
+      const root = ref.current;
+      const flowNode = flowTextRef.current;
+      if (root === null || flowNode === null) {
+        return;
+      }
+      const rootRect = root.getBoundingClientRect();
+      const flowRect = flowNode.getBoundingClientRect();
+      const flowSnapshot = measureLiveFlowSnapshot(root, flowNode);
+      let flowDrift = null;
+      if (flowSnapshot !== null) {
+        flowDrift = summarizeSnapshotDrift(measureSnapshotDrift(measurement.snapshot, flowSnapshot));
+      }
+      logTorphDebug(debugInstanceId, "effect:idle-post-frame", {
+        text,
+        frame: debugIdlePostFrameOrdinalRef.current,
+        stateStage: state.stage,
+        propText: text,
+        flowText,
+        committed: summarizeDebugMeasurement(committedMeasurement),
+        stateMeasurement: summarizeDebugMeasurement(measurement),
+        rootBox: summarizeDebugRect(rootRect),
+        flowBox: summarizeDebugRect(flowRect),
+        rootOriginDrift: summarizeDebugRootOriginDrift(measurement, rootRect),
+        flow: summarizeDebugSnapshot(flowSnapshot),
+        flowViewportAnchors: summarizeDebugViewportAnchors(flowSnapshot, rootRect),
+        flowDrift
+      });
+      debugIdlePostFrameOrdinalRef.current += 1;
+      remainingFrames -= 1;
+      if (remainingFrames <= 0) {
+        debugIdlePostFrameHandleRef.current = null;
+        return;
+      }
+      debugIdlePostFrameHandleRef.current = requestAnimationFrame(captureIdlePostFrame);
+    };
+    debugIdlePostFrameHandleRef.current = requestAnimationFrame(captureIdlePostFrame);
+    return () => {
+      cancelled = true;
+      if (debugIdlePostFrameHandleRef.current !== null) {
+        cancelAnimationFrame(debugIdlePostFrameHandleRef.current);
+        debugIdlePostFrameHandleRef.current = null;
+      }
+    };
+  }, [committedMeasurement, debugInstanceId, flowText, ref, state, text]);
+  useLayoutEffect(() => {
+    return () => {
+      if (debugIdlePostFrameHandleRef.current !== null) {
+        cancelAnimationFrame(debugIdlePostFrameHandleRef.current);
+        debugIdlePostFrameHandleRef.current = null;
+      }
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const config = readTorphDebugConfig();
+    if (!shouldRunTorphInstrumentation(config)) {
+      debugFinalizeSignatureRef.current = null;
+      return;
+    }
+    if (state.stage !== "animate" || state.measurement === null || plan === null) {
+      debugFinalizeSignatureRef.current = null;
+      return;
+    }
+    const root = ref.current;
+    const overlayNode = overlayRef.current;
+    const flowNode = flowTextRef.current;
+    if (root === null || overlayNode === null || flowNode === null) {
+      debugFinalizeSignatureRef.current = null;
+      return;
+    }
+    const measurement = state.measurement;
+    let handled = false;
+    const capture = (event) => {
+      if (handled) {
+        return;
+      }
+      if (event.propertyName !== "transform") {
+        return;
+      }
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) {
+        return;
+      }
+      if (target.dataset.morphRole !== "live") {
+        return;
+      }
+      handled = true;
+      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,
+        overlayLiveDrift: summarizeSnapshotDrift(overlayLiveDrift),
+        flowDrift: summarizeSnapshotDrift(flowDrift),
+        overlayWidth: roundDebugValue(overlayRect.width),
+        rootWidth: roundDebugValue(rootRect.width)
+      });
+      if (debugFinalizeSignatureRef.current === signature) {
+        return;
+      }
+      debugFinalizeSignatureRef.current = signature;
+      logTorphDebug(debugInstanceId, "effect:animate-finalize-snapshot", {
+        text,
+        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)
+        },
+        overlayLive: summarizeDebugSnapshot(overlayLiveSnapshot),
+        overlayLiveDrift: summarizeSnapshotDrift(overlayLiveDrift),
+        overlayExit: summarizeDebugSnapshot(overlayExitSnapshot),
+        flow: summarizeDebugSnapshot(flowSnapshot),
+        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)
+        }
+      });
+    };
+    overlayNode.addEventListener("transitionend", capture);
+    return () => {
+      overlayNode.removeEventListener("transitionend", capture);
+    };
+  }, [debugInstanceId, plan, ref, state, text]);
   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) {
     overlay = /* @__PURE__ */ jsxDEV(MorphOverlay, {
+      overlayRef,
       stage: state.stage,
       plan
     }, undefined, false, undefined, this);
@@ -4028,9 +4868,11 @@ function Torph({
 }
 export {
   supportsIntrinsicWidthLock,
+  shouldHealIdleMeasurementFromFlow,
   resolveMorphFrameBounds,
   resolveFlowText,
   resolveContentWidthLockInlineSize,
+  refineMeasurementWithLiveGeometry,
   pairMorphCharacters,
   needsMeasurementLayer,
   measureMorphSnapshotFromLayer,

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

@@ -40,6 +40,8 @@ export type MorphRenderPlan = {
     frameHeight: number;
     layoutInlineSizeFrom: number;
     layoutInlineSizeTo: number;
+    sourceRenderText: string;
+    targetRenderText: string;
     visualBridge: MorphVisualBridge;
     liveItems: MorphLiveItem[];
     exitItems: MorphCharacterLayout[];
@@ -81,6 +83,14 @@ type GlyphPairing = GlyphMove | GlyphEnter | GlyphExit;
 export declare function needsMeasurementLayer(measurementBackend: PretextMorphMeasurementBackend, renderText: string): boolean;
 export declare function measureMorphSnapshotFromLayer(text: string, renderText: string, segments: readonly MorphSegment[], layer: HTMLElement | null): MorphSnapshot;
 export declare function resolveContentWidthLockInlineSize(layoutHint: MorphMeasurement): number;
+export declare function shouldHealIdleMeasurementFromFlow(measurement: MorphMeasurement, flowLineCount: number | null): boolean;
+export declare function refineMeasurementWithLiveGeometry(measurement: MorphMeasurement, liveGeometry: {
+    flowInlineSize: number | null;
+    rootOrigin: {
+        left: number;
+        top: number;
+    };
+}): MorphMeasurement;
 export declare function pairMorphCharacters(previous: MorphCharacterLayout[], next: MorphCharacterLayout[]): GlyphPairing[];
 export declare function resolveMorphFrameBounds(previous: MorphSnapshot, next: MorphSnapshot): {
     width: number;

package/package.json

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