@keepsnappy/react-native 0.1.0-alpha.15 → 0.1.0-alpha.17

package/js/sdk/fiber.ts

@@ -2,15 +2,20 @@
 // (to name touched views) and route key -> screen fiber (to name screens).
 // Only reads fiber fields; never mutates the tree.
 
+import { buildPlaceId, placeSegment, logPlace } from './place';
+export { buildPlaceId, placeSegment } from './place';
+
 export interface Fiber {
   tag: number;
   flags: number;
   type: unknown;
+  elementType?: unknown;
   alternate: Fiber | null;
   child: Fiber | null;
   sibling: Fiber | null;
   return: Fiber | null;
   memoizedProps: unknown;
+  memoizedState?: unknown;
   stateNode: unknown;
 }
 
@@ -33,6 +38,25 @@ export const isComponentTag = (tag: number) =>
   tag === FORWARD_REF ||
   tag === SIMPLE_MEMO_COMPONENT;
 
+export const OUTSIDE_APP = '(outside app components)';
+const hasOwn = Object.prototype.hasOwnProperty;
+const stampOf = (type: unknown): string | null => {
+  if (type === null || (typeof type !== 'function' && typeof type !== 'object')) return null;
+  const key = (type as { __ks?: unknown }).__ks;
+  return typeof key === 'string' && hasOwn.call(type, '__ks') ? key : null;
+};
+
+export const clientKeyOf = (fiber: Fiber): string | null => {
+  const parent = fiber.tag === SIMPLE_MEMO_COMPONENT ? null : fiber.return;
+  return (fiber.tag === SIMPLE_MEMO_COMPONENT
+    ? stampOf(fiber.elementType)
+    : parent?.tag === MEMO_COMPONENT ? stampOf(parent.type) : null) ??
+    stampOf(fiber.type) ??
+    (fiber.tag === FORWARD_REF ? stampOf((fiber.type as { render?: unknown } | null)?.render) : null);
+};
+
+export const clientFiber = (f: Fiber) => isComponentTag(f.tag) && clientKeyOf(f) !== null;
+
 type Props = Record<string, unknown>;
 
 export const propsOf = (fiber: Fiber): Props | null => {
@@ -158,6 +182,7 @@ export interface RouteEntry {
 }
 
 export const routes = new Map<string, RouteEntry>();
+const scenes = new Map<string, Fiber>();
 
 // React Navigation passes `route` and `navigation` to every screen component;
 // Expo Router routes are React Navigation routes. Reading the props is enough.
@@ -205,6 +230,14 @@ export const noteMounted = (fiber: Fiber) => {
   const props = propsOf(fiber);
   if (props && props.route !== undefined) {
     noteRoute(fiber, props);
+    // React Navigation core's SceneView: the route's `screen` config and `clearOptions`. Expo Router 58's fork no
+    // longer passes `getState`, so that prop does not mark it. Headers and layouts get `route` without these.
+    const route = props.route as { key?: unknown } | null;
+    if (typeof route?.key === 'string' &&
+      props.screen !== null && typeof props.screen === 'object' &&
+      typeof props.clearOptions === 'function') {
+      scenes.set(route.key, fiber);
+    }
   }
 };
 
@@ -229,6 +262,8 @@ export const noteUnmounted = (fiber: Fiber) => {
   }
   const route = propsOf(fiber)?.route as { key?: unknown } | undefined;
   if (route && typeof route.key === 'string') {
+    const scene = scenes.get(route.key);
+    if (scene === fiber || scene === fiber.alternate) scenes.delete(route.key);
     const entry = routes.get(route.key);
     if (entry && (entry.fiber === fiber || entry.fiber === fiber.alternate)) {
       routes.delete(route.key);
@@ -239,6 +274,7 @@ export const noteUnmounted = (fiber: Fiber) => {
 export const registrySizes = () => ({
   hostTags: hostByTag.size,
   routes: routes.size,
+  scenes: scenes.size,
   containers: containerFibers.size,
 });
 
@@ -248,8 +284,103 @@ export interface ScreenRoute {
   routeName: string | null;
 }
 
+// React's slow path follows both branches: a shared child can keep a stale return pointer.
+// Registries only supply mounted fibers; unresolved/deleted alternate pairs are not scanned.
+export const currentFiber = (fiber: Fiber): Fiber | null => {
+  const alternate = fiber.alternate;
+  if (!alternate) return fiber;
+  let a = fiber;
+  let b = alternate;
+  let remaining = 1000;
+  while (remaining-- > 0) {
+    const parentA = a.return;
+    if (!parentA) {
+      const root = a.stateNode as { current?: Fiber } | null;
+      if (a.tag !== 3) return null;
+      if (root?.current === a) return fiber;
+      return root?.current === b ? alternate : null;
+    }
+    const parentB = parentA.alternate;
+    if (!parentB) {
+      const grandparent = parentA.return;
+      if (!grandparent) return null;
+      a = b = grandparent;
+      continue;
+    }
+    if (parentA.child === parentB.child) {
+      for (let child = parentA.child; child && remaining-- > 0; child = child.sibling) {
+        if (child === a) return fiber;
+        if (child === b) return alternate;
+      }
+      return null;
+    }
+    if (a.return !== b.return) {
+      a = parentA;
+      b = parentB;
+    } else {
+      let found = false;
+      for (const parent of [parentA, parentB]) {
+        for (let child = parent.child; child && remaining-- > 0; child = child.sibling) {
+          if (child === a || child === b) {
+            const other = parent === parentA ? parentB : parentA;
+            if (child === a) { a = parent; b = other; }
+            else { a = other; b = parent; }
+            found = true;
+            break;
+          }
+        }
+        if (found) break;
+      }
+      if (!found) return null;
+    }
+    if (a.alternate !== b) return null;
+  }
+  return null;
+};
+
 const MAX_ROUTE_SEARCH = 500;
 
+export interface ScreenKeyResolution {
+  screen: string;
+  screenPending?: boolean;
+}
+
+export interface ScreenRouteResolution extends ScreenKeyResolution {
+  suspended?: Fiber;
+}
+
+let screenKeyProvider: () => ScreenKeyResolution = () => ({ screen: '(no screen)' });
+export const setScreenKeyProvider = (provider: () => ScreenKeyResolution) => {
+  screenKeyProvider = provider;
+};
+export const getScreenKey = () => screenKeyProvider();
+
+export const screenKeyForRoute = (routeKey: string | null, routeName: string): ScreenRouteResolution => {
+  const scene = routeKey === null ? null : scenes.get(routeKey);
+  const root = scene ? currentFiber(scene) : null;
+  let suspended: Fiber | undefined;
+  if (root) {
+    const queue: Fiber[] = [];
+    let next: Fiber | null = root.child;
+    let visited = 0;
+    let queued = 0;
+    while ((next || queued < queue.length) && visited < MAX_ROUTE_SEARCH) {
+      const f: Fiber = next ?? queue[queued++]!;
+      visited++;
+      next = f.sibling;
+      if (clientFiber(f)) return { screen: clientKeyOf(f)! };
+      // A suspended boundary's child is hidden primary content; its sibling is the fallback Fragment.
+      if (f.tag === 13 && f.memoizedState != null) { suspended ??= f; continue; }
+      if (f.child) queue.push(f.child);
+    }
+  }
+  return {
+    screen: placeSegment(OUTSIDE_APP, routeName),
+    screenPending: !root || suspended !== undefined,
+    ...(suspended ? { suspended } : {}),
+  };
+};
+
 const routeLike = (value: unknown): { key: string; name: string } | null => {
   if (value === null || typeof value !== 'object') {
     return null;
@@ -355,7 +486,9 @@ export type NameSource =
   | 'accessibilityLabel'
   | 'text'
   | 'component'
-  | 'tag';
+  | 'tag'
+  | 'client'
+  | 'outside';
 
 export interface TargetDescription {
   name: string;
@@ -365,14 +498,17 @@ export interface TargetDescription {
   accessibilityLabel: string | null;
   component: string | null;
   actionable: boolean;
+  legacyName: string;
+  legacySource: NameSource;
+  place: TargetPlace;
 }
 
 // testID -> accessibilityLabel -> text -> nearest named component -> tag.
 // testID/label are searched from the touched view up to the first named
 // component above the actionable (onPress/responder) fiber.
-export const describeTarget = (tag: number): TargetDescription => {
+const legacyTarget = (tag: number): Omit<TargetDescription, 'legacyName' | 'legacySource' | 'place'> => {
   const host = hostByTag.get(tag);
-  const result: TargetDescription = {
+  const result: Omit<TargetDescription, 'legacyName' | 'legacySource' | 'place'> = {
     name: `tag:${tag}`,
     source: 'tag',
     tag,
@@ -438,6 +574,180 @@ export const describeTarget = (tag: number): TargetDescription => {
   return result;
 };
 
+export interface TargetPlace {
+  screen: string;
+  parent: string | null;
+  target: string;
+  k: number | null;
+  hostType: string;
+  screenPending?: boolean;
+  manySiblings?: number;
+}
+
+// A scroll view's own responder handlers (RN sets them on RCTScrollView) serve the scroll gesture, so a scroll view is
+// never the tap's region: the pressables inside it are.
+const actionableFiber = (f: Fiber) => {
+  const props = propsOf(f);
+  return props !== null && isActionable(props) && !isScrollHost(f);
+};
+const isListCell = (f: Fiber) => {
+  if (!isComponentTag(f.tag) || clientKeyOf(f) !== null) return false;
+  const p = propsOf(f);
+  return p !== null && ((typeof p.cellKey === 'string' && typeof p.index === 'number') ||
+    (typeof p.index === 'number' && 'item' in p && typeof p.renderItem === 'function') ||
+    (typeof p.getRenderedItem === 'function' && 'itemKey' in p));
+};
+
+// React elements a component received in its props (children or any other prop), arrays included, by their props
+// object: the fiber React creates from an element keeps that object as its props.
+// Props objects do not change after their render, so the result is kept per object.
+const MAX_PASSED_ELEMENTS = 64;
+const NO_ELEMENTS: ReadonlySet<unknown> = new Set();
+const passedByProps = new WeakMap<object, ReadonlySet<unknown>>();
+const passedElementProps = (props: Props): ReadonlySet<unknown> => {
+  const known = passedByProps.get(props);
+  if (known) return known;
+  const found = new Set<unknown>();
+  try {
+    const stack: unknown[] = Object.values(props);
+    let seen = 0;
+    while (stack.length > 0 && seen++ < MAX_PASSED_ELEMENTS) {
+      const value = stack.pop();
+      if (Array.isArray(value)) {
+        stack.push(...value.slice(0, MAX_PASSED_ELEMENTS));
+      } else if (value !== null && typeof value === 'object' && '$$typeof' in value && 'props' in value) {
+        found.add((value as { props: unknown }).props);
+      }
+    }
+  } catch {
+    // A prop that throws on read (a revoked Proxy) carries no element we can match.
+  }
+  const result = found.size === 0 ? NO_ELEMENTS : found;
+  passedByProps.set(props, result);
+  return result;
+};
+
+// A client component between the target and the component that placed it passes the press through: it received a
+// press handler from its owner (a button wrapper forwarding `onPress`), or it renders an element it received in its
+// props around the target (a layout or animation wrapper given `children`). Neither tells two buttons apart.
+const passesThrough = (f: Fiber, path: readonly Fiber[]) => {
+  const props = propsOf(f);
+  if (!props) return false;
+  if (isActionable(props)) return true;
+  const passed = passedElementProps(props);
+  if (passed.size === 0) return false;
+  return path.some(p => passed.has(p.memoizedProps) || (p.alternate !== null && passed.has(p.alternate.memoizedProps)));
+};
+
+// The parent of a place: the first client component above the target that does not pass the press through, else the
+// nearest client component above it.
+const placeParentOf = (target: Fiber): Fiber | null => {
+  let nearest: Fiber | null = null;
+  const path: Fiber[] = [target];
+  for (let f = target.return, n = 0; f && n < MAX_UP * 2; f = f.return, n++) {
+    if (clientFiber(f)) {
+      nearest ??= f;
+      if (!passesThrough(f, path)) return f;
+    }
+    path.push(f);
+  }
+  return nearest;
+};
+
+// A client component that can pass a press through for something below it; any other client component is the
+// parent of every target under it.
+const mayPassThrough = (f: Fiber) => {
+  const props = propsOf(f);
+  return props !== null && (isActionable(props) || passedElementProps(props).size > 0);
+};
+
+const occurrenceOf = (
+  parent: Fiber,
+  target: Fiber,
+  region: Fiber,
+  scroll: boolean,
+): { k: number | null; manySiblings?: number } => {
+  const none = { k: null };
+  for (let f: Fiber | null = region, n = 0; f && f !== parent && n < MAX_UP * 2; f = f.return, n++) {
+    if (isListCell(f)) return none;
+  }
+  const root = currentFiber(parent);
+  if (!root) { logPlace('place current parent unavailable'); return none; }
+  let visited = 0;
+  const key = clientKeyOf(target);
+  const stack: { f: Fiber; inside: boolean }[] = root.child ? [{ f: root.child, inside: false }] : [];
+  let count = 0;
+  let index = 0;
+  const isParent = (f: Fiber | null) => f !== null && (f === root || f === root.alternate);
+  while (stack.length && visited < 1000) {
+    const { f, inside } = stack.pop()!;
+    visited++;
+    if (f.sibling) stack.push({ f: f.sibling, inside });
+    if (isListCell(f)) continue;
+    const client = clientFiber(f);
+    if (client && inside) continue;
+    if (client && clientKeyOf(f) !== key) {
+      if (mayPassThrough(f) && f.child) stack.push({ f: f.child, inside: false });
+      continue;
+    }
+    if (client && !isParent(placeParentOf(f))) continue;
+    const inTarget = inside || client;
+    if (inTarget && ((scroll && client) || (!scroll && actionableFiber(f)))) {
+      count++;
+      if (f === region || f === region.alternate) index = count;
+      continue;
+    }
+    if (f.child) stack.push({ f: f.child, inside: inTarget });
+  }
+  if (stack.length) { logPlace('place occurrence scan cap'); return none; }
+  if (index === 0) { logPlace('place occurrence region not found'); return none; }
+  if (count > 20) {
+    logPlace(`place many siblings count=${count}`);
+    return { k: index, manySiblings: count };
+  }
+  return { k: count > 1 ? index : null };
+};
+
+const placeOf = (host: Fiber | null, scroll: boolean, screen: ScreenKeyResolution): TargetPlace => {
+  const hostType = typeof host?.type === 'string' ? host.type : 'unknown';
+  let start = host;
+  if (!scroll) {
+    for (let f = host, n = 0; f && n < MAX_UP; f = f.return, n++) {
+      if (actionableFiber(f)) { start = f; break; }
+    }
+  }
+  let target: Fiber | null = null;
+  let region = start;
+  for (let f = start, n = 0; f && n < MAX_UP * 2; f = f.return, n++) {
+    if (!scroll && actionableFiber(f)) region = f;
+    if (clientFiber(f)) { target = f; break; }
+  }
+  const parent = target ? placeParentOf(target) : null;
+  return {
+    screen: screen.screen,
+    parent: parent ? clientKeyOf(parent) : null,
+    target: target ? clientKeyOf(target)! : placeSegment(OUTSIDE_APP, hostType),
+    hostType,
+    ...(screen.screenPending ? { screenPending: true } : {}),
+    ...(parent && target && region ? occurrenceOf(parent, target, scroll ? target : region, scroll) : { k: null }),
+  };
+};
+
+const placeName = (place: TargetPlace) => buildPlaceId({ kind: 'press', ...place }).slice('press:'.length);
+
+export const describeTarget = (tag: number, screen = getScreenKey()): TargetDescription => {
+  const legacy = legacyTarget(tag);
+  const place = placeOf(hostFiber(tag), false, screen);
+  return {
+    ...legacy,
+    name: placeName(place),
+    source: place.target.startsWith(OUTSIDE_APP + '@') ? 'outside' : 'client',
+    legacyName: legacy.name,
+    legacySource: legacy.source,
+    place,
+  };
+};
+
 export const findInTree = (
   root: Fiber,
   match: (fiber: Fiber) => unknown,
@@ -474,7 +784,9 @@ export type ContainerNameSource =
   | 'nativeID'
   | 'component'
   | 'route'
-  | 'host';
+  | 'host'
+  | 'client'
+  | 'outside';
 
 export interface ScrollContainer {
   name: string;
@@ -482,6 +794,9 @@ export interface ScrollContainer {
   hostType: string;
   axis: ScrollAxis;
   depth: number;
+  legacyName: string;
+  legacySource: ContainerNameSource;
+  place: TargetPlace;
 }
 
 const scrollAxisOf = (fiber: Fiber): ScrollAxis =>
@@ -511,10 +826,10 @@ const routeNameAbove = (fiber: Fiber): string | null => {
 // -> ScrollView -> RCTScrollView), so testID/label/nativeID are read there first,
 // then on the components above it up to the first one with a specific name,
 // which is the fallback name.
-const nameScrollContainer = (
+const legacyScrollContainer = (
   host: Fiber,
   depth: number,
-): ScrollContainer => {
+): Omit<ScrollContainer, 'legacyName' | 'legacySource' | 'place'> => {
   const hostType = host.type as string;
   let testID: string | null = null;
   let label: string | null = null;
@@ -560,32 +875,41 @@ const nameScrollContainer = (
   return { ...base, name: hostType, source: 'host' };
 };
 
+export const nameScrollContainer = (candidate: ScrollHost, screen: ScreenKeyResolution): ScrollContainer => {
+  const host = currentFiber(candidate.host) ?? candidate.host;
+  const depth = candidate.depth;
+  const legacy = legacyScrollContainer(host, depth);
+  const place = placeOf(host, true, screen);
+  return {
+    ...legacy,
+    name: placeName(place),
+    source: place.target.startsWith(OUTSIDE_APP + '@') ? 'outside' : 'client',
+    legacyName: legacy.name,
+    legacySource: legacy.source,
+    place,
+  };
+};
+
 // The scroll view a drag moved: the nearest scrollable ancestor of the touched
 // view whose axis matches the gesture's main axis, else the nearest one. A
 // horizontal swipe on a carousel inside a vertical feed names the carousel; a
 // vertical swipe on the same spot names the feed. Scroll events carry no target
 // tag, so the ancestor chain is the only link from the touch to the container.
-export const describeScrollContainer = (
-  host: Fiber | null,
-  axis: ScrollAxis | null,
-): ScrollContainer | null => {
-  let nearest: Fiber | null = null;
-  let nearestDepth = 0;
-  let depth = 0;
-  let steps = 0;
-  for (let f: Fiber | null = host; f !== null && steps < MAX_UP * 4; f = f.return) {
-    steps++;
-    if (!isScrollHost(f)) {
-      continue;
-    }
-    if (axis === null || scrollAxisOf(f) === axis) {
-      return nameScrollContainer(f, depth);
-    }
-    if (nearest === null) {
-      nearest = f;
-      nearestDepth = depth;
-    }
-    depth++;
+export interface ScrollHost {
+  host: Fiber;
+  axis: ScrollAxis;
+  depth: number;
+}
+
+export const scrollHostsAbove = (host: Fiber | null): ScrollHost[] => {
+  const hosts: ScrollHost[] = [];
+  for (let f = host, n = 0; f && n < MAX_UP * 4; f = f.return, n++) {
+    if (isScrollHost(f)) hosts.push({ host: f, axis: scrollAxisOf(f), depth: hosts.length });
   }
-  return nearest ? nameScrollContainer(nearest, nearestDepth) : null;
+  return hosts;
 };
+
+export const selectScrollHost = (
+  hosts: readonly ScrollHost[],
+  axis: ScrollAxis | null,
+): ScrollHost | null => hosts.find(h => axis === null || h.axis === axis) ?? hosts[0] ?? null;

package/js/sdk/interactions.ts

@@ -25,7 +25,12 @@ import {
   writeRunEvent,
 } from './core';
 import {
-  describeScrollContainer,
+  getScreenKey,
+  nameScrollContainer,
+  scrollHostsAbove,
+  selectScrollHost,
+  type ScreenKeyResolution,
+  type ScrollHost,
   describeTarget,
   type Fiber,
   findInTree,
@@ -51,8 +56,9 @@ interface ActivePress {
   key: string;
   seq: number;
   target: TargetDescription;
-  host: Fiber | null;
+  screen: ScreenKeyResolution;
   container: ScrollContainer | null;
+  scrollHosts: ScrollHost[];
   identifier: unknown;
   touchStartT: number;
   touchEndT: number | null;
@@ -216,7 +222,7 @@ const details = (press: ActivePress) => () => {
     target: press.target,
     ...(press.kind === 'drag'
       ? {
-          touched: press.target.name,
+          touched: press.target.legacyName,
           container: press.container,
           nameSource: press.container
             ? `container.${press.container.source}`
@@ -264,6 +270,19 @@ const finishPress = (press: ActivePress, reason: string, at?: number) => {
   }
 };
 
+// A drag is named after its scroll view (REQ-MEAS-10). Returns whether the gesture is a drag.
+const classify = (press: ActivePress) => {
+  const drag = press.maxMovePt >= DRAG_SLOP_PT || press.scrolled || press.takenByScroll;
+  press.kind = drag ? 'drag' : 'press';
+  if (drag) {
+    const axis = dragAxis(press);
+    const candidate = selectScrollHost(press.scrollHosts, axis);
+    press.container = candidate ? nameScrollContainer(candidate, press.screen) : null;
+    markers.rename(press.key, dragName(press), `drag:${press.container?.legacyName ?? press.target.legacyName}`);
+  }
+  return drag;
+};
+
 const onTouchStart = (ne: Record<string, unknown>) => {
   const touches = ne.touches;
   if (Array.isArray(touches) && touches.length > 1) {
@@ -281,25 +300,19 @@ const onTouchStart = (ne: Record<string, unknown>) => {
       touchStartT,
     );
   }
-  const target: TargetDescription =
-    tag === null
-      ? {
-          name: 'unknown',
-          source: 'tag',
-          tag: -1,
-          testID: null,
-          accessibilityLabel: null,
-          component: null,
-          actionable: false,
-        }
-      : describeTarget(tag);
+  const screen = getScreenKey();
+  const target = describeTarget(tag ?? -1, screen);
+  if (tag === null) target.legacyName = 'unknown';
+  const host = tag === null ? null : hostFiber(tag);
+  const scrollHosts = scrollHostsAbove(host);
   seq++;
   const press: ActivePress = {
     key: `press#${seq}`,
     seq,
     target,
-    host: tag === null ? null : hostFiber(tag),
+    screen,
     container: null,
+    scrollHosts,
     identifier: ne.identifier,
     touchStartT,
     touchEndT: null,
@@ -323,8 +336,14 @@ const onTouchStart = (ne: Record<string, unknown>) => {
   markers.start(name, {
     key: press.key,
     kind: 'press',
+    legacyName: `press:${target.legacyName}`,
     at: touchStartT,
     details: details(press),
+    // A touch whose touchEnd never reached JS (its view unmounted, the app left the foreground) is classified by how
+    // far it moved, so a swipe stays a drag on its list.
+    beforeEnd: () => {
+      if (press.kind === null) classify(press);
+    },
   });
 };
 
@@ -418,20 +437,15 @@ const onTouchEnd = (ne: Record<string, unknown>, cancelled: boolean) => {
   press.touchEndT = num(ne.timestamp) ?? now();
   // A scroll view cancels the touch when it takes the gesture. On a list still moving from a fling it does so at once,
   // before the finger passes the slop, so the move alone would call a fling a press on the row under the finger.
-  press.takenByScroll = cancelled && describeScrollContainer(press.host, null) !== null;
-  const drag = press.maxMovePt >= DRAG_SLOP_PT || press.scrolled || press.takenByScroll;
-  press.kind = drag ? 'drag' : 'press';
-  if (drag) {
-    press.container = describeScrollContainer(press.host, dragAxis(press));
-    const name = dragName(press);
-    markers.rename(press.key, name);
+  press.takenByScroll = cancelled && press.scrollHosts.length > 0;
+  if (classify(press)) {
     return;
   }
   if (cancelled) {
     markers.point('touch.cancel');
   }
   const name = pressName(press);
-  if (!cancelled && isFaultTarget(name)) {
+  if (!cancelled && isFaultTarget({ name, legacyName: `press:${press.target.legacyName}`, target: press.target })) {
     press.faultsRun = true;
     runOpenFaults(name);
     if (settings.faults.dupnet > 0) {

package/js/sdk/place.ts

@@ -0,0 +1,25 @@
+let placeLog: (message: string) => void = () => undefined;
+export const setPlaceLog = (log: (message: string) => void) => { placeLog = log; };
+export const logPlace = (message: string) => placeLog(message);
+
+export interface PlaceKeyInput {
+  kind: 'screen' | 'launch' | 'press' | 'drag';
+  screen: string;
+  parent?: string | null;
+  target?: string | null;
+  k?: number | null;
+  visit?: number | 'repeat' | null;
+}
+
+// Pinned to facts/components.cjs by the shared place-keys.json vectors.
+export const placeSegment = (name: string, file: string) =>
+  `${name}@${encodeURIComponent(file).replace(/%2F/g, '/').replace(/%40/g, '@').replace(/~/g, '%7E')}`;
+
+export const buildPlaceId = (parts: PlaceKeyInput): string => {
+  const id = parts.kind === 'screen' ? `screen:${parts.screen}#${parts.visit}`
+    : parts.kind === 'launch' ? `launch:${parts.screen}`
+    : `${parts.kind}:${parts.screen}›${parts.parent ? parts.parent + '›' : ''}${parts.target}${parts.k ? '~' + parts.k : ''}`;
+  if ((parts.kind === 'press' || parts.kind === 'drag') && id.includes('#')) logPlace('place unexpected # in input id');
+  if (id.length > 900) logPlace(`place long id length=${id.length}`);
+  return id;
+};

package/js/sdk/profile-export.ts

@@ -52,6 +52,7 @@ const elementType = (tag: number) =>
 export interface ExportFiber {
   id: number;
   name: string;
+  owner: string;
   type: number;
   // Component ancestors, nearest first.
   ancestors: number[];
@@ -147,10 +148,12 @@ export const exportFiber = (
   actualMs: number | null,
   selfMs: number | null,
   ancestors: number[] = ancestorsOf(fiber),
+  owner: string,
 ): ExportFiber => {
   return {
     id: fiberId(fiber),
     name,
+    owner,
     type: elementType(fiber.tag),
     ancestors,
     actualMs: actualMs ?? 0,
@@ -215,6 +218,17 @@ export const buildReactExport = (t0: number, commits: ExportCommit[]): ReactExpo
       added.add(fiber.id);
     }
     const table = strings.flatMap(encodeString);
+    const ownerNames: string[] = [];
+    const ownerIndices = new Map<string, number>();
+    const byFiber = commit.fibers.map(fiber => {
+      let index = ownerIndices.get(fiber.owner);
+      if (index === undefined) {
+        index = ownerNames.length;
+        ownerNames.push(fiber.owner);
+        ownerIndices.set(fiber.owner, index);
+      }
+      return [fiber.id, index];
+    });
     operations.push([RENDERER_ID, ROOT_ID, table.length, ...table, ...ops]);
     commitData.push({
       changeDescriptions: commit.fibers.map(f => [f.id, changeDescription(f.cause)]),
@@ -226,6 +240,7 @@ export const buildReactExport = (t0: number, commits: ExportCommit[]): ReactExpo
       priorityLevel: null,
       timestamp: Math.max(0, commit.t - t0),
       keepsnappyCauses: commit.causes,
+      keepsnappyOwners: { names: ownerNames, byFiber },
       keepsnappyCarrier: commit.carrier,
       keepsnappyStore: commit.store,
       keepsnappyTask: commit.task,