@retor/react-native 0.3.4 → 0.3.6

package/dist/index.d.mts

@@ -165,16 +165,26 @@ declare const Viewer: React.ForwardRefExoticComponent<ViewerProps & React.RefAtt
 
 interface HudProps {
     children: React.ReactNode;
+    /**
+     * Maximum top inset for all sheets (in pixels). The sheets won't expand
+     * past `screenHeight - topInset`. Use this to leave room for your app's
+     * floating header buttons. Defaults to 0 (sheets can extend to the very top).
+     *
+     * Per-sheet `topInset` props override this default.
+     */
+    topInset?: number;
 }
 /**
  * Sets up the bottom-sheet provider tree for the SDK's UI components
  * (`<ProjectSheet>`, `<LineDetailSheet>`, `<AddNoteSheet>`).
  *
- * Place inside `<Viewer>` so the sheets can read scene state from the bridge:
+ * Place inside `<Viewer>` so the sheets can read scene state from the bridge.
+ * Pass `topInset` to set a global ceiling so the sheets won't overlap your
+ * app's floating header buttons.
  *
  * ```tsx
  * <Viewer projectId="...">
- *   <Hud>
+ *   <Hud topInset={160}>
  *     <ProjectSheet />
  *     <LineDetailSheet />
  *     <AddNoteSheet />
@@ -182,11 +192,16 @@ interface HudProps {
  * </Viewer>
  * ```
  */
