@userflow-tech/react-native 0.1.0 → 0.2.0

package/lib/typescript/module/src/surfaces/tooltip/computeTooltipPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"computeTooltipPosition.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/tooltip/computeTooltipPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,oBAAoB,EACpB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,YAAY,EAAE,QAAQ,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,mDAAmD;IACnD,mBAAmB,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACnF;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE;IAC3C,MAAM,EAAE,IAAI,CAAC;IACb,UAAU,EAAE,IAAI,CAAC;IACjB,SAAS,EAAE,oBAAoB,CAAC;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,UAAU,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,aAAa,CA2EhB"}
+{"version":3,"file":"computeTooltipPosition.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/tooltip/computeTooltipPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,oBAAoB,EACpB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAa;IAC5B,YAAY,EAAE,QAAQ,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B;;;;OAIG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,mBAAmB,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACnF;AAiDD;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE;IAC3C,MAAM,EAAE,IAAI,CAAC;IACb,UAAU,EAAE,IAAI,CAAC;IACjB,SAAS,EAAE,oBAAoB,CAAC;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC1C,GAAG,aAAa,CA0FhB"}

package/lib/typescript/module/src/surfaces/tooltip/inferTooltipPlacement.d.ts

@@ -19,16 +19,62 @@ export interface WindowSize {
     height: number;
 }
 export declare const VIEWPORT_PADDING = 24;
