@userflow-tech/react-native 0.1.0 → 0.2.0

package/lib/module/authoring/chrome/ChromeBarTransition.js

@@ -0,0 +1,88 @@
+"use strict";
+
+import * as React from 'react';
+import { Animated } from 'react-native';
+
+/** Bars enter with web's `250ms` feel and leave a touch faster. */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CHROME_BAR_ENTER_MS = 220;
+export const CHROME_BAR_EXIT_MS = 160;
+/**
+ * Slides + fades an authoring chrome bar on and off screen. The bar translates
+ * by its own measured height toward {@link ChromeBarTransitionProps.edge}, so it
+ * leaves fully off-screen instead of shrinking in place.
+ *
+ * This only drives the animation; the parent keeps the bar mounted across the
+ * exit with {@link useChromeBarMounted} and drops it once the exit has run.
+ */
+export function ChromeBarTransition({
+  visible,
+  edge,
+  style,
+  pointerEvents,
+  children,
+  testID
+}) {
+  const progress = React.useRef(new Animated.Value(0)).current;
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    // Pin the start point: a native-driven ramp is computed from the JS value,
+    // which the previous native animation left behind.
+    progress.setValue(visible ? 0 : 1);
+    const animation = Animated.timing(progress, {
+      toValue: visible ? 1 : 0,
+      duration: visible ? CHROME_BAR_ENTER_MS : CHROME_BAR_EXIT_MS,
+      useNativeDriver: true
+    });
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [progress, visible]);
+  const onLayout = React.useCallback(event => {
+    const next = event.nativeEvent.layout.height;
+    setHeight(prev => Math.abs(prev - next) < 0.5 ? prev : next);
+  }, []);
+
+  // Until the bar is measured, fade only — the slide engages on the next frame
+  // once the height is known, while opacity is still near zero.
+  const transform = height > 0 ? [{
+    translateY: progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [edge === 'top' ? -height : height, 0]
+    })
+  }] : undefined;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    testID: testID,
+    pointerEvents: visible ? pointerEvents : 'none',
+    onLayout: onLayout,
+    style: [style, transform ? {
+      opacity: progress,
+      transform
+    } : {
+      opacity: progress
+    }],
+    children: children
+  });
+}
+
+/**
+ * Keeps a bar mounted while `visible` and for {@link CHROME_BAR_EXIT_MS} after
+ * it flips false, so {@link ChromeBarTransition} can run its exit before the
+ * parent drops it.
+ */
+export function useChromeBarMounted(visible) {
+  const [mounted, setMounted] = React.useState(visible);
+  React.useEffect(() => {
+    if (visible) {
+      setMounted(true);
+      return;
+    }
+    const timer = setTimeout(() => setMounted(false), CHROME_BAR_EXIT_MS);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [visible]);
+  return mounted;
+}
+//# sourceMappingURL=ChromeBarTransition.js.map

package/lib/module/authoring/chrome/ChromeBarTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Animated","jsx","_jsx","CHROME_BAR_ENTER_MS","CHROME_BAR_EXIT_MS","ChromeBarTransition","visible","edge","style","pointerEvents","children","testID","progress","useRef","Value","current","height","setHeight","useState","useEffect","setValue","animation","timing","toValue","duration","useNativeDriver","start","stop","onLayout","useCallback","event","next","nativeEvent","layout","prev","Math","abs","transform","translateY","interpolate","inputRange","outputRange","undefined","View","opacity","useChromeBarMounted","mounted","setMounted","timer","setTimeout","clearTimeout"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeBarTransition.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/authoring/chrome/ChromeBottomSheet.js

@@ -0,0 +1,59 @@
+"use strict";
+
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useUserflowSafeAreaInsets } from "../../surfaces/safeArea.js";
+import { chromeColors, chromeShadows, chromeSpace, chromeText } from "./tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Full-bleed authoring bottom bar. Content is top-aligned; bottom padding
+ * includes the home-indicator inset.
+ */
+export function ChromeBottomSheet({
+  children,
+  helperText,
+  onMeasureHeight,
+  testID = 'userflow-chrome-bottom-sheet'
+}) {
+  const insets = useUserflowSafeAreaInsets();
+  const onLayout = React.useCallback(event => {
+    onMeasureHeight?.(event.nativeEvent.layout.height);
+  }, [onMeasureHeight]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    onLayout: onLayout,
+    style: [styles.bar, chromeShadows.card, {
+      paddingBottom: chromeSpace[24] + insets.bottom
+    }],
+    children: [helperText ? /*#__PURE__*/_jsx(Text, {
+      style: [chromeText.labelSmBold, styles.helper, {
+        color: chromeColors.invertedText
+      }],
+      children: helperText
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: styles.row,
+      children: children
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  bar: {
+    backgroundColor: chromeColors.primaryText,
+    paddingTop: chromeSpace[24],
+    paddingHorizontal: chromeSpace[24],
+    gap: chromeSpace[16]
+  },
+  helper: {
+    alignSelf: 'stretch',
+    textAlign: 'center'
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    gap: chromeSpace[8]
+  }
+});
+//# sourceMappingURL=ChromeBottomSheet.js.map

package/lib/module/authoring/chrome/ChromeBottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","Text","View","useUserflowSafeAreaInsets","chromeColors","chromeShadows","chromeSpace","chromeText","jsx","_jsx","jsxs","_jsxs","ChromeBottomSheet","children","helperText","onMeasureHeight","testID","insets","onLayout","useCallback","event","nativeEvent","layout","height","style","styles","bar","card","paddingBottom","bottom","labelSmBold","helper","color","invertedText","row","create","backgroundColor","primaryText","paddingTop","paddingHorizontal","gap","alignSelf","textAlign","flexDirection","flexWrap","alignItems","justifyContent"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeBottomSheet.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAgC,cAAc;AAE7E,SAASC,yBAAyB,QAAQ,4BAAyB;AAEnE,SAASC,YAAY,EAAEC,aAAa,EAAEC,WAAW,EAAEC,UAAU,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAShF;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAC;EAChCC,QAAQ;EACRC,UAAU;EACVC,eAAe;EACfC,MAAM,GAAG;AACa,CAAC,EAAsB;EAC7C,MAAMC,MAAM,GAAGd,yBAAyB,CAAC,CAAC;EAE1C,MAAMe,QAAQ,GAAGnB,KAAK,CAACoB,WAAW,CAC/BC,KAAwB,IAAK;IAC5BL,eAAe,GAAGK,KAAK,CAACC,WAAW,CAACC,MAAM,CAACC,MAAM,CAAC;EACpD,CAAC,EACD,CAACR,eAAe,CAClB,CAAC;EAED,oBACEJ,KAAA,CAACT,IAAI;IACHc,MAAM,EAAEA,MAAO;IACfE,QAAQ,EAAEA,QAAS;IACnBM,KAAK,EAAE,CAACC,MAAM,CAACC,GAAG,EAAErB,aAAa,CAACsB,IAAI,EAAE;MAAEC,aAAa,EAAEtB,WAAW,CAAC,EAAE,CAAC,GAAGW,MAAM,CAACY;IAAO,CAAC,CAAE;IAAAhB,QAAA,GAE3FC,UAAU,gBACTL,IAAA,CAACR,IAAI;MAACuB,KAAK,EAAE,CAACjB,UAAU,CAACuB,WAAW,EAAEL,MAAM,CAACM,MAAM,EAAE;QAAEC,KAAK,EAAE5B,YAAY,CAAC6B;MAAa,CAAC,CAAE;MAAApB,QAAA,EACxFC;IAAU,CACP,CAAC,GACL,IAAI,eACRL,IAAA,CAACP,IAAI;MAACsB,KAAK,EAAEC,MAAM,CAACS,GAAI;MAAArB,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CACtC,CAAC;AAEX;AAEA,MAAMY,MAAM,GAAGzB,UAAU,CAACmC,MAAM,CAAC;EAC/BT,GAAG,EAAE;IACHU,eAAe,EAAEhC,YAAY,CAACiC,WAAW;IACzCC,UAAU,EAAEhC,WAAW,CAAC,EAAE,CAAC;IAC3BiC,iBAAiB,EAAEjC,WAAW,CAAC,EAAE,CAAC;IAClCkC,GAAG,EAAElC,WAAW,CAAC,EAAE;EACrB,CAAC;EACDyB,MAAM,EAAE;IACNU,SAAS,EAAE,SAAS;IACpBC,SAAS,EAAE;EACb,CAAC;EACDR,GAAG,EAAE;IACHS,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE,QAAQ;IAClBC,UAAU,EAAE,QAAQ;IACpBJ,SAAS,EAAE,SAAS;IACpBK,cAAc,EAAE,QAAQ;IACxBN,GAAG,EAAElC,WAAW,CAAC,CAAC;EACpB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/authoring/chrome/ChromeButton.js

@@ -0,0 +1,89 @@
+"use strict";
+
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { ChromeIcon } from "./ChromeIcon.js";
+import { chromeColors, chromeRadius, chromeShadows, chromeSpace, chromeText } from "./tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Pill button. `primary` / `secondary` take an optional leading icon;
+ * `icon` is the 40×40 circular control used in the preview top bar.
+ */
+export function ChromeButton({
+  variant = 'primary',
+  label,
+  icon,
+  onPress,
+  disabled = false,
+  accessibilityLabel,
+  testID,
+  flex = false
+}) {
+  const iconOnly = variant === 'icon';
+  const tint = variant === 'primary' ? chromeColors.invertedText : chromeColors.blue500;
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    disabled: disabled,
+    onPress: onPress,
+    testID: testID,
+    style: ({
+      pressed
+    }) => [iconOnly ? styles.icon : styles.pill, variant === 'primary' ? styles.primary : styles.secondary, variant === 'primary' ? chromeShadows.button : chromeShadows.buttonSubtle, flex ? styles.flex : null, {
+      opacity: disabled ? 0.5 : pressed ? 0.75 : 1
+    }],
+    children: [icon ? /*#__PURE__*/_jsx(View, {
+      style: styles.iconWrap,
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(ChromeIcon, {
+        name: icon,
+        tintColor: tint,
+        size: 16
+      })
+    }) : null, label && !iconOnly ? /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: [chromeText.buttonLabel, styles.label, {
+        color: tint
+      }],
+      children: label
+    }) : null]
+  });
+}
+const styles = StyleSheet.create({
+  pill: {
+    flexDirection: 'row',
+    flexShrink: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: chromeSpace[8],
+    paddingHorizontal: chromeSpace[24],
+    paddingVertical: chromeSpace[12],
+    borderRadius: chromeRadius.fullyRounded
+  },
+  label: {
+    flexShrink: 1
+  },
+  icon: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: chromeRadius.fullyRounded
+  },
+  primary: {
+    backgroundColor: chromeColors.blue500
+  },
+  secondary: {
+    backgroundColor: chromeColors.white,
+    borderWidth: 1,
+    borderColor: chromeColors.blue500
+  },
+  flex: {
+    flex: 1
+  },
+  iconWrap: {
+    width: 16,
+    height: 16
+  }
+});
+//# sourceMappingURL=ChromeButton.js.map