-declare function Hud({ children }: HudProps): React.JSX.Element;
+declare function Hud({ children, topInset }: HudProps): React.JSX.Element;
 
 interface ProjectSheetProps {
     /** Snap points. Defaults to ["35%", "75%"]. */
     snapPoints?: (string | number)[];
+    /**
+     * Top inset in pixels — the sheet won't expand past `screenHeight - topInset`.
+     * Overrides the default set on `<Hud>`.
+     */
+    topInset?: number;
     /** Override the default header (project name + description + arrow button). */
     renderHeader?: (project: {
         name?: string;
@@ -198,7 +213,7 @@ interface ProjectSheetProps {
 /**
  * Browse-mode bottom sheet — auto-presents whenever no line is open.
  */
-declare function ProjectSheet({ snapPoints, renderHeader, children }: ProjectSheetProps): React.JSX.Element;
+declare function ProjectSheet({ snapPoints, topInset, renderHeader, children }: ProjectSheetProps): React.JSX.Element;
 interface LinesCarouselProps {
     children: (line: RetorLine, index: number) => React.ReactNode;
     gap?: number;
@@ -209,12 +224,17 @@ declare function LinesCarousel({ children, gap, paddingHorizontal }: LinesCarous
 interface LineDetailSheetProps {
     /** Snap points. Defaults to ["35%", "75%"]. */
     snapPoints?: (string | number)[];
+    /**
+     * Top inset in pixels — the sheet won't expand past `screenHeight - topInset`.
+     * Overrides the default set on `<Hud>`.
+     */
+    topInset?: number;
     /** Override the header. */
     renderHeader?: (line: RetorLine) => React.ReactNode;
     /** Custom content (typically a `<LineTagList>`). */
     children?: React.ReactNode;
 }
-declare function LineDetailSheet({ snapPoints, renderHeader, children }: LineDetailSheetProps): React.JSX.Element;
+declare function LineDetailSheet({ snapPoints, topInset, renderHeader, children }: LineDetailSheetProps): React.JSX.Element;
 interface LineTagListProps {
     children: (tag: RetorTag, isActive: boolean) => React.ReactNode;
     /** Optional header rendered above the list (used internally for the default header). */
@@ -231,6 +251,11 @@ declare function LineTagList({ children, listHeader }: LineTagListProps): React.
 interface AddNoteSheetProps {
     /** Snap points. Defaults to ["50%"]. */
     snapPoints?: (string | number)[];
+    /**
+     * Top inset in pixels — the sheet won't expand past `screenHeight - topInset`.
+     * Overrides the default set on `<Hud>`.
+     */
+    topInset?: number;
     /** Max characters allowed. Defaults to 280. */
     maxLength?: number;
     /** Placeholder text. */
@@ -251,7 +276,7 @@ interface AddNoteFormApi {
  * Sheet for adding a note. Auto-presents when `useAddNote().open()` is called.
  * On submit, fires `onNoteSubmit` on the parent `<Viewer>` with the text + position.
  */
-declare function AddNoteSheet({ snapPoints, maxLength, placeholder, renderForm, }: AddNoteSheetProps): React.JSX.Element;
+declare function AddNoteSheet({ snapPoints, topInset, maxLength, placeholder, renderForm, }: AddNoteSheetProps): React.JSX.Element;
 
 interface CoverPhotoProps {
     projectId: string;

package/dist/index.d.ts

@@ -165,16 +165,26 @@ declare const Viewer: React.ForwardRefExoticComponent<ViewerProps & React.RefAtt
 
 interface HudProps {
     children: React.ReactNode;
+    /**
+     * Maximum top inset for all sheets (in pixels). The sheets won't expand
+     * past `screenHeight - topInset`. Use this to leave room for your app's
+     * floating header buttons. Defaults to 0 (sheets can extend to the very top).
+     *
+     * Per-sheet `topInset` props override this default.
+     */
+    topInset?: number;
 }
 /**
  * Sets up the bottom-sheet provider tree for the SDK's UI components
  * (`<ProjectSheet>`, `<LineDetailSheet>`, `<AddNoteSheet>`).
  *
- * Place inside `<Viewer>` so the sheets can read scene state from the bridge:
+ * Place inside `<Viewer>` so the sheets can read scene state from the bridge.
+ * Pass `topInset` to set a global ceiling so the sheets won't overlap your
+ * app's floating header buttons.
  *
  * ```tsx
  * <Viewer projectId="...">
- *   <Hud>
+ *   <Hud topInset={160}>
  *     <ProjectSheet />
  *     <LineDetailSheet />
  *     <AddNoteSheet />
@@ -182,11 +192,16 @@ interface HudProps {
  * </Viewer>
  * ```
  */
-declare function Hud({ children }: HudProps): React.JSX.Element;
+declare function Hud({ children, topInset }: HudProps): React.JSX.Element;
 
 interface ProjectSheetProps {
     /** Snap points. Defaults to ["35%", "75%"]. */
     snapPoints?: (string | number)[];
+    /**
+     * Top inset in pixels — the sheet won't expand past `screenHeight - topInset`.
+     * Overrides the default set on `<Hud>`.
+     */
+    topInset?: number;
     /** Override the default header (project name + description + arrow button). */
     renderHeader?: (project: {
         name?: string;
@@ -198,7 +213,7 @@ interface ProjectSheetProps {
 /**
  * Browse-mode bottom sheet — auto-presents whenever no line is open.
  */
-declare function ProjectSheet({ snapPoints, renderHeader, children }: ProjectSheetProps): React.JSX.Element;
+declare function ProjectSheet({ snapPoints, topInset, renderHeader, children }: ProjectSheetProps): React.JSX.Element;
 interface LinesCarouselProps {
     children: (line: RetorLine, index: number) => React.ReactNode;
     gap?: number;
@@ -209,12 +224,17 @@ declare function LinesCarousel({ children, gap, paddingHorizontal }: LinesCarous
 interface LineDetailSheetProps {
     /** Snap points. Defaults to ["35%", "75%"]. */
     snapPoints?: (string | number)[];
+    /**
+     * Top inset in pixels — the sheet won't expand past `screenHeight - topInset`.
+     * Overrides the default set on `<Hud>`.
+     */
+    topInset?: number;
     /** Override the header. */
     renderHeader?: (line: RetorLine) => React.ReactNode;
     /** Custom content (typically a `<LineTagList>`). */
     children?: React.ReactNode;
 }
-declare function LineDetailSheet({ snapPoints, renderHeader, children }: LineDetailSheetProps): React.JSX.Element;
+declare function LineDetailSheet({ snapPoints, topInset, renderHeader, children }: LineDetailSheetProps): React.JSX.Element;
 interface LineTagListProps {
     children: (tag: RetorTag, isActive: boolean) => React.ReactNode;
     /** Optional header rendered above the list (used internally for the default header). */
@@ -231,6 +251,11 @@ declare function LineTagList({ children, listHeader }: LineTagListProps): React.
 interface AddNoteSheetProps {
     /** Snap points. Defaults to ["50%"]. */
     snapPoints?: (string | number)[];
+    /**
+     * Top inset in pixels — the sheet won't expand past `screenHeight - topInset`.
+     * Overrides the default set on `<Hud>`.
+     */
+    topInset?: number;
     /** Max characters allowed. Defaults to 280. */
     maxLength?: number;
     /** Placeholder text. */
@@ -251,7 +276,7 @@ interface AddNoteFormApi {
  * Sheet for adding a note. Auto-presents when `useAddNote().open()` is called.
  * On submit, fires `onNoteSubmit` on the parent `<Viewer>` with the text + position.
  */
-declare function AddNoteSheet({ snapPoints, maxLength, placeholder, renderForm, }: AddNoteSheetProps): React.JSX.Element;
+declare function AddNoteSheet({ snapPoints, topInset, maxLength, placeholder, renderForm, }: AddNoteSheetProps): React.JSX.Element;
 
 interface CoverPhotoProps {
     projectId: string;

package/dist/index.js

@@ -370,8 +370,12 @@ var styles = import_react_native.StyleSheet.create({
 var import_react3 = __toESM(require("react"));
 var import_react_native2 = require("react-native");
 var import_bottom_sheet = require("@gorhom/bottom-sheet");
-function Hud({ children }) {
-  return /* @__PURE__ */ import_react3.default.createElement(import_react_native2.View, { pointerEvents: "box-none", style: import_react_native2.StyleSheet.absoluteFill }, /* @__PURE__ */ import_react3.default.createElement(import_bottom_sheet.BottomSheetModalProvider, null, children));
+var HudContext = (0, import_react3.createContext)({ topInset: 0 });
+function useHudContext() {
+  return (0, import_react3.useContext)(HudContext);
+}
+function Hud({ children, topInset = 0 }) {
+  return /* @__PURE__ */ import_react3.default.createElement(HudContext.Provider, { value: { topInset } }, /* @__PURE__ */ import_react3.default.createElement(import_react_native2.View, { pointerEvents: "box-none", style: import_react_native2.StyleSheet.absoluteFill }, /* @__PURE__ */ import_react3.default.createElement(import_bottom_sheet.BottomSheetModalProvider, null, children)));
 }
 
 // src/ProjectSheet.tsx
@@ -389,8 +393,20 @@ function BlurBackground({ style }) {
 }
 
 // src/ProjectSheet.tsx
-function ProjectSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
+var renderBackdrop = (props) => /* @__PURE__ */ import_react5.default.createElement(
+  import_bottom_sheet2.BottomSheetBackdrop,
+  {
+    ...props,
+    appearsOnIndex: 1,
+    disappearsOnIndex: 0,
+    opacity: 0.4,
+    pressBehavior: "collapse"
+  }
+);
+function ProjectSheet({ snapPoints = ["35%", "75%"], topInset, renderHeader, children }) {
   const { project, activeLineId, isAddNoteOpen } = useRetorBridge();
+  const { topInset: hudTopInset } = useHudContext();
+  const effectiveTopInset = topInset ?? hudTopInset;
   const sheetRef = (0, import_react5.useRef)(null);
   const snapPointsArr = (0, import_react5.useMemo)(() => snapPoints, [snapPoints]);
   const [minimized, setMinimized] = (0, import_react5.useState)(false);
@@ -425,18 +441,10 @@ function ProjectSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
       enableDismissOnClose: false,
       enableOverDrag: false,
       onChange: handleSheetChange,
-      backdropComponent: (props) => /* @__PURE__ */ import_react5.default.createElement(
-        import_bottom_sheet2.BottomSheetBackdrop,
-        {
-          ...props,
-          appearsOnIndex: 1,
-          disappearsOnIndex: 0,
-          opacity: 0.4,
-          pressBehavior: "collapse"
-        }
-      ),
+      backdropComponent: renderBackdrop,
       handleIndicatorStyle: styles2.handle,
-      backgroundComponent: BlurBackground
+      backgroundComponent: BlurBackground,
+      topInset: effectiveTopInset
     },
     /* @__PURE__ */ import_react5.default.createElement(import_bottom_sheet2.BottomSheetView, { style: styles2.content }, renderHeader ? renderHeader({ name: project?.name, description: project?.description }) : /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { style: styles2.header }, /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { style: { flex: 1, minWidth: 0 } }, project?.name && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles2.title, numberOfLines: 1 }, project.name), project?.description && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles2.subtitle, numberOfLines: 4 }, project.description)), /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Pressable, { style: styles2.iconBtn, onPress: toggleMinimize }, minimized ? /* @__PURE__ */ import_react5.default.createElement(import_lucide_react_native.ArrowUp, { size: 14, color: "rgba(255,255,255,0.6)" }) : /* @__PURE__ */ import_react5.default.createElement(import_lucide_react_native.ArrowDown, { size: 14, color: "rgba(255,255,255,0.6)" }))), children ?? /* @__PURE__ */ import_react5.default.createElement(DefaultLinesCarousel, null))
   );
@@ -515,8 +523,20 @@ var import_react_native5 = require("react-native");
 var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
 var import_react_native_svg = __toESM(require("react-native-svg"));
 var import_lucide_react_native2 = require("lucide-react-native");
-function LineDetailSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
+var renderBackdrop2 = (props) => /* @__PURE__ */ import_react6.default.createElement(
+  import_bottom_sheet3.BottomSheetBackdrop,
+  {
+    ...props,
+    appearsOnIndex: 1,
+    disappearsOnIndex: 0,
+    opacity: 0.4,
+    pressBehavior: "collapse"
+  }
+);
+function LineDetailSheet({ snapPoints = ["35%", "75%"], topInset, renderHeader, children }) {
   const { activeLine, isAddNoteOpen, controls } = useRetorBridge();
+  const { topInset: hudTopInset } = useHudContext();
+  const effectiveTopInset = topInset ?? hudTopInset;
   const sheetRef = (0, import_react6.useRef)(null);
   const snapPointsArr = (0, import_react6.useMemo)(() => snapPoints, [snapPoints]);
   const [minimized, setMinimized] = (0, import_react6.useState)(false);
@@ -557,18 +577,10 @@ function LineDetailSheet({ snapPoints = ["35%", "75%"], renderHeader, children }
       enableOverDrag: false,
       onChange: handleSheetChange,
       footerComponent: renderFooter,
-      backdropComponent: (props) => /* @__PURE__ */ import_react6.default.createElement(
-        import_bottom_sheet3.BottomSheetBackdrop,
-        {
-          ...props,
-          appearsOnIndex: 1,
-          disappearsOnIndex: 0,
-          opacity: 0.4,
-          pressBehavior: "collapse"
-        }
-      ),
+      backdropComponent: renderBackdrop2,
       handleIndicatorStyle: styles3.handle,
-      backgroundComponent: BlurBackground
+      backgroundComponent: BlurBackground,
+      topInset: effectiveTopInset
     },
     activeLine && (children ?? /* @__PURE__ */ import_react6.default.createElement(DefaultLineTagList, { listHeader: header }))
   );
@@ -613,13 +625,18 @@ function LineTagList({ children, listHeader }) {
   }, [activeLine?._id]);
   (0, import_react6.useEffect)(() => {
     if (!closestTagId) return;
-    const t = setTimeout(() => {
+    let attempts = 0;
+    const tick = () => {
       const y = offsetsRef.current.get(closestTagId);
       if (y != null) {
-        scrollRef.current?.scrollTo({ y, animated: true });
+        scrollRef.current?.scrollTo?.({ y, animated: true });
+        return;
       }
-    }, 60);
-    return () => clearTimeout(t);
+      attempts += 1;
+      if (attempts < 10) raf = requestAnimationFrame(tick);
+    };
+    let raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
   }, [closestTagId]);
   if (!activeLine) return null;
   const handleItemLayout = (id, e) => {
@@ -727,13 +744,25 @@ var import_react7 = __toESM(require("react"));
 var import_react_native6 = require("react-native");
 var import_bottom_sheet4 = require("@gorhom/bottom-sheet");
 var import_lucide_react_native3 = require("lucide-react-native");
+var renderBackdrop3 = (props) => /* @__PURE__ */ import_react7.default.createElement(
+  import_bottom_sheet4.BottomSheetBackdrop,
+  {
+    ...props,
+    appearsOnIndex: 0,
+    disappearsOnIndex: -1,
+    opacity: 0.6
+  }
+);
 function AddNoteSheet({
   snapPoints = ["50%"],
+  topInset,
   maxLength = 280,
   placeholder = "Write a note...",
   renderForm
 }) {
   const { isAddNoteOpen, addNoteTagId, activeLine, closeAddNote, submitNote } = useRetorBridge();
+  const { topInset: hudTopInset } = useHudContext();
+  const effectiveTopInset = topInset ?? hudTopInset;
   const sheetRef = (0, import_react7.useRef)(null);
   const snapPointsArr = (0, import_react7.useMemo)(() => snapPoints, [snapPoints]);
   const [text, setText] = (0, import_react7.useState)("");
@@ -775,17 +804,10 @@ function AddNoteSheet({
       enablePanDownToClose: true,
       enableOverDrag: false,
       onDismiss: closeAddNote,
-      backdropComponent: (props) => /* @__PURE__ */ import_react7.default.createElement(
-        import_bottom_sheet4.BottomSheetBackdrop,
-        {
-          ...props,
-          appearsOnIndex: 0,
-          disappearsOnIndex: -1,
-          opacity: 0.6
-        }
-      ),
+      backdropComponent: renderBackdrop3,
       handleIndicatorStyle: styles4.handle,
-      backgroundComponent: BlurBackground
+      backgroundComponent: BlurBackground,
+      topInset: effectiveTopInset
     },
     /* @__PURE__ */ import_react7.default.createElement(import_bottom_sheet4.BottomSheetView, { style: styles4.content }, renderForm ? renderForm(formApi) : /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: styles4.form }, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: styles4.headerRow }, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: { flex: 1 } }, activeLine && /* @__PURE__ */ import_react7.default.createElement(import_react_native6.Text, { style: styles4.title, numberOfLines: 1 }, activeLine.name), tag && /* @__PURE__ */ import_react7.default.createElement(import_react_native6.Text, { style: styles4.subtitle, numberOfLines: 1 }, tag.name)), /* @__PURE__ */ import_react7.default.createElement(import_react_native6.Pressable, { onPress: closeAddNote, style: styles4.closeBtn }, /* @__PURE__ */ import_react7.default.createElement(import_lucide_react_native3.X, { size: 14, color: "rgba(255,255,255,0.6)" }))), /* @__PURE__ */ import_react7.default.createElement(
       import_bottom_sheet4.BottomSheetTextInput,

package/dist/index.mjs

@@ -323,11 +323,15 @@ var styles = StyleSheet.create({
 });
 
 // src/Hud.tsx
-import React3 from "react";
+import React3, { createContext as createContext2, useContext as useContext2 } from "react";
 import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-function Hud({ children }) {
-  return /* @__PURE__ */ React3.createElement(View2, { pointerEvents: "box-none", style: StyleSheet2.absoluteFill }, /* @__PURE__ */ React3.createElement(BottomSheetModalProvider, null, children));
+var HudContext = createContext2({ topInset: 0 });
+function useHudContext() {
+  return useContext2(HudContext);
+}
+function Hud({ children, topInset = 0 }) {
+  return /* @__PURE__ */ React3.createElement(HudContext.Provider, { value: { topInset } }, /* @__PURE__ */ React3.createElement(View2, { pointerEvents: "box-none", style: StyleSheet2.absoluteFill }, /* @__PURE__ */ React3.createElement(BottomSheetModalProvider, null, children)));
 }
 
 // src/ProjectSheet.tsx
@@ -345,8 +349,20 @@ function BlurBackground({ style }) {
 }
 
 // src/ProjectSheet.tsx
-function ProjectSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
+var renderBackdrop = (props) => /* @__PURE__ */ React5.createElement(
+  BottomSheetBackdrop,
+  {
+    ...props,
+    appearsOnIndex: 1,
+    disappearsOnIndex: 0,
+    opacity: 0.4,
+    pressBehavior: "collapse"
+  }
+);
+function ProjectSheet({ snapPoints = ["35%", "75%"], topInset, renderHeader, children }) {
   const { project, activeLineId, isAddNoteOpen } = useRetorBridge();
+  const { topInset: hudTopInset } = useHudContext();
+  const effectiveTopInset = topInset ?? hudTopInset;
   const sheetRef = useRef2(null);
   const snapPointsArr = useMemo3(() => snapPoints, [snapPoints]);
   const [minimized, setMinimized] = useState2(false);
@@ -381,18 +397,10 @@ function ProjectSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
       enableDismissOnClose: false,
       enableOverDrag: false,
       onChange: handleSheetChange,
-      backdropComponent: (props) => /* @__PURE__ */ React5.createElement(
-        BottomSheetBackdrop,
-        {
-          ...props,
-          appearsOnIndex: 1,
-          disappearsOnIndex: 0,
-          opacity: 0.4,
-          pressBehavior: "collapse"
-        }
-      ),
+      backdropComponent: renderBackdrop,
       handleIndicatorStyle: styles2.handle,
-      backgroundComponent: BlurBackground
+      backgroundComponent: BlurBackground,
+      topInset: effectiveTopInset
     },
     /* @__PURE__ */ React5.createElement(BottomSheetView, { style: styles2.content }, renderHeader ? renderHeader({ name: project?.name, description: project?.description }) : /* @__PURE__ */ React5.createElement(View4, { style: styles2.header }, /* @__PURE__ */ React5.createElement(View4, { style: { flex: 1, minWidth: 0 } }, project?.name && /* @__PURE__ */ React5.createElement(Text, { style: styles2.title, numberOfLines: 1 }, project.name), project?.description && /* @__PURE__ */ React5.createElement(Text, { style: styles2.subtitle, numberOfLines: 4 }, project.description)), /* @__PURE__ */ React5.createElement(Pressable, { style: styles2.iconBtn, onPress: toggleMinimize }, minimized ? /* @__PURE__ */ React5.createElement(ArrowUp, { size: 14, color: "rgba(255,255,255,0.6)" }) : /* @__PURE__ */ React5.createElement(ArrowDown, { size: 14, color: "rgba(255,255,255,0.6)" }))), children ?? /* @__PURE__ */ React5.createElement(DefaultLinesCarousel, null))
   );
@@ -476,8 +484,20 @@ import {
 } from "@gorhom/bottom-sheet";
 import Svg, { Circle } from "react-native-svg";
 import { ArrowDown as ArrowDown2, ArrowUp as ArrowUp2, Pause, Play, Plus } from "lucide-react-native";
-function LineDetailSheet({ snapPoints = ["35%", "75%"], renderHeader, children }) {
+var renderBackdrop2 = (props) => /* @__PURE__ */ React6.createElement(
+  BottomSheetBackdrop2,
+  {
+    ...props,
+    appearsOnIndex: 1,
+    disappearsOnIndex: 0,
+    opacity: 0.4,
+    pressBehavior: "collapse"
+  }
+);
+function LineDetailSheet({ snapPoints = ["35%", "75%"], topInset, renderHeader, children }) {
   const { activeLine, isAddNoteOpen, controls } = useRetorBridge();
+  const { topInset: hudTopInset } = useHudContext();
+  const effectiveTopInset = topInset ?? hudTopInset;
   const sheetRef = useRef3(null);
   const snapPointsArr = useMemo4(() => snapPoints, [snapPoints]);
   const [minimized, setMinimized] = useState3(false);
@@ -518,18 +538,10 @@ function LineDetailSheet({ snapPoints = ["35%", "75%"], renderHeader, children }
       enableOverDrag: false,
       onChange: handleSheetChange,
       footerComponent: renderFooter,
-      backdropComponent: (props) => /* @__PURE__ */ React6.createElement(
-        BottomSheetBackdrop2,
-        {
-          ...props,
-          appearsOnIndex: 1,
-          disappearsOnIndex: 0,
-          opacity: 0.4,
-          pressBehavior: "collapse"
-        }
-      ),
+      backdropComponent: renderBackdrop2,
       handleIndicatorStyle: styles3.handle,
-      backgroundComponent: BlurBackground
+      backgroundComponent: BlurBackground,
+      topInset: effectiveTopInset
     },
     activeLine && (children ?? /* @__PURE__ */ React6.createElement(DefaultLineTagList, { listHeader: header }))
   );
@@ -574,13 +586,18 @@ function LineTagList({ children, listHeader }) {
   }, [activeLine?._id]);
   useEffect3(() => {
     if (!closestTagId) return;
-    const t = setTimeout(() => {
+    let attempts = 0;
+    const tick = () => {
       const y = offsetsRef.current.get(closestTagId);
       if (y != null) {
-        scrollRef.current?.scrollTo({ y, animated: true });
+        scrollRef.current?.scrollTo?.({ y, animated: true });
+        return;
       }
-    }, 60);
-    return () => clearTimeout(t);
+      attempts += 1;
+      if (attempts < 10) raf = requestAnimationFrame(tick);
+    };
+    let raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
   }, [closestTagId]);
   if (!activeLine) return null;
   const handleItemLayout = (id, e) => {
@@ -693,13 +710,25 @@ import {
   BottomSheetView as BottomSheetView2
 } from "@gorhom/bottom-sheet";
 import { ArrowUp as ArrowUp3, X } from "lucide-react-native";
+var renderBackdrop3 = (props) => /* @__PURE__ */ React7.createElement(
+  BottomSheetBackdrop3,
+  {
+    ...props,
+    appearsOnIndex: 0,
+    disappearsOnIndex: -1,
+    opacity: 0.6
+  }
+);
 function AddNoteSheet({
   snapPoints = ["50%"],
+  topInset,
   maxLength = 280,
   placeholder = "Write a note...",
   renderForm
 }) {
   const { isAddNoteOpen, addNoteTagId, activeLine, closeAddNote, submitNote } = useRetorBridge();
+  const { topInset: hudTopInset } = useHudContext();
+  const effectiveTopInset = topInset ?? hudTopInset;
   const sheetRef = useRef4(null);
   const snapPointsArr = useMemo5(() => snapPoints, [snapPoints]);
   const [text, setText] = useState4("");
@@ -741,17 +770,10 @@ function AddNoteSheet({
       enablePanDownToClose: true,
       enableOverDrag: false,
       onDismiss: closeAddNote,
-      backdropComponent: (props) => /* @__PURE__ */ React7.createElement(
-        BottomSheetBackdrop3,
-        {
-          ...props,
-          appearsOnIndex: 0,
-          disappearsOnIndex: -1,
-          opacity: 0.6
-        }
-      ),
+      backdropComponent: renderBackdrop3,
       handleIndicatorStyle: styles4.handle,
-      backgroundComponent: BlurBackground
+      backgroundComponent: BlurBackground,
+      topInset: effectiveTopInset
     },
     /* @__PURE__ */ React7.createElement(BottomSheetView2, { style: styles4.content }, renderForm ? renderForm(formApi) : /* @__PURE__ */ React7.createElement(View6, { style: styles4.form }, /* @__PURE__ */ React7.createElement(View6, { style: styles4.headerRow }, /* @__PURE__ */ React7.createElement(View6, { style: { flex: 1 } }, activeLine && /* @__PURE__ */ React7.createElement(Text3, { style: styles4.title, numberOfLines: 1 }, activeLine.name), tag && /* @__PURE__ */ React7.createElement(Text3, { style: styles4.subtitle, numberOfLines: 1 }, tag.name)), /* @__PURE__ */ React7.createElement(Pressable3, { onPress: closeAddNote, style: styles4.closeBtn }, /* @__PURE__ */ React7.createElement(X, { size: 14, color: "rgba(255,255,255,0.6)" }))), /* @__PURE__ */ React7.createElement(
       BottomSheetTextInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retor/react-native",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "React Native SDK for embedding Retor 3D experiences",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",