+/** Per-edge screen margin; each omitted edge falls back to `viewportPadding`. */
+export interface TooltipViewportInsets {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+export interface TooltipPlacementFitsOpts {
+    target: Rect;
+    bubbleSize: Size;
+    notchSize: number;
+    windowSize: WindowSize;
+    placement: TooltipPlacementSide;
+    viewportPadding?: number;
+    /**
+     * Per-edge screen margin. When omitted, `viewportPadding` is used on every
+     * side so this agrees with `computeTooltipPosition`'s clamp.
+     */
+    viewportInsets?: TooltipViewportInsets;
+    /**
+     * When set, ABOVE/BELOW compare against `min(height, minHeight)` so a
+     * scrollable card that can shrink is allowed to fit. Omit to keep the
+     * historical full-height check used by {@link inferTooltipPlacement}.
+     */
+    minHeight?: number;
+}
+/**
+ * Whether `placement` has room beside `target` for `bubbleSize`.
+ *
+ * Inclusive: a card that exactly fills the remaining gap (LEFT/RIGHT after
+ * side-narrowing) still fits. Every side reserves the matching edge margin so
+ * this agrees with the clamp in `computeTooltipPosition`; when the two
+ * disagree, a placement passes here and is then drawn somewhere else.
+ */
+export declare function tooltipPlacementFits({ target, bubbleSize, notchSize, windowSize, placement, viewportPadding, viewportInsets, minHeight, }: TooltipPlacementFitsOpts): boolean;
 /**
  * Port of web FlowChrome `inferTooltipPlacement` with distance-sorted flip
  * (not the prototype's fixed BELOW→ABOVE→RIGHT→LEFT priority).
+ *
+ * When no side fits, returns `desiredPlacement` (or BELOW) as a last resort —
+ * callers must check {@link tooltipPlacementFits} on the result to tell a real
+ * fit from that fallback.
  */
-export declare function inferTooltipPlacement({ target, bubbleSize, notchSize, windowSize, currentPlacement, desiredPlacement, }: {
+export declare function inferTooltipPlacement({ target, bubbleSize, notchSize, windowSize, currentPlacement, desiredPlacement, viewportPadding, viewportInsets, minHeight, }: {
     target: Rect;
     bubbleSize: Size;
     notchSize: number;
     windowSize: WindowSize;
     currentPlacement: TooltipPlacementSide | null;
     desiredPlacement: TooltipPlacementSide | null;
+    viewportPadding?: number;
+    /**
+     * Per-edge screen margin. When omitted, `viewportPadding` is used on every
+     * side so infer agrees with `computeTooltipPosition`'s clamp.
+     */
+    viewportInsets?: TooltipViewportInsets;
+    minHeight?: number;
 }): TooltipPlacementSide;
 //# sourceMappingURL=inferTooltipPlacement.d.ts.map

package/lib/typescript/module/src/surfaces/tooltip/inferTooltipPlacement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inferTooltipPlacement.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/tooltip/inferTooltipPlacement.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAID,eAAO,MAAM,gBAAgB,KAA2B,CAAC;AAEzD;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,UAAU,EACV,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,gBAAgB,GACjB,EAAE;IACD,MAAM,EAAE,IAAI,CAAC;IACb,UAAU,EAAE,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,gBAAgB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC9C,gBAAgB,EAAE,oBAAoB,GAAG,IAAI,CAAC;CAC/C,GAAG,oBAAoB,CA6DvB"}
+{"version":3,"file":"inferTooltipPlacement.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/tooltip/inferTooltipPlacement.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAID,eAAO,MAAM,gBAAgB,KAA2B,CAAC;AAEzD,iFAAiF;AACjF,MAAM,WAAW,qBAAqB;IACpC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,IAAI,CAAC;IACb,UAAU,EAAE,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,oBAAoB,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,eAAkC,EAClC,cAAc,EACd,SAAS,GACV,EAAE,wBAAwB,GAAG,OAAO,CAmCpC;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,UAAU,EACV,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,eAAkC,EAClC,cAAc,EACd,SAAS,GACV,EAAE;IACD,MAAM,EAAE,IAAI,CAAC;IACb,UAAU,EAAE,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,gBAAgB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC9C,gBAAgB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,oBAAoB,CAsDvB"}

package/lib/typescript/module/src/surfaces/tooltip/placementDiagnostics.d.ts

@@ -0,0 +1,39 @@
+import type { TooltipPlacementSide } from './inferTooltipPlacement';
+/** Sink for placement diagnostics. Injected in tests. */
+export type PlacementLogger = (message: string) => void;
+export declare const defaultPlacementLogger: PlacementLogger;
+/**
+ * A Builder-requested LEFT/RIGHT side could not be drawn at all: the room
+ * beside the target is smaller than the card's own chrome, so no width is left
+ * to lay content out in. Draft/preview and `__DEV__` only.
+ *
+ * The caller must not emit this when the side was honored at a reduced width —
+ * shrinking is the expected outcome now, and whether it looks good is the
+ * author's call — nor for keyboard / off-screen vertical flips, whose cause is
+ * not the room beside the target.
+ */
+export declare function tooltipSidePlacementDroppedMessage(opts: {
+    requested: 'LEFT' | 'RIGHT';
+    used: TooltipPlacementSide;
+    availableGap: number;
+    minWidth: number;
+}): string;
+export declare function warnTooltipSidePlacementDropped(opts: {
+    requested: 'LEFT' | 'RIGHT';
+    used: TooltipPlacementSide;
+    availableGap: number;
+    minWidth: number;
+}, log?: PlacementLogger): void;
+/**
+ * No side had room for the card — including the authored LEFT/RIGHT — so
+ * {@link inferTooltipPlacement} returned the requested side as a last resort.
+ * Draft/preview and `__DEV__` only. Distinct from
+ * {@link tooltipSidePlacementDroppedMessage}, which reports a successful flip.
+ */
+export declare function tooltipPlacementUnanchoredMessage(opts: {
+    requested: TooltipPlacementSide;
+}): string;
+export declare function warnTooltipPlacementUnanchored(opts: {
+    requested: TooltipPlacementSide;
+}, log?: PlacementLogger): void;
+//# sourceMappingURL=placementDiagnostics.d.ts.map

package/lib/typescript/module/src/surfaces/tooltip/placementDiagnostics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placementDiagnostics.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/tooltip/placementDiagnostics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAIpE,yDAAyD;AACzD,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;AAExD,eAAO,MAAM,sBAAsB,EAAE,eAGpC,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,kCAAkC,CAAC,IAAI,EAAE;IACvD,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,IAAI,EAAE,oBAAoB,CAAC;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,MAAM,CAQT;AAED,wBAAgB,+BAA+B,CAC7C,IAAI,EAAE;IACJ,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,IAAI,EAAE,oBAAoB,CAAC;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB,EACD,GAAG,GAAE,eAAwC,GAC5C,IAAI,CAEN;AAED;;;;;GAKG;AACH,wBAAgB,iCAAiC,CAAC,IAAI,EAAE;IACtD,SAAS,EAAE,oBAAoB,CAAC;CACjC,GAAG,MAAM,CAKT;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE;IAAE,SAAS,EAAE,oBAAoB,CAAA;CAAE,EACzC,GAAG,GAAE,eAAwC,GAC5C,IAAI,CAEN"}

package/lib/typescript/module/src/surfaces/tooltip/rect.d.ts

@@ -1,4 +1,6 @@
 import type { Rect, WindowSize } from './inferTooltipPlacement';
+/** Grow or shrink `rect` by `padding` on every side. */
+export declare function expandRect(rect: Rect, padding: number): Rect;
 /** True when two rects are identical (used to avoid redundant setState). */
 export declare function rectsEqual(a: Rect | null, b: Rect | null): boolean;
 /** Fully outside the window (no intersection). Kept for callers that need it. */

package/lib/typescript/module/src/surfaces/tooltip/rect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rect.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/tooltip/rect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEhE,4EAA4E;AAC5E,wBAAgB,UAAU,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,CAIlE;AAED,iFAAiF;AACjF,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,GAAG,OAAO,CAO3E;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,GAAG,OAAO,CASnF;AAED,sEAAsE;AACtE,wBAAgB,sBAAsB,CACpC,UAAU,EAAE,UAAU,EACtB,MAAM,CAAC,EAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GACxE,iBAAiB,CAWnB"}
+{"version":3,"file":"rect.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/tooltip/rect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEhE,wDAAwD;AACxD,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAQ5D;AAED,4EAA4E;AAC5E,wBAAgB,UAAU,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,CAIlE;AAED,iFAAiF;AACjF,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,GAAG,OAAO,CAO3E;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,GAAG,OAAO,CASnF;AAED,sEAAsE;AACtE,wBAAgB,sBAAsB,CACpC,UAAU,EAAE,UAAU,EACtB,MAAM,CAAC,EAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GACxE,iBAAiB,CAWnB"}

package/lib/typescript/module/src/surfaces/tooltip/resolveSideCardWidth.d.ts

@@ -0,0 +1,76 @@
+import type { Rect } from './inferTooltipPlacement';
+/**
+ * Narrowest a side card may get: the width it spends on its own chrome, so
+ * content padding on both edges plus the border. Below this there is nothing
+ * left to lay text out in, and React Native overflows the card instead of
+ * shrinking it — the preview would stop showing the author what ships.
+ *
+ * Deliberately structural, not a readability judgment. How narrow is *too*
+ * narrow to read is the author's call, made against the device preview.
+ */
+export declare function tooltipMinSideCardWidth(opts: {
+    contentPadding: number;
+    borderWidth?: number;
+    cardMaxWidth: number;
+}): number;
+/**
+ * Horizontal room beside an expanded target for a LEFT/RIGHT tooltip.
+ *
+ * Reserves `viewportPadding` on the screen edge the card grows toward, matching
+ * the LEFT/RIGHT clamp in `computeTooltipPosition`. Web clamps side placements
+ * to the raw edge instead; RN keeps the screen margin because an edge-to-edge
+ * card reads as broken on a phone-width viewport.
+ */
+export declare function tooltipSideGap(opts: {
+    placement: 'LEFT' | 'RIGHT';
+    target: Rect;
+    windowWidth: number;
+    notchSize: number;
+    viewportPadding?: number;
+}): number;
+/**
+ * Width a LEFT/RIGHT tooltip may use: the room beside the target, capped at the
+ * theme width. The card takes whatever is left and grows taller to compensate.
+ * Null when not even {@link tooltipMinSideCardWidth} fits, so placement falls
+ * back to the vertical flip.
+ *
+ * `target` must already be expanded by backdrop padding and outside highlight
+ * spread — the same rect passed to `inferTooltipPlacement`.
+ */
+export declare function resolveTooltipSideCardWidth(opts: {
+    placement: 'LEFT' | 'RIGHT';
+    target: Rect;
+    windowWidth: number;
+    notchSize: number;
+    cardMaxWidth: number;
+    minWidth: number;
+    viewportPadding?: number;
+}): number | null;
+/**
+ * Shortest a card may get: the height it spends on its own chrome, so
+ * content padding on both edges plus the border. Mirrors
+ * {@link tooltipMinSideCardWidth} on the vertical axis.
+ */
+export declare function tooltipMinCardHeight(opts: {
+    contentPadding: number;
+    borderWidth?: number;
+    cardMaxHeight: number;
+}): number;
+/**
+ * Vertical room above or below an expanded target for an ABOVE/BELOW tooltip.
+ *
+ * Reserves the matching viewport inset on the edge the card grows toward,
+ * matching the ABOVE/BELOW clamp in `computeTooltipPosition`.
+ */
+export declare function tooltipVerticalGap(opts: {
+    placement: 'ABOVE' | 'BELOW';
+    target: Rect;
+    windowHeight: number;
+    notchSize: number;
+    viewportPadding?: number;
+    viewportInsets?: {
+        top?: number;
+        bottom?: number;
+    };
+}): number;
+//# sourceMappingURL=resolveSideCardWidth.d.ts.map

package/lib/typescript/module/src/surfaces/tooltip/resolveSideCardWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveSideCardWidth.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/tooltip/resolveSideCardWidth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpD;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE;IAC5C,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,GAAG,MAAM,CAaT;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE;IACnC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,MAAM,EAAE,IAAI,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,MAAM,CAMT;AAED;;;;;;;;GAQG;AACH,wBAAgB,2BAA2B,CAAC,IAAI,EAAE;IAChD,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,MAAM,EAAE,IAAI,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,MAAM,GAAG,IAAI,CAKhB;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB,GAAG,MAAM,CAWT;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE;IACvC,SAAS,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7B,MAAM,EAAE,IAAI,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD,GAAG,MAAM,CAQT"}

package/lib/typescript/module/src/version.d.ts

@@ -1,3 +1,3 @@
 /** Generated by scripts/write-version.mjs — do not edit. */
-export declare const SDK_VERSION = "0.1.0";
+export declare const SDK_VERSION = "0.2.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@userflow-tech/react-native",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Userflow SDK for React Native — onboarding flows, tooltips, and modals.",
   "license": "SEE LICENSE IN LICENSE",
   "main": "./lib/commonjs/index.js",
@@ -42,25 +42,46 @@
         "default": "./lib/commonjs/expo-router/index.js"
       }
     },
+    "./babel-plugin": {
+      "types": "./babel-plugin/index.d.ts",
+      "default": "./babel-plugin.js"
+    },
+    "./app.plugin": "./app.plugin.js",
+    "./app.plugin.js": "./app.plugin.js",
     "./package.json": "./package.json"
   },
   "files": [
     "src",
     "lib",
     "docs",
+    "vendor",
+    "expo-plugin",
+    "babel-plugin",
+    "babel-plugin.js",
+    "app.plugin.js",
     "!**/__tests__",
     "!**/*.test.*",
     "LICENSE"
   ],