package/lib/module/authoring/chrome/ChromeButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Pressable","StyleSheet","Text","View","ChromeIcon","chromeColors","chromeRadius","chromeShadows","chromeSpace","chromeText","jsx","_jsx","jsxs","_jsxs","ChromeButton","variant","label","icon","onPress","disabled","accessibilityLabel","testID","flex","iconOnly","tint","invertedText","blue500","accessibilityRole","style","pressed","styles","pill","primary","secondary","button","buttonSubtle","opacity","children","iconWrap","pointerEvents","name","tintColor","size","numberOfLines","buttonLabel","color","create","flexDirection","flexShrink","alignItems","justifyContent","gap","paddingHorizontal","paddingVertical","borderRadius","fullyRounded","width","height","backgroundColor","white","borderWidth","borderColor"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/authoring/chrome/ChromeDialog.js

@@ -0,0 +1,126 @@
+"use strict";
+
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { ABSOLUTE_FILL } from "../../surfaces/absoluteFill.js";
+import { ChromeIcon } from "./ChromeIcon.js";
+import { chromeColors, chromeRadius, chromeShadows, chromeSpace, chromeText } from "./tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Centered authoring dialog with scrim, header, body, footer slot, and close.
+ * Footer `children` are typically a pair of `ChromeButton`s with `flex`.
+ */
+export function ChromeDialog({
+  title,
+  body,
+  onClose,
+  children,
+  testID = 'userflow-chrome-dialog'
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityViewIsModal: true,
+    pointerEvents: "auto",
+    style: styles.root,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: "Dismiss",
+      onPress: onClose,
+      style: styles.scrim,
+      testID: "userflow-chrome-dialog-scrim"
+    }), /*#__PURE__*/_jsx(View, {
+      pointerEvents: "box-none",
+      style: styles.cardSlot,
+      testID: "userflow-chrome-dialog-card-slot",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.card, chromeShadows.dialog],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.header,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [chromeText.dialogTitle, {
+              color: chromeColors.primaryText
+            }],
+            children: title
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.body,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [chromeText.dialogBody, {
+              color: chromeColors.primaryText
+            }],
+            children: body
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.footer,
+          children: children
+        }), /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: "Close",
+          hitSlop: 8,
+          onPress: onClose,
+          style: styles.close,
+          testID: "userflow-chrome-dialog-close",
+          children: /*#__PURE__*/_jsx(ChromeIcon, {
+            name: "xmark",
+            size: 14,
+            tintColor: chromeColors.primaryText
+          })
+        })]
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    ...ABSOLUTE_FILL,
+    alignItems: 'center',
+    // Vertically centered — Figma's y:444 on the Pro Max frame is a snap to the
+    // example element, not a placement spec.
+    justifyContent: 'center'
+  },
+  scrim: {
+    ...ABSOLUTE_FILL,
+    backgroundColor: chromeColors.overlay
+  },
+  cardSlot: {
+    alignSelf: 'stretch',
+    paddingHorizontal: chromeSpace[24]
+  },
+  card: {
+    width: '100%',
+    maxWidth: 382,
+    alignSelf: 'center',
+    backgroundColor: chromeColors.bgMiddle,
+    borderRadius: chromeRadius.lg
+  },
+  header: {
+    paddingTop: chromeSpace[24],
+    paddingHorizontal: chromeSpace[24],
+    paddingBottom: chromeSpace[16],
+    paddingRight: chromeSpace[24] + 16
+  },
+  body: {
+    paddingHorizontal: chromeSpace[24],
+    paddingVertical: chromeSpace[8]
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: chromeSpace[8],
+    paddingTop: chromeSpace[16],
+    paddingHorizontal: chromeSpace[24],
+    paddingBottom: chromeSpace[24]
+  },
+  close: {
+    position: 'absolute',
+    top: chromeSpace[8],
+    right: chromeSpace[8],
+    width: 32,
+    height: 32,
+    borderRadius: chromeRadius.md,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+//# sourceMappingURL=ChromeDialog.js.map

package/lib/module/authoring/chrome/ChromeDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Pressable","StyleSheet","Text","View","ABSOLUTE_FILL","ChromeIcon","chromeColors","chromeRadius","chromeShadows","chromeSpace","chromeText","jsx","_jsx","jsxs","_jsxs","ChromeDialog","title","body","onClose","children","testID","accessibilityViewIsModal","pointerEvents","style","styles","root","accessibilityRole","accessibilityLabel","onPress","scrim","cardSlot","card","dialog","header","dialogTitle","color","primaryText","dialogBody","footer","hitSlop","close","name","size","tintColor","create","alignItems","justifyContent","backgroundColor","overlay","alignSelf","paddingHorizontal","width","maxWidth","bgMiddle","borderRadius","lg","paddingTop","paddingBottom","paddingRight","paddingVertical","flexDirection","gap","position","top","right","height","md"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeDialog.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/authoring/chrome/ChromeIcon.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import * as React from 'react';
+import { Image } from 'react-native';
+import arrowLeftFromBracket from './icons/arrow-left-from-bracket.png';
+import arrowRotateLeft from './icons/arrow-rotate-left.png';
+import xmark from './icons/xmark.png';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SOURCES = {
+  'arrow-left-from-bracket': arrowLeftFromBracket,
+  'arrow-rotate-left': arrowRotateLeft,
+  xmark
+};
+/** Monochrome PNG glyph tinted via `tintColor` (white source assets). */
+export function ChromeIcon({
+  name,
+  tintColor,
+  size = 16,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(Image, {
+    accessibilityIgnoresInvertColors: true,
+    source: SOURCES[name],
+    style: [{
+      width: size,
+      height: size,
+      tintColor
+    }, style],
+    testID: testID
+  });
+}
+//# sourceMappingURL=ChromeIcon.js.map

package/lib/module/authoring/chrome/ChromeIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Image","arrowLeftFromBracket","arrowRotateLeft","xmark","jsx","_jsx","SOURCES","ChromeIcon","name","tintColor","size","style","testID","accessibilityIgnoresInvertColors","source","width","height"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeIcon.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAyC,cAAc;AAErE,OAAOC,oBAAoB,MAAM,qCAAqC;AACtE,OAAOC,eAAe,MAAM,+BAA+B;AAC3D,OAAOC,KAAK,MAAM,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAItC,MAAMC,OAAuC,GAAG;EAC9C,yBAAyB,EAAEL,oBAAoB;EAC/C,mBAAmB,EAAEC,eAAe;EACpCC;AACF,CAAC;AAUD;AACA,OAAO,SAASI,UAAUA,CAAC;EACzBC,IAAI;EACJC,SAAS;EACTC,IAAI,GAAG,EAAE;EACTC,KAAK;EACLC;AACe,CAAC,EAAsB;EACtC,oBACEP,IAAA,CAACL,KAAK;IACJa,gCAAgC;IAChCC,MAAM,EAAER,OAAO,CAACE,IAAI,CAAE;IACtBG,KAAK,EAAE,CAAC;MAAEI,KAAK,EAAEL,IAAI;MAAEM,MAAM,EAAEN,IAAI;MAAED;IAAU,CAAC,EAAEE,KAAK,CAAE;IACzDC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN","ignoreList":[]}

package/lib/module/authoring/chrome/ChromeTooltip.js

@@ -0,0 +1,82 @@
+"use strict";
+
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { TooltipNotch, tooltipNotchDiamondSide } from "../../surfaces/tooltip/TooltipNotch.js";
+import { chromeColors, chromeRadius, chromeShadows, chromeSpace, chromeText } from "./tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CHROME_TOOLTIP_NOTCH_SIZE = 8;
+export const CHROME_TOOLTIP_DEFAULT_DURATION_MS = 5000;
+/**
+ * Onboarding bubble with an upward notch. Pointer-events none so it does not
+ * steal the double-tap that shows/hides authoring chrome.
+ */
+export function ChromeTooltip({
+  children,
+  visible = true,
+  durationMs = CHROME_TOOLTIP_DEFAULT_DURATION_MS,
+  onDismiss,
+  testID = 'userflow-chrome-tooltip'
+}) {
+  const [dismissed, setDismissed] = React.useState(false);
+  const onDismissRef = React.useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+  React.useEffect(() => {
+    if (!visible) {
+      setDismissed(false);
+      return;
+    }
+    if (durationMs <= 0) return;
+    const id = setTimeout(() => {
+      setDismissed(true);
+      onDismissRef.current?.();
+    }, durationMs);
+    return () => {
+      clearTimeout(id);
+    };
+  }, [visible, durationMs]);
+  if (!visible || dismissed) return null;
+  const diamond = tooltipNotchDiamondSide(CHROME_TOOLTIP_NOTCH_SIZE);
+  return /*#__PURE__*/_jsxs(View, {
+    pointerEvents: "none",
+    style: styles.root,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.notchClip,
+      children: /*#__PURE__*/_jsx(TooltipNotch, {
+        left: (16 - diamond) / 2,
+        notchColor: chromeColors.primaryText,
+        notchSize: CHROME_TOOLTIP_NOTCH_SIZE,
+        top: CHROME_TOOLTIP_NOTCH_SIZE - diamond / 2
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.bubble, chromeShadows.tooltip],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [chromeText.tooltip, {
+          color: chromeColors.invertedText
+        }],
+        children: children
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    maxWidth: 300
+  },
+  notchClip: {
+    width: 16,
+    height: CHROME_TOOLTIP_NOTCH_SIZE,
+    overflow: 'hidden',
+    marginBottom: -1,
+    position: 'relative'
+  },
+  bubble: {
+    backgroundColor: chromeColors.primaryText,
+    borderRadius: chromeRadius.lg,
+    padding: chromeSpace[12],
+    maxWidth: 300
+  }
+});
+//# sourceMappingURL=ChromeTooltip.js.map

package/lib/module/authoring/chrome/ChromeTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","Text","View","TooltipNotch","tooltipNotchDiamondSide","chromeColors","chromeRadius","chromeShadows","chromeSpace","chromeText","jsx","_jsx","jsxs","_jsxs","CHROME_TOOLTIP_NOTCH_SIZE","CHROME_TOOLTIP_DEFAULT_DURATION_MS","ChromeTooltip","children","visible","durationMs","onDismiss","testID","dismissed","setDismissed","useState","onDismissRef","useRef","current","useEffect","id","setTimeout","clearTimeout","diamond","pointerEvents","style","styles","root","notchClip","left","notchColor","primaryText","notchSize","top","bubble","tooltip","color","invertedText","create","alignItems","maxWidth","width","height","overflow","marginBottom","position","backgroundColor","borderRadius","lg","padding"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeTooltip.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/authoring/chrome/ChromeTopBar.js

@@ -0,0 +1,104 @@
+"use strict";
+
+import * as React from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { useUserflowSafeAreaInsets } from "../../surfaces/safeArea.js";
+import logomark from './icons/userflow-logomark.png';
+import { chromeColors, chromeShadows, chromeSpace, chromeText } from "./tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Full-bleed authoring top bar. Height comes from safe-area + content, not
+ * the 120pt Figma frame (that number already includes the status bar).
+ *
+ * Measured on the Pro Max reference: 4pt below the status bar, 16pt above
+ * the bottom edge of the bar.
+ */
+export function ChromeTopBar({
+  label,
+  tone = 'default',
+  left,
+  right,
+  onMeasureHeight,
+  numberOfLines = 1,
+  accessibilityElementsHidden,
+  importantForAccessibility,
+  testID = 'userflow-chrome-top-bar'
+}) {
+  const insets = useUserflowSafeAreaInsets();
+  const onLayout = React.useCallback(event => {
+    onMeasureHeight?.(event.nativeEvent.layout.height);
+  }, [onMeasureHeight]);
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityElementsHidden: accessibilityElementsHidden,
+    importantForAccessibility: importantForAccessibility,
+    testID: testID,
+    onLayout: onLayout,
+    style: [styles.bar, chromeShadows.card, {
+      backgroundColor: tone === 'error' ? chromeColors.danger : chromeColors.primaryText,
+      paddingTop: insets.top + CONTENT_TOP_GAP
+    }],
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.slot,
+        children: left
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.labelRow,
+        pointerEvents: "none",
+        children: [/*#__PURE__*/_jsx(Image, {
+          accessibilityIgnoresInvertColors: true,
+          source: logomark,
+          style: styles.logomark,
+          testID: "userflow-chrome-logomark"
+        }), /*#__PURE__*/_jsx(Text, {
+          numberOfLines: numberOfLines,
+          style: [chromeText.barTitle, styles.label],
+          children: label
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.slot,
+        children: right
+      })]
+    })
+  });
+}
+const SLOT = 40;
+/** Gap between the status-bar inset and the content row (Figma: 5pt / we use 4). */
+const CONTENT_TOP_GAP = 4;
+const styles = StyleSheet.create({
+  bar: {
+    paddingHorizontal: chromeSpace[24],
+    paddingBottom: chromeSpace[16]
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: SLOT
+  },
+  slot: {
+    width: SLOT,
+    height: SLOT,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  labelRow: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: chromeSpace[8],
+    paddingHorizontal: chromeSpace[8]
+  },
+  label: {
+    color: chromeColors.invertedText,
+    textAlign: 'center',
+    flexShrink: 1
+  },
+  logomark: {
+    // Figma `Warstwa_1` stacked-card mark. Not the Made-with-Userflow footer glyph.
+    width: 24,
+    height: 22,
+    tintColor: chromeColors.invertedText
+  }
+});
+//# sourceMappingURL=ChromeTopBar.js.map

package/lib/module/authoring/chrome/ChromeTopBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Image","StyleSheet","Text","View","useUserflowSafeAreaInsets","logomark","chromeColors","chromeShadows","chromeSpace","chromeText","jsx","_jsx","jsxs","_jsxs","ChromeTopBar","label","tone","left","right","onMeasureHeight","numberOfLines","accessibilityElementsHidden","importantForAccessibility","testID","insets","onLayout","useCallback","event","nativeEvent","layout","height","style","styles","bar","card","backgroundColor","danger","primaryText","paddingTop","top","CONTENT_TOP_GAP","children","row","slot","labelRow","pointerEvents","accessibilityIgnoresInvertColors","source","barTitle","SLOT","create","paddingHorizontal","paddingBottom","flexDirection","alignItems","minHeight","width","justifyContent","flex","gap","color","invertedText","textAlign","flexShrink","tintColor"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeTopBar.tsx"],"mappings":"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","ignoreList":[]}