@retor/react-native 0.3.2 → 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%", "85%"]. */
+    /** 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;
@@ -207,14 +222,19 @@ interface LinesCarouselProps {
 declare function LinesCarousel({ children, gap, paddingHorizontal }: LinesCarouselProps): React.JSX.Element | null;
 
 interface LineDetailSheetProps {
-    /** Snap points. Defaults to ["35%", "85%"]. */
+    /** 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%", "85%"]. */
+    /** 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;
@@ -207,14 +222,19 @@ interface LinesCarouselProps {
 declare function LinesCarousel({ children, gap, paddingHorizontal }: LinesCarouselProps): React.JSX.Element | null;
 
 interface LineDetailSheetProps {
-    /** Snap points. Defaults to ["35%", "85%"]. */
+    /** 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

@@ -232,30 +232,47 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
     if (!notes || !readyRef.current) return;
     send("set-notes", { notes });
   }, [notes, send]);
+  const closestTagIdRef = (0, import_react2.useRef)(closestTagId);
+  const addNoteTagIdRef = (0, import_react2.useRef)(addNoteTagId);
+  const activeLineIdRef = (0, import_react2.useRef)(activeLineId);
+  const linesRef = (0, import_react2.useRef)(lines);
+  const onNoteSubmitRef = (0, import_react2.useRef)(onNoteSubmit);
+  (0, import_react2.useEffect)(() => {
+    closestTagIdRef.current = closestTagId;
+  }, [closestTagId]);
+  (0, import_react2.useEffect)(() => {
+    addNoteTagIdRef.current = addNoteTagId;
+  }, [addNoteTagId]);
+  (0, import_react2.useEffect)(() => {
+    activeLineIdRef.current = activeLineId;
+  }, [activeLineId]);
+  (0, import_react2.useEffect)(() => {
+    linesRef.current = lines;
+  }, [lines]);
+  (0, import_react2.useEffect)(() => {
+    onNoteSubmitRef.current = onNoteSubmit;
+  }, [onNoteSubmit]);
   const openAddNote = (0, import_react2.useCallback)((tagId) => {
-    setAddNoteTagId(tagId ?? closestTagId ?? null);
+    setAddNoteTagId(tagId ?? closestTagIdRef.current ?? null);
     setIsAddNoteOpen(true);
-  }, [closestTagId]);
+  }, []);
   const closeAddNote = (0, import_react2.useCallback)(() => {
     setIsAddNoteOpen(false);
   }, []);
-  const submitNote = (0, import_react2.useCallback)(
-    (text, isPrivate = true) => {
-      const tagId = addNoteTagId;
-      const lineId = activeLineId;
-      const tag = lines.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
-      const payload = {
-        text,
-        isPrivate,
-        tagId,
-        lineId,
-        position: tag?.position ?? null
-      };
-      onNoteSubmit?.(payload);
-      setIsAddNoteOpen(false);
-    },
-    [addNoteTagId, activeLineId, lines, onNoteSubmit]
-  );
+  const submitNote = (0, import_react2.useCallback)((text, isPrivate = true) => {
+    const tagId = addNoteTagIdRef.current;
+    const lineId = activeLineIdRef.current;
+    const tag = linesRef.current.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
+    const payload = {
+      text,
+      isPrivate,
+      tagId,
+      lineId,
+      position: tag?.position ?? null
+    };
+    onNoteSubmitRef.current?.(payload);
+    setIsAddNoteOpen(false);
+  }, []);
   const handleMessage = (0, import_react2.useCallback)(
     (event) => {
       let data = null;
@@ -353,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
@@ -372,8 +393,20 @@ function BlurBackground({ style }) {
 }
 
 // src/ProjectSheet.tsx
-function ProjectSheet({ snapPoints = ["35%", "85%"], 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);
@@ -406,19 +439,12 @@ function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       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))
   );
@@ -497,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%", "85%"], 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);
@@ -536,20 +574,13 @@ function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      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 }))
   );
@@ -594,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) => {
@@ -665,10 +701,11 @@ var styles3 = import_react_native5.StyleSheet.create({
     justifyContent: "center",
     position: "relative"
   },
-  list: { paddingHorizontal: 16, paddingBottom: 96, gap: 4 },
+  list: { paddingBottom: 96, gap: 4 },
   tagItem: {
     flexDirection: "row",
     alignItems: "center",
+    marginHorizontal: 16,
     paddingHorizontal: 12,
     paddingVertical: 12,
     borderRadius: 12,
@@ -707,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)("");
@@ -753,18 +802,12 @@ function AddNoteSheet({
       ref: sheetRef,
       snapPoints: snapPointsArr,
       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

@@ -188,30 +188,47 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
     if (!notes || !readyRef.current) return;
     send("set-notes", { notes });
   }, [notes, send]);
+  const closestTagIdRef = useRef(closestTagId);
+  const addNoteTagIdRef = useRef(addNoteTagId);
+  const activeLineIdRef = useRef(activeLineId);
+  const linesRef = useRef(lines);
+  const onNoteSubmitRef = useRef(onNoteSubmit);
+  useEffect(() => {
+    closestTagIdRef.current = closestTagId;
+  }, [closestTagId]);
+  useEffect(() => {
+    addNoteTagIdRef.current = addNoteTagId;
+  }, [addNoteTagId]);
+  useEffect(() => {
+    activeLineIdRef.current = activeLineId;
+  }, [activeLineId]);
+  useEffect(() => {
+    linesRef.current = lines;
+  }, [lines]);
+  useEffect(() => {
+    onNoteSubmitRef.current = onNoteSubmit;
+  }, [onNoteSubmit]);
   const openAddNote = useCallback((tagId) => {
-    setAddNoteTagId(tagId ?? closestTagId ?? null);
+    setAddNoteTagId(tagId ?? closestTagIdRef.current ?? null);
     setIsAddNoteOpen(true);
-  }, [closestTagId]);
+  }, []);
   const closeAddNote = useCallback(() => {
     setIsAddNoteOpen(false);
   }, []);
-  const submitNote = useCallback(
-    (text, isPrivate = true) => {
-      const tagId = addNoteTagId;
-      const lineId = activeLineId;
-      const tag = lines.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
-      const payload = {
-        text,
-        isPrivate,
-        tagId,
-        lineId,
-        position: tag?.position ?? null
-      };
-      onNoteSubmit?.(payload);
-      setIsAddNoteOpen(false);
-    },
-    [addNoteTagId, activeLineId, lines, onNoteSubmit]
-  );
+  const submitNote = useCallback((text, isPrivate = true) => {
+    const tagId = addNoteTagIdRef.current;
+    const lineId = activeLineIdRef.current;
+    const tag = linesRef.current.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
+    const payload = {
+      text,
+      isPrivate,
+      tagId,
+      lineId,
+      position: tag?.position ?? null
+    };
+    onNoteSubmitRef.current?.(payload);
+    setIsAddNoteOpen(false);
+  }, []);
   const handleMessage = useCallback(
     (event) => {
       let data = null;
@@ -306,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
@@ -328,8 +349,20 @@ function BlurBackground({ style }) {
 }
 
 // src/ProjectSheet.tsx
-function ProjectSheet({ snapPoints = ["35%", "85%"], 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);
@@ -362,19 +395,12 @@ function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       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))
   );
@@ -458,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%", "85%"], 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);
@@ -497,20 +535,13 @@ function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      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 }))
   );
@@ -555,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) => {
@@ -626,10 +662,11 @@ var styles3 = StyleSheet5.create({
     justifyContent: "center",
     position: "relative"
   },
-  list: { paddingHorizontal: 16, paddingBottom: 96, gap: 4 },
+  list: { paddingBottom: 96, gap: 4 },
   tagItem: {
     flexDirection: "row",
     alignItems: "center",
+    marginHorizontal: 16,
     paddingHorizontal: 12,
     paddingVertical: 12,
     borderRadius: 12,
@@ -673,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("");
@@ -719,18 +768,12 @@ function AddNoteSheet({
       ref: sheetRef,
       snapPoints: snapPointsArr,
       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.2",
+  "version": "0.3.6",
   "description": "React Native SDK for embedding Retor 3D experiences",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",