+  "scripts": {
+    "build": "node ../../scripts/write-version.mjs SDK_VERSION && bob build",
+    "test": "jest",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit",
+    "pretest": "node ../../scripts/write-version.mjs SDK_VERSION",
+    "prepack": "node ../../scripts/prepare-sdk-pack.mjs",
+    "postpack": "node ../../scripts/restore-sdk-pack.mjs",
+    "clean": "rimraf lib vendor expo-plugin babel-plugin"
+  },
   "peerDependencies": {
-    "@react-native-async-storage/async-storage": ">=1.23.0",
     "@react-native-community/netinfo": ">=11.0.0",
     "@react-navigation/native": ">=6.0.0",
     "expo-router": ">=3.0.0",
     "expo-secure-store": ">=13.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
-    "react-native-safe-area-context": ">=4.0.0"
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-view-shot": ">=5.0.0"
   },
   "peerDependenciesMeta": {
     "@react-native-community/netinfo": {
@@ -80,18 +101,20 @@
     }
   },
   "dependencies": {
-    "@userflow-tech/protocol": "0.1.0",
-    "@userflow-tech/core": "0.1.0"
+    "@react-native-async-storage/async-storage": ">=1.23.0",
+    "@userflow-tech/core": "file:./vendor/core",
+    "@userflow-tech/protocol": "file:./vendor/protocol"
   },
   "devDependencies": {
     "@babel/core": "^7.25.0",
-    "@react-native-async-storage/async-storage": "^2.1.2",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native/babel-preset": "^0.81.5",
     "@react-navigation/native": "^7.1.6",
     "@types/jest": "^29.5.12",
     "@types/react": "~19.1.10",
     "@types/react-test-renderer": "^19.1.0",
+    "@userflow-tech/eslint-config": "workspace:*",
+    "@userflow-tech/tsconfig": "workspace:*",
     "babel-jest": "^29.7.0",
     "expo-router": "^5.1.0",
     "jest": "^29.7.0",
@@ -100,11 +123,10 @@
     "react-native-builder-bob": "^0.30.0",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
+    "react-native-view-shot": "^5.1.1",
     "react-test-renderer": "19.1.0",
     "rimraf": "^5.0.5",
-    "typescript": "^5.4.0",
-    "@userflow-tech/tsconfig": "0.0.0",
-    "@userflow-tech/eslint-config": "0.0.0"
+    "typescript": "^5.4.0"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -132,13 +154,5 @@
   },
   "publishConfig": {
     "access": "restricted"
-  },
-  "scripts": {
-    "build": "node ../../scripts/write-version.mjs SDK_VERSION && bob build",
-    "test": "jest",
-    "lint": "eslint src",
-    "typecheck": "tsc --noEmit",
-    "pretest": "node ../../scripts/write-version.mjs SDK_VERSION",
-    "clean": "rimraf lib"
   }
