@grahlnn/comps 0.1.8 → 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,299 +2573,708 @@ 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 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 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 getFadeDuration(fraction) {
+  return Math.min(MORPH.durationMs * fraction, MORPH.maxFadeMs);
 }
-function shouldCaptureTorphTrace(config) {
-  if (config === null) {
-    return true;
+function getOverlayStyle(stage, plan) {
+  if (stage === "idle") {
+    return OVERLAY_STYLE;
   }
-  if (typeof config === "boolean") {
-    return config;
+  return {
+    ...OVERLAY_STYLE,
+    right: "auto",
+    bottom: "auto",
+    width: plan.frameWidth,
+    height: plan.frameHeight
+  };
+}
+function getLiveTransform(item, stage, visualBridge) {
+  if (stage !== "prepare") {
+    return "translate(0px, 0px)";
   }
-  if (config.capture === false) {
-    return false;
+  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 true;
+  return `translate(${visualBridge.offsetX}px, ${visualBridge.offsetY}px)`;
 }
-function isTorphDebugEnabled(config) {
-  if (config === null) {
-    return false;
+function getLiveTransition(item, stage) {
+  if (stage !== "animate") {
+    return;
   }
-  if (typeof config === "boolean") {
-    return config;
+  if (item.kind === "enter") {
+    return `opacity ${getFadeDuration(0.5)}ms linear ${getFadeDuration(0.25)}ms`;
   }
-  if (config.console !== undefined) {
-    return config.console;
+  return `transform ${MORPH.durationMs}ms ${MORPH.ease}, opacity ${getFadeDuration(0.25)}ms linear`;
+}
+function getExitTransform(visualBridge) {
+  return `translate(${visualBridge.offsetX}px, ${visualBridge.offsetY}px)`;
+}
+function getExitTransition(stage) {
+  if (stage !== "animate") {
+    return;
   }
-  return config.enabled !== false;
+  return `transform ${MORPH.durationMs}ms ${MORPH.ease}, opacity ${getFadeDuration(0.25)}ms linear`;
 }
-function shouldRunTorphInstrumentation(config) {
-  if (shouldCaptureTorphTrace(config)) {
+function supportsIntrinsicWidthLock(display, parentDisplay) {
+  let parentNeedsReservation = false;
+  if (parentDisplay === "flex" || parentDisplay === "inline-flex" || parentDisplay === "grid" || parentDisplay === "inline-grid") {
+    parentNeedsReservation = true;
+  }
+  if (display === "inline" || display === "inline-block" || display === "inline-flex" || display === "inline-grid") {
     return true;
   }
-  return isTorphDebugEnabled(config);
+  return parentNeedsReservation;
 }
-function getTorphTraceStore() {
-  const scope = globalThis;
-  let store = scope.__TORPH_TRACE_STORE__;
-  if (store !== undefined) {
-    return store;
+function getRootDisplay(layoutContext) {
+  if (layoutContext === null) {
+    return "grid";
   }
-  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;
+  if (supportsIntrinsicWidthLock(layoutContext.display, layoutContext.parentDisplay)) {
+    return "inline-grid";
+  }
+  return "grid";
 }
-function downloadTorphTrace(filename) {
-  if (typeof document === "undefined") {
-    return null;
+function getRootStyle(stage, plan, measurement, layoutContext) {
+  let width = measurement?.reservedInlineSize;
+  if (measurement !== null && measurement.flowInlineSize !== null) {
+    width = measurement.layoutInlineSize;
   }
-  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`;
+  if (plan !== null) {
+    width = plan.layoutInlineSizeTo;
   }
-  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__;
+  let height;
+  if (plan !== null) {
+    height = plan.frameHeight;
   }
-  const api = {
-    clear: clearTorphTrace,
-    count: () => getTorphTraceStore().lines.length,
-    download: downloadTorphTrace,
-    text: getTorphTraceText
+  const style = {
+    position: "relative",
+    display: getRootDisplay(layoutContext)
   };
-  scope.__TORPH_TRACE__ = api;
-  return api;
+  if (width !== null && width !== undefined) {
+    style.width = width;
+  }
+  if (height !== undefined) {
+    style.height = height;
+  }
+  return style;
 }
-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;
+function getMeasurementLayerStyle(layoutContext, useContentInlineSize = false) {
+  let intrinsicWidthLock = false;
+  if (layoutContext !== null) {
+    if (useContentInlineSize) {
+      intrinsicWidthLock = true;
+    } else if (supportsIntrinsicWidthLock(layoutContext.display, layoutContext.parentDisplay)) {
+      intrinsicWidthLock = true;
     }
-    store.totalBytes = Math.max(0, store.totalBytes - removed.length);
   }
+  if (!intrinsicWidthLock) {
+    return MEASUREMENT_LAYER_STYLE;
+  }
+  return {
+    ...MEASUREMENT_LAYER_STYLE,
+    right: "auto",
+    width: "max-content"
+  };
 }
-function roundDebugValue(value) {
-  if (value === null || value === undefined) {
-    return value;
+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 Math.round(value * 100) / 100;
+  return plan !== null;
 }
-function summarizeDebugSnapshot(snapshot) {
+function resolveGlyphSliceWhiteSpace(snapshot) {
   if (snapshot === null) {
-    return null;
+    return "inherit";
   }
+  return "nowrap";
+}
+function toSteadyLiveItem(grapheme) {
   return {
-    text: snapshot.text,
-    renderText: snapshot.renderText,
-    width: roundDebugValue(snapshot.width),
-    height: roundDebugValue(snapshot.height),
-    graphemes: snapshot.graphemes.length
+    ...grapheme,
+    kind: "move",
+    fromLeft: grapheme.left,
+    fromTop: grapheme.top
   };
 }
-function summarizeDebugMeasurement(measurement) {
-  if (measurement === null) {
-    return null;
-  }
+function createSteadyGlyphPlan(measurement) {
+  const snapshot = measurement.snapshot;
   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)
+    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: []
   };
 }
-function summarizeDebugRect(rect) {
-  if (rect === null) {
+
+// 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();
+}
+function clearMorphMeasurementCaches() {
+  morphSegmentCache.clear();
+  clearPretextMorphTrustCache();
+  clearPretextMorphCaches();
+}
+function bumpMorphMeasurementEpoch() {
+  morphMeasurementEpoch += 1;
+}
+function getMorphMeasurementEpoch() {
+  return morphMeasurementEpoch;
+}
+function readCachedMorphSegments(text) {
+  const cached = morphSegmentCache.get(text);
+  if (cached !== undefined) {
+    morphSegmentCache.delete(text);
+    morphSegmentCache.set(text, cached);
+    return cached;
+  }
+  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);
+    }
+  }
+  return segments;
+}
+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 {
-    left: roundDebugValue(rect.left),
-    top: roundDebugValue(rect.top),
-    width: roundDebugValue(rect.width),
-    height: roundDebugValue(rect.height)
+    text,
+    renderText,
+    segments,
+    measurementBackend,
+    useContentInlineSize,
+    domMeasurementKey
   };
 }
-function collectDebugAnchorIndices(length) {
-  const indices = new Set;
-  if (length <= 0) {
-    return [];
+function rememberPretextMeasurementTrust({
+  renderText,
+  layoutContext,
+  useContentInlineSize,
+  trusted
+}) {
+  const signature = getPretextMorphTrustSignature({
+    renderText,
+    layoutContext,
+    useContentInlineSize
+  });
+  if (signature === null) {
+    return;
   }
-  indices.add(0);
-  if (length > 1) {
-    indices.add(1);
-    indices.add(length - 2);
+  pretextMorphTrustCache.set(signature, trusted);
+}
+function areSnapshotsEquivalentForPretextTrust(left, right) {
+  if (left.renderText !== right.renderText || left.graphemes.length !== right.graphemes.length) {
+    return false;
   }
-  if (length > 2) {
-    indices.add(Math.floor((length - 1) / 2));
+  if (Math.abs(left.width - right.width) > MORPH.geometryEpsilon) {
+    return false;
   }
-  indices.add(length - 1);
-  return Array.from(indices).sort((left, right) => left - right);
+  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;
 }
-function summarizeDebugViewportAnchors(snapshot, rootRect) {
-  if (snapshot === null || rootRect === null) {
-    return null;
+
+// 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;
   }
-  const anchors = [];
-  const anchorIndices = collectDebugAnchorIndices(snapshot.graphemes.length);
-  for (const index of anchorIndices) {
-    const grapheme = snapshot.graphemes[index];
-    if (grapheme === undefined) {
+  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;
     }
-    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)
-    });
+    buckets.set(grapheme.glyph, [grapheme]);
   }
-  return anchors;
+  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 summarizeDebugRootOriginDrift(measurement, rootRect) {
-  if (measurement === null || rootRect === null) {
-    return null;
+function pinMeasurementToCurrentOrigin(measurement, origin) {
+  if (nearlyEqual(measurement.rootOrigin.left, origin.left, MORPH.geometryEpsilon) && nearlyEqual(measurement.rootOrigin.top, origin.top, MORPH.geometryEpsilon)) {
+    return measurement;
   }
   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)
+    snapshot: measurement.snapshot,
+    layoutInlineSize: measurement.layoutInlineSize,
+    reservedInlineSize: measurement.reservedInlineSize,
+    flowInlineSize: measurement.flowInlineSize,
+    rootOrigin: origin
   };
 }
-function summarizeSnapshotDrift(drift) {
+function createStaticState(measurement) {
   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)
-    }))
+    stage: "idle",
+    measurement,
+    plan: null
   };
 }
-function logTorphDebug(instanceId, event, payload) {
-  const config = readTorphDebugConfig();
-  const captureTrace = shouldCaptureTorphTrace(config);
-  const logToConsole = isTorphDebugEnabled(config);
-  if (!captureTrace && !logToConsole) {
+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;
   }
-  if (captureTrace) {
-    appendTorphTrace(instanceId, event, payload);
+  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;
   }
-  if (logToConsole) {
-    console.log(`[Torph#${instanceId}] ${event}`, payload);
+  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)) {
@@ -2933,41 +3341,16 @@ function sameLayoutContext(a, b) {
   }
   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 clearPretextMorphTrustCache() {
-  pretextMorphTrustCache.clear();
-}
-function clearMorphMeasurementCaches() {
-  morphSegmentCache.clear();
-  clearPretextMorphTrustCache();
-  clearPretextMorphCaches();
-}
-function bumpMorphMeasurementEpoch() {
-  morphMeasurementEpoch += 1;
-}
-function getMorphMeasurementEpoch() {
-  return morphMeasurementEpoch;
-}
-function isSingleLineSnapshot(snapshot) {
-  if (snapshot.graphemes.length <= 1) {
-    return true;
+function notifyMorphMeasurementInvalidationSubscribers() {
+  for (const subscriber of morphMeasurementInvalidationSubscribers) {
+    subscriber();
   }
-  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 subscribeMorphMeasurementInvalidation(subscriber) {
+  morphMeasurementInvalidationSubscribers.add(subscriber);
+  return () => {
+    morphMeasurementInvalidationSubscribers.delete(subscriber);
+  };
 }
 function acquireMorphMeasurementInvalidationListeners() {
   activeMorphMeasurementConsumers += 1;
@@ -2975,6 +3358,7 @@ function acquireMorphMeasurementInvalidationListeners() {
     const handleFontChange = () => {
       clearMorphMeasurementCaches();
       bumpMorphMeasurementEpoch();
+      notifyMorphMeasurementInvalidationSubscribers();
     };
     document.fonts.ready.then(handleFontChange);
     if (typeof document.fonts.addEventListener === "function") {
@@ -2997,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) {
@@ -3025,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]) => {
@@ -3040,24 +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;
+  return null;
 }
 function getDomMeasurementService() {
   if (domMeasurementService !== null) {
@@ -3129,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) {
@@ -3186,7 +3535,7 @@ 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);
@@ -3267,65 +3616,27 @@ function measureMorphSnapshotWithDomService({
   useContentInlineSize
 }) {
   if (renderText.length === 0) {
-    return {
-      text,
-      renderText,
-      width: 0,
-      height: 0,
-      graphemes: []
-    };
-  }
-  const service = getDomMeasurementService();
-  applyMeasurementHostStyle({
-    host: service.host,
-    root,
-    layoutContext,
-    useContentInlineSize
-  });
-  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 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 {
+      text,
+      renderText,
+      width: 0,
+      height: 0,
+      graphemes: []
+    };
   }
-  return null;
+  const service = getDomMeasurementService();
+  applyMeasurementHostStyle({
+    host: service.host,
+    root,
+    layoutContext,
+    useContentInlineSize
+  });
+  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 measureLiveFlowSnapshot(root, flowTextNode) {
   const textNode = readFirstTextNode(flowTextNode);
@@ -3458,141 +3769,6 @@ function measureOverlayBoxSnapshot(root, overlayRoot, role) {
     graphemes
   };
 }
-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 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,
-  forceContentInlineSize = false
-}) {
-  if (layoutContext === null) {
-    return null;
-  }
-  const renderText = getPretextMorphRenderedText(text, layoutContext);
-  let useContentInlineSize = shouldMeasureUsingContentInlineSize(layoutContext, layoutHint);
-  if (forceContentInlineSize) {
-    useContentInlineSize = true;
-  }
-  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 || 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 || 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;
-    }
-  }
-  return true;
-}
 function measureFromNodes({
   root,
   layoutContext,
@@ -3612,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);
@@ -3649,294 +3825,378 @@ function measureFromNodes({
     if (resolvedSnapshot === null) {
       throw new Error("Torph failed to resolve a measurement snapshot.");
     }
-    return resolvedSnapshot;
-  })();
-  let layoutInlineSize = layoutContext.width;
-  if (useContentInlineSize) {
-    layoutInlineSize = snapshot.width;
+    return resolvedSnapshot;
+  })());
+  let layoutInlineSize = layoutContext.width;
+  if (useContentInlineSize) {
+    layoutInlineSize = snapshot.width;
+  }
+  let reservedInlineSize = null;
+  if (supportsIntrinsicWidthLock(layoutContext.display, layoutContext.parentDisplay)) {
+    reservedInlineSize = snapshot.width;
+  }
+  let flowInlineSize = null;
+  if (useContentInlineSize) {
+    flowInlineSize = snapshot.width;
+  }
+  return {
+    snapshot,
+    layoutInlineSize,
+    reservedInlineSize,
+    flowInlineSize,
+    rootOrigin: readRootOrigin(root)
+  };
+}
+
+// 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 readTorphDebugConfig() {
+  const scope = globalThis;
+  return scope.__TORPH_DEBUG__ ?? DEFAULT_TORPH_DEBUG_CONFIG;
+}
+function shouldCaptureTorphTrace(config) {
+  if (config === null) {
+    return false;
+  }
+  if (typeof config === "boolean") {
+    return config;
+  }
+  if (config.capture === true) {
+    return true;
+  }
+  return false;
+}
+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 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);
   }
-  let reservedInlineSize = null;
-  if (supportsIntrinsicWidthLock(layoutContext.display, layoutContext.parentDisplay)) {
-    reservedInlineSize = snapshot.width;
+}
+function roundDebugValue(value) {
+  if (value === null || value === undefined) {
+    return value;
   }
-  return {
-    snapshot,
-    layoutInlineSize,
-    reservedInlineSize,
-    flowInlineSize: null,
-    rootOrigin: readRootOrigin(root)
-  };
+  return Math.round(value * 1e4) / 1e4;
 }
-function pinMeasurementToCurrentOrigin(measurement, origin) {
-  if (nearlyEqual(measurement.rootOrigin.left, origin.left) && nearlyEqual(measurement.rootOrigin.top, origin.top)) {
-    return measurement;
+function summarizeDebugSnapshot(snapshot) {
+  if (snapshot === null) {
+    return null;
   }
   return {
-    snapshot: measurement.snapshot,
-    layoutInlineSize: measurement.layoutInlineSize,
-    reservedInlineSize: measurement.reservedInlineSize,
-    flowInlineSize: measurement.flowInlineSize,
-    rootOrigin: origin
+    text: snapshot.text,
+    renderText: snapshot.renderText,
+    width: roundDebugValue(snapshot.width),
+    height: roundDebugValue(snapshot.height),
+    graphemes: snapshot.graphemes.length
   };
 }
-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]);
-    }
+function summarizeDebugGlyphs(snapshot) {
+  if (snapshot === null) {
+    return null;
   }
-  return buckets;
+  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 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]
-      });
-    }
+function summarizeDebugMeasurement(measurement) {
+  if (measurement === null) {
+    return null;
   }
-  return pairings;
-}
-function resolveMorphFrameBounds(previous, next) {
   return {
-    width: Math.max(previous.width, next.width),
-    height: Math.max(previous.height, next.height)
+    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 buildMorphVisualBridge(previous, next) {
+function summarizeDebugLayoutContext(layoutContext) {
+  if (layoutContext === null) {
+    return null;
+  }
   return {
-    offsetX: previous.rootOrigin.left - next.rootOrigin.left,
-    offsetY: previous.rootOrigin.top - next.rootOrigin.top
+    display: layoutContext.display,
+    parentDisplay: layoutContext.parentDisplay,
+    whiteSpace: layoutContext.whiteSpace,
+    width: roundDebugValue(layoutContext.width),
+    measurementVersion: layoutContext.measurementVersion
   };
 }
-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 summarizeDebugRect(rect) {
+  if (rect === null) {
+    return null;
   }
-  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,
-    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
+    left: roundDebugValue(rect.left),
+    top: roundDebugValue(rect.top),
+    width: roundDebugValue(rect.width),
+    height: roundDebugValue(rect.height)
   };
 }
-function nearlyEqual(a, b, epsilon = MORPH.geometryEpsilon) {
-  return Math.abs(a - b) <= epsilon;
-}
-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;
+function collectDebugAnchorIndices(length) {
+  const indices = new Set;
+  if (length <= 0) {
+    return [];
   }
-  if (!nearlyEqual(a.width, b.width) || !nearlyEqual(a.height, b.height)) {
-    return false;
+  indices.add(0);
+  if (length > 1) {
+    indices.add(1);
+    indices.add(length - 2);
   }
-  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;
-    }
+  if (length > 2) {
+    indices.add(Math.floor((length - 1) / 2));
   }
-  return true;
+  indices.add(length - 1);
+  return Array.from(indices).sort((left, right) => left - right);
 }
-function sameMeasurement(a, b) {
-  if (a === b) {
-    return true;
+function summarizeDebugViewportAnchors(snapshot, rootRect) {
+  if (snapshot === null || rootRect === null) {
+    return null;
   }
-  return sameSnapshot(a.snapshot, b.snapshot) && nearlyEqual(a.layoutInlineSize, b.layoutInlineSize) && (a.reservedInlineSize === null && b.reservedInlineSize === null || a.reservedInlineSize !== null && b.reservedInlineSize !== null && nearlyEqual(a.reservedInlineSize, b.reservedInlineSize)) && (a.flowInlineSize === null && b.flowInlineSize === null || a.flowInlineSize !== null && b.flowInlineSize !== null && nearlyEqual(a.flowInlineSize, b.flowInlineSize)) && nearlyEqual(a.rootOrigin.left, b.rootOrigin.left) && nearlyEqual(a.rootOrigin.top, b.rootOrigin.top);
-}
-function refreshAnimatingTarget(activeTarget, measurement) {
-  if (sameMeasurement(activeTarget, measurement)) {
-    return activeTarget;
+  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 {
-    snapshot: activeTarget.snapshot,
-    layoutInlineSize: measurement.layoutInlineSize,
-    reservedInlineSize: measurement.reservedInlineSize,
-    flowInlineSize: activeTarget.flowInlineSize,
-    rootOrigin: measurement.rootOrigin
-  };
+  return anchors;
 }
-function reuseCommittedMeasurement(committed, measurement) {
-  if (sameMeasurement(committed, measurement)) {
-    return committed;
+function summarizeDebugRootOriginDrift(measurement, rootRect) {
+  if (measurement === null || rootRect === null) {
+    return null;
   }
-  return measurement;
-}
-function createStaticState(measurement) {
   return {
-    stage: "idle",
-    measurement,
-    plan: null
+    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 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 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 commitStaticMeasurement(session, measurement, setState) {
-  if (!session.animating && session.target === null && session.committed !== null && sameMeasurement(session.committed, measurement)) {
+function logTorphDebug(instanceId, event, payload) {
+  const config = readTorphDebugConfig();
+  const captureTrace = shouldCaptureTorphTrace(config);
+  const logToConsole = isTorphDebugEnabled(config);
+  if (!captureTrace && !logToConsole) {
     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 scheduleMorphTimeline({
-  session,
-  timeline,
-  finalizeMeasurement,
-  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
-      };
-    });
-    timeline.animateFrame = requestAnimationFrame(() => {
-      timeline.animateFrame = null;
-      timeline.finalizeTimer = window.setTimeout(() => {
-        timeline.finalizeTimer = null;
-        commitStaticMeasurement(session, finalizeMeasurement(session.target ?? measurement), setState);
-      }, MORPH.durationMs);
-    });
-  });
+  if (captureTrace) {
+    appendTorphTrace(instanceId, event, payload);
+  }
+  if (logToConsole) {
+    console.log(`[Torph#${instanceId}] ${event}`, payload);
+  }
 }
-function startMorph({
-  finalizeMeasurement,
-  nextMeasurement,
-  session,
-  timeline,
-  setState
-}) {
-  let sourceMeasurement = session.committed;
-  if (session.animating && session.target) {
-    sourceMeasurement = session.target;
+
+// 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;
   }
-  if (sourceMeasurement === null) {
-    commitStaticMeasurement(session, nextMeasurement, setState);
-    return;
+  const existing = debugDomNodeIds.get(node);
+  if (existing !== undefined) {
+    return existing;
   }
-  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,
-    finalizeMeasurement,
-    measurement: nextMeasurement,
-    plan,
-    setState
-  });
+  debugDomNodeOrdinal += 1;
+  debugDomNodeIds.set(node, debugDomNodeOrdinal);
+  return debugDomNodeOrdinal;
 }
 function reconcileMorphChange({
-  finalizeMeasurement,
   root,
   measurementLayer,
   measurementBackend,
@@ -3956,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,
@@ -3971,73 +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({
-    finalizeMeasurement,
-    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") {
@@ -4045,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 stateMeasurement?.snapshot.text ?? committedMeasurement?.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 getFallbackTextStyle(shouldHideFlowText) {
+  if (!shouldHideFlowText) {
     return FALLBACK_TEXT_STYLE;
   }
   return {
@@ -4167,18 +4282,136 @@ function getExitGlyphStyle(item, stage, visualBridge) {
     transition: getExitTransition(stage)
   };
 }
-function getContextSliceStyle(layoutInlineSize, item) {
+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 {
-    ...CONTEXT_SLICE_TEXT_STYLE,
-    left: -item.left,
-    top: -item.top,
-    width: layoutInlineSize
+    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
+  plan,
+  sourceSliceWhiteSpace,
+  targetSliceWhiteSpace
 }) {
   let exitItems = [];
   if (stage !== "idle") {
@@ -4187,7 +4420,7 @@ function MorphOverlay({
   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",
@@ -4195,7 +4428,8 @@ function MorphOverlay({
         "data-morph-glyph": item.glyph,
         style: getExitGlyphStyle(item, stage, plan.visualBridge),
         children: /* @__PURE__ */ jsxDEV("span", {
-          style: getContextSliceStyle(plan.layoutInlineSizeFrom, item),
+          "data-morph-slice": "context",
+          style: getContextSliceStyle(plan.layoutInlineSizeFrom, item, sourceSliceWhiteSpace),
           children: plan.sourceRenderText
         }, undefined, false, undefined, this)
       }, `exit-${item.key}`, false, undefined, this)),
@@ -4203,9 +4437,11 @@ function MorphOverlay({
         "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: /* @__PURE__ */ jsxDEV("span", {
-          style: getContextSliceStyle(plan.layoutInlineSizeTo, item),
+          "data-morph-slice": "context",
+          style: getContextSliceStyle(plan.layoutInlineSizeTo, item, targetSliceWhiteSpace),
           children: plan.targetRenderText
         }, undefined, false, undefined, this)
       }, item.key, false, undefined, this))
@@ -4225,54 +4461,92 @@ function MeasurementLayer({
     children: text
   }, undefined, false, undefined, this);
 }
+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 { 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);
+  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();
   }
-  let measurementHint = sessionRef.current.committed;
-  if (sessionRef.current.animating) {
-    measurementHint = sessionRef.current.target ?? sessionRef.current.committed;
-  }
-  const forceContentInlineSize = forceContentMeasurementText === text;
+  const measurementHint = selectMorphLayoutHint(sessionRef.current);
   const measurementRequest = useMemo(() => createMorphMeasurementRequest({
     text,
     layoutContext,
-    layoutHint: measurementHint,
-    forceContentInlineSize
-  }), [text, layoutContext, measurementHint, forceContentInlineSize]);
+    layoutHint: measurementHint
+  }), [text, layoutContext, measurementHint]);
   const renderText = measurementRequest?.renderText ?? text;
   const useContentInlineSize = measurementRequest?.useContentInlineSize ?? false;
   const measurementBackend = measurementRequest?.measurementBackend ?? null;
   const segments = measurementRequest?.segments ?? EMPTY_SEGMENTS;
   const domMeasurementKey = measurementRequest?.domMeasurementKey ?? null;
-  useLayoutEffect(() => {
+  const logTransitionTrace = (event, payload = {}) => {
     const config = readTorphDebugConfig();
-    if (!shouldCaptureTorphTrace(config)) {
+    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();
   }, []);
-  useLayoutEffect(() => {
-    const finalizeMeasurement = (measurement) => refineMeasurementFromLiveNodes(measurement, ref.current, flowTextRef.current);
+  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({
-        finalizeMeasurement,
         root: ref.current,
         measurementLayer: measurementLayerRef.current,
         measurementBackend,
@@ -4295,10 +4569,14 @@ 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({
-          finalizeMeasurement,
           root: ref.current,
           measurementLayer: null,
           measurementBackend,
@@ -4315,14 +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 nextMeasurement2 = reconcileMorphChange({
-          finalizeMeasurement,
           root: ref.current,
           measurementLayer: measurementLayerRef.current,
           measurementBackend,
@@ -4342,21 +4626,33 @@ function useMorphTransition(text, className) {
         }
         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);
     }
     const nextMeasurement = reconcileMorphChange({
-      finalizeMeasurement,
       root: ref.current,
       measurementLayer: measurementLayerRef.current,
       measurementBackend,
@@ -4379,36 +4675,7 @@ function useMorphTransition(text, className) {
     domMeasurementKey,
     domMeasurementRequestKey
   ]);
-  useLayoutEffect(() => {
-    syncCommittedRootOriginWhenIdle({
-      root: ref.current,
-      flowTextRef,
-      layoutContext,
-      state,
-      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(() => {
+  useLayoutEffect2(() => {
     const config = readTorphDebugConfig();
     if (!shouldRunTorphInstrumentation(config)) {
       debugDriftSignatureRef.current = null;
@@ -4451,55 +4718,171 @@ function useMorphTransition(text, className) {
       drift: summarizeSnapshotDrift(drift)
     });
   }, [state, text]);
-  useLayoutEffect(() => {
+  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 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 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);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const config = readTorphDebugConfig();
     if (!shouldRunTorphInstrumentation(config)) {
       return;
@@ -4507,11 +4890,264 @@ function ActiveTorph({
     logTorphDebug(debugInstanceId, "effect:trace-meta", {
       traceSchemaVersion: TORPH_TRACE_SCHEMA_VERSION,
       includesIdlePostFrame: true,
+      includesIdlePostFrameLifecycle: true,
       includesViewportAnchors: true,
-      includesRootOriginRefine: true
+      includesRootOriginRefine: true,
+      includesFullGlyphLayouts: true,
+      includesIdleVisibleGlyphLayer: true,
+      includesPreciseGlyphGeometry: true,
+      includesAnimateTailFrames: true,
+      includesLiveNodeStyles: true
     });
   }, [debugInstanceId]);
-  useLayoutEffect(() => {
+  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;
@@ -4522,25 +5158,34 @@ function ActiveTorph({
     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
+        flowText,
+        domMeasurementRequestKey,
+        domMeasurementKey,
+        measurementBackend
       });
       debugPreviousStageRef.current = state.stage;
     }
   }, [committedMeasurement, debugInstanceId, flowText, state, text]);
-  useLayoutEffect(() => {
+  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) {
@@ -4549,6 +5194,7 @@ function ActiveTorph({
         debugFrameHandleRef.current = null;
       }
       debugFrameOrdinalRef.current = 0;
+      debugAnimateTailFramesRef.current = [];
       return;
     }
     debugFrameOrdinalRef.current = 0;
@@ -4593,6 +5239,19 @@ function ActiveTorph({
       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 = {
@@ -4624,13 +5283,17 @@ function ActiveTorph({
         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
+        flowDrift,
+        rootRuntimeStyles: summarizeRootRuntimeStyles(root)
       });
       debugFrameOrdinalRef.current += 1;
       debugFrameHandleRef.current = requestAnimationFrame(captureFrame);
@@ -4644,11 +5307,22 @@ function ActiveTorph({
       }
     };
   }, [committedMeasurement, debugInstanceId, flowText, plan, ref, state, text]);
-  useLayoutEffect(() => {
+  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;
       }
@@ -4660,28 +5334,93 @@ function ActiveTorph({
     if (state.stage !== "idle" || state.measurement === null) {
       return;
     }
-    debugPendingIdlePostFramesRef.current = false;
     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;
-      if (root === null || flowNode === null) {
+      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,
@@ -4690,11 +5429,24 @@ function ActiveTorph({
         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
+        flowDrift,
+        visible: summarizeDebugSnapshot(visibleSnapshot),
+        visibleGlyphs: summarizeDebugGlyphs(visibleSnapshot),
+        visibleGlyphsPrecise: summarizePreciseGlyphs(visibleSnapshot, rootRect),
+        visibleViewportAnchors: summarizeDebugViewportAnchors(visibleSnapshot, rootRect),
+        visibleDrift,
+        visibleLiveNodeStyles: summarizeLiveNodeStyles(overlayNode)
       });
       debugIdlePostFrameOrdinalRef.current += 1;
       remainingFrames -= 1;
@@ -4703,121 +5455,77 @@ function ActiveTorph({
         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]);
-  useLayoutEffect(() => {
+  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;
       }
     };
   }, []);
-  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, {
@@ -4828,11 +5536,13 @@ function ActiveTorph({
     }, 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", {
@@ -4846,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
@@ -4867,23 +5577,5 @@ function Torph({
   }, undefined, false, undefined, this);
 }
 export {
-  supportsIntrinsicWidthLock,
-  shouldHealIdleMeasurementFromFlow,
-  resolveMorphFrameBounds,
-  resolveFlowText,
-  resolveContentWidthLockInlineSize,
-  refineMeasurementWithLiveGeometry,
-  pairMorphCharacters,
-  needsMeasurementLayer,
-  measureMorphSnapshotFromLayer,
-  getRootStyle,
-  getRootDisplay,
-  getMeasurementLayerStyle,
-  getLiveTransition,
-  getLiveTransform,
-  getExitTransition,
-  getExitTransform,
-  buildMorphVisualBridge,
-  buildMorphPlan,
   Torph
 };