-}
+}

package/src/anchors/AutoAnchorRegistry.ts

@@ -1,6 +1,14 @@
 import type { SemanticRole, SemanticSegment, SiblingDescriptor } from '@userflow-tech/protocol';
 import type { MutableRefObject, RefObject } from 'react';
 
+import { getLiveHostProps, type AnyFiber } from './fiber/fiberInternals';
+import {
+  createLazyHostFiberIndex,
+  lookupHostFiber,
+  type HostFiberIndex,
+} from './fiber/indexHostFibers';
+import { readHostPlaceholder, readHostText } from './fiber/readHostContent';
+
 /**
  * Multi-instance auto-anchor registry for Stage 3.
  *
@@ -13,7 +21,7 @@ export type AutoAnchorRef = RefObject<unknown> | MutableRefObject<unknown>;
 
 export type AutoAnchorListener = () => void;
 
-/** Build-time descriptor stamped by `@userflow-tech/babel-plugin` (full or expanded compact). */
+/** Build-time descriptor stamped by `@userflow-tech/react-native/babel-plugin` (full or expanded compact). */
 export interface BuildTimeHints {
   /** Canonical structural path (IDs replace ordinals when present). */
   ufid: string;
@@ -113,11 +121,31 @@ function siblingGroupKey(inst: AutoAnchorInstance): string {
   return idx === -1 ? path : path.slice(0, idx);
 }
 
+/**
+ * What an author can see that tells this instance apart from a lookalike.
+ * Same signals `deriveIdentityStrength` calls `content`. Undefined when the
+ * instance shows nothing of its own.
+ */
+function contentSignature(inst: AutoAnchorInstance): string | undefined {
+  const parts = [inst.childText, inst.accessibilityLabel, inst.iconName, inst.imageSrc].filter(
+    (part): part is string => !!part,
+  );
+  return parts.length > 0 ? parts.join('\u0000') : undefined;
+}
+
+interface LiveContentCache {
+  fiber: AnyFiber;
+  /** Props object identity — React replaces it on every render. */
+  props: Record<string, unknown> | undefined;
+  childText: string;
+}
+
 export class AutoAnchorRegistry {
   private readonly instances = new Map<string, AutoAnchorInstance>();
   private readonly byRegistryKey = new Map<string, Set<string>>();
   private readonly byManualId = new Map<string, Set<string>>();
   private readonly byTemplatePath = new Map<string, Set<string>>();
+  private readonly liveContent = new Map<string, LiveContentCache>();
   private readonly listeners = new Set<AutoAnchorListener>();
   private notifyScheduled = false;
 
@@ -301,6 +329,97 @@ export class AutoAnchorRegistry {
     };
   }
 
+  /**
+   * Fill `childText` (and live `testID`) from the host fiber. Live content
+   * wins when readable; the build-time hint is the fallback.
+   *
+   * Direct fiber pointers are preferred; the scan-root index is built lazily
+   * and only if some instance cannot reach its fiber that way (Paper release
+   * builds, mainly), then reused for the rest of the pass.
+   *
+   * Silent — does not notify listeners.
+   */
+  refreshLiveContent(instances?: AutoAnchorInstance[]): void {
+    const list = instances ?? this.allInstances();
+    const getIndex = createLazyHostFiberIndex();
+    const seen = new Set<string>();
+    for (const inst of list) {
+      if (seen.has(inst.instanceId)) continue;
+      seen.add(inst.instanceId);
+      this.refreshOneLiveContent(inst, getIndex);
+    }
+  }
+
+  private refreshOneLiveContent(inst: AutoAnchorInstance, getIndex: () => HostFiberIndex): void {
+    let fiber: AnyFiber | null = null;
+    try {
+      fiber = lookupHostFiber(getIndex, inst.ref.current);
+    } catch {
+      fiber = null;
+    }
+    if (!fiber) return;
+
+    let props: Record<string, unknown> | undefined;
+    try {
+      props = getLiveHostProps(fiber);
+    } catch {
+      props = undefined;
+    }
+
+    const cached = this.liveContent.get(inst.instanceId);
+    // Same fiber and same props object means no re-render since the last read,
+    // so the subtree walk would return what we already have. Matters because
+    // resolution polls this for every registered instance.
+    if (cached && cached.fiber === fiber && props !== undefined && cached.props === props) {
+      inst.childText = cached.childText;
+      return;
+    }
+
+    if (props) this.applyLiveIdentity(inst, props);
+
+    let live: string | undefined;
+    try {
+      live =
+        inst.role === 'Input'
+          ? (readHostPlaceholder(fiber) ?? readHostText(fiber))
+          : readHostText(fiber);
+    } catch {
+      live = undefined;
+    }
+
+    if (live) {
+      const changed = inst.childText !== live;
+      inst.childText = live;
+      this.liveContent.set(inst.instanceId, { fiber, props, childText: live });
+      // Text is what separates helper-rendered twins, so the group's ambiguity
+      // verdict is only trustworthy once it has been read.
+      if (changed) this.recomputeAmbiguity(inst.registryKey, inst.templatePath, inst.manualId);
+      return;
+    }
+    if (cached && cached.fiber !== fiber) {
+      this.liveContent.delete(inst.instanceId);
+    }
+  }
+
+  /**
+   * Copy `testID` off the live host so a shared `__userflowAutoAnchor` callback
+   * (helper-rendered rows) cannot pin every instance to the last render's bag.
+   * Silent — no listener notify.
+   */
+  private applyLiveIdentity(inst: AutoAnchorInstance, props: Record<string, unknown>): void {
+    const raw = props.testID;
+    const liveTestID = typeof raw === 'string' && raw.trim() ? raw.trim() : undefined;
+    if (!liveTestID || liveTestID === inst.testID) return;
+
+    const prev = { manualId: inst.manualId, userflowId: inst.userflowId, testID: inst.testID };
+    inst.testID = liveTestID;
+    if (!inst.userflowId && (!inst.manualId || inst.manualId === prev.testID)) {
+      inst.manualId = liveTestID;
+    }
+    this.refreshManualIndexes(inst, prev);
+    this.recomputeAmbiguity(inst.registryKey, inst.templatePath, inst.manualId);
+  }
+
   subscribe(listener: AutoAnchorListener): () => void {
     this.listeners.add(listener);
     return () => {
@@ -321,6 +440,7 @@ export class AutoAnchorRegistry {
     this.byRegistryKey.clear();
     this.byManualId.clear();
     this.byTemplatePath.clear();
+    this.liveContent.clear();
     this.notifyScheduled = false;
     nextInstanceSeq = 1;
   }
@@ -341,6 +461,7 @@ export class AutoAnchorRegistry {
     }
 
     this.instances.delete(instanceId);
+    this.liveContent.delete(instanceId);
     this.removeIndex(this.byRegistryKey, inst.registryKey, instanceId);
     this.removeIndex(this.byTemplatePath, inst.templatePath, instanceId);
     if (inst.manualId) this.removeIndex(this.byManualId, inst.manualId, instanceId);
@@ -373,12 +494,28 @@ export class AutoAnchorRegistry {
     }
   }
 
+  /**
+   * Instances sharing a template path are only twins while they look alike.
+   * Four rows from one `field()` helper are indistinguishable at register time
+   * and separate once their labels are read, so ambiguity is decided on
+   * content, not on the shared path alone. An instance stays ambiguous when it
+   * carries no content of its own, or when a peer carries the same content.
+   */
   private recomputeAmbiguity(registryKey: string, templatePath: string, manualId?: string): void {
     const mark = (list: AutoAnchorInstance[]) => {
-      const ambiguous = list.length > 1 && list.every((i) => !i.manualId);
+      const unlabelled = list.length > 1 && list.every((i) => !i.manualId);
+      const shared = new Map<string, number>();
+      if (unlabelled) {
+        for (const i of list) {
+          const sig = contentSignature(i);
+          if (sig) shared.set(sig, (shared.get(sig) ?? 0) + 1);
+        }
+      }
       for (const i of list) {
+        const sig = unlabelled ? contentSignature(i) : undefined;
+        const twins = unlabelled && (!sig || (shared.get(sig) ?? 0) > 1);
         i.ambiguous =
-          ambiguous || (i.manualId ? this.getInstancesByManualId(i.manualId).length > 1 : false);
+          twins || (i.manualId ? this.getInstancesByManualId(i.manualId).length > 1 : false);
       }
     };
     mark(this.getInstancesByRegistryKey(registryKey));

package/src/anchors/anchorChangeTicker.ts

@@ -1,4 +1,5 @@
 import { anchorRegistry } from './AnchorRegistry';
+import { autoAnchorRegistry } from './AutoAnchorRegistry';
 import { fiberScanRoot } from './fiber/FiberScanRoot';
 
 type Listener = () => void;
@@ -9,6 +10,7 @@ type Listener = () => void;
  * Fiber-resolved anchors (testID / nativeID / accessibilityLabel) do not emit
  * registry events, so we combine:
  * - {@link anchorRegistry} mount/unmount
+ * - {@link autoAnchorRegistry} mount/unmount
  * - {@link fiberScanRoot} mount/unmount
  * - screen-change notifications
  * - a slow interval that only runs while at least one listener is subscribed
@@ -17,6 +19,7 @@ class AnchorChangeTicker {
   private readonly listeners = new Set<Listener>();
   private intervalHandle: ReturnType<typeof setInterval> | null = null;
   private unsubRegistry: (() => void) | null = null;
+  private unsubAuto: (() => void) | null = null;
   private unsubScan: (() => void) | null = null;
 
   /** Poll interval while ELEMENT conditions are tracked (ms). */
@@ -51,6 +54,9 @@ class AnchorChangeTicker {
     if (!this.unsubRegistry) {
       this.unsubRegistry = anchorRegistry.subscribe(() => this.emit());
     }
+    if (!this.unsubAuto) {
+      this.unsubAuto = autoAnchorRegistry.subscribe(() => this.emit());
+    }
     if (!this.unsubScan) {
       this.unsubScan = fiberScanRoot.subscribe(() => this.emit());
     }
@@ -68,6 +74,10 @@ class AnchorChangeTicker {
       this.unsubRegistry();
       this.unsubRegistry = null;
     }
+    if (this.unsubAuto) {
+      this.unsubAuto();
+      this.unsubAuto = null;
+    }
     if (this.unsubScan) {
       this.unsubScan();
       this.unsubScan = null;

package/src/anchors/autoAnchor.ts

@@ -10,7 +10,7 @@ import {
 import { expandBuildTimeHints, isHintsInput, type HintsInput } from './hintsCodec';
 
 /**
- * Runtime half of build-time auto-anchoring (see `@userflow-tech/babel-plugin`).
+ * Runtime half of build-time auto-anchoring (see `@userflow-tech/react-native/babel-plugin`).
  *
  * Each mount creates a distinct AutoAnchorRegistry instance. Shared templates
  * (design-system / list rows) register separately and are marked ambiguous

package/src/anchors/elementConditionEvaluator.ts

@@ -3,24 +3,29 @@ import type { FlowConditionFragment } from '@userflow-tech/protocol';
 
 import { anchorChangeTicker } from './anchorChangeTicker';
 import { resolveAnchorHost } from './resolveAnchorHost';
+import { resolveAutoAnchorHost } from './resolveAutoAnchorHost';
 import { resolveManualAnchorId } from './resolveManualAnchorId';
 
 /** ELEMENT states the mobile SDK can evaluate today. */
 const SUPPORTED_ELEMENT_STATES = new Set(['PRESENT', 'NOT_PRESENT']);
 
 /**
- * Evaluate ELEMENT client conditions against manual anchors and fiber-resolved
- * `testID` / `nativeID` / `accessibilityLabel` targets.
+ * Evaluate ELEMENT client conditions against manual anchors, fiber-resolved
+ * `testID` / `nativeID` / `accessibilityLabel` targets, and AUTO (codeless)
+ * selectors.
  *
- * Supports PRESENT / NOT_PRESENT for MANUAL selectors (`css` → anchor id).
- * AUTO / codeless selectors and web-interaction states (CLICK, DISABLED, …)
- * report unknown (`null`) so gated flows stay blocked rather than inventing
- * a truth value.
+ * Supports PRESENT / NOT_PRESENT for MANUAL selectors (`css` → anchor id) and
+ * AUTO selectors (`autoData` → {@link resolveAutoAnchorHost}). AUTO fails
+ * closed: `unknown` / `ambiguous` stay `null` so a gated flow never starts
+ * just because the auto-anchor registry is empty. Web-interaction states
+ * (CLICK, DISABLED, …) still report unknown.
  *
- * "Present" means `resolveAnchorHost` finds a unique host. That already skips
- * screens covered by another navigator screen, so an id on a pushed-under
- * screen counts as absent. Pixel visibility (off-screen inside a ScrollView,
- * opacity 0, etc.) would need async `measureInWindow` and is out of scope.
+ * "Present" means a unique host on a **visible** navigator screen. MANUAL
+ * goes through `resolveAnchorHost`; AUTO through `resolveAutoAnchorHost`.
+ * Both skip screens covered by another navigator screen, so an id on a
+ * pushed-under screen counts as absent. Pixel visibility (off-screen inside a
+ * ScrollView, opacity 0, etc.) would need async `measureInWindow` and is out
+ * of scope.
  *
  * Note: compares string literals rather than importing protocol enums so Jest
  * (which cannot resolve the ESM-only `@userflow-tech/protocol` package) stays
@@ -78,12 +83,20 @@ function evaluateElementCondition(
   }
 
   if ((selector.type as string | null) === 'AUTO') {
-    warnOnce(
-      condition.id,
-      `[Userflow] ELEMENT condition ${condition.id} uses an AUTO (codeless) selector; ` +
-        'manual anchors only are supported today — leaving unknown',
-    );
-    return null;
+    const resolution = resolveAutoAnchorHost(selector.autoData);
+    if (resolution.status === 'unknown') {
+      warnOnce(
+        condition.id,
+        `[Userflow] ELEMENT condition ${condition.id} uses an AUTO (codeless) selector ` +
+          'that could not be resolved; leaving unknown',
+      );
+      return null;
+    }
+    if (resolution.status === 'ambiguous') {
+      return null;
+    }
+    const present = resolution.status === 'found';
+    return elementState === 'PRESENT' ? present : !present;
   }
 
   const anchorId = resolveManualAnchorId(selector.css);