@retor/react-native 0.3.4 → 0.4.0

package/dist/index.d.mts

@@ -43,6 +43,15 @@ interface InitPayload {
 interface LineProgressPayload {
     progress: number;
     closestTagId: string | null;
+    /** Point on the line at current progress (project-local space). */
+    targetPosition?: {
+        x: number;
+        y: number;
+        z: number;
+    } | null;
+    /** Distance along the line from the start.
+     *  In meters if GPS is configured on the project, else project-local units. */
+    distanceFromStart?: number | null;
 }
 interface ViewerHandle {
     openLine: (lineId: string) => void;
@@ -55,29 +64,39 @@ interface ViewerHandle {
 interface NoteSubmitPayload {
     text: string;
     isPrivate: boolean;
+    /** The tag that was active when the + button was pressed. */
     tagId: string | null;
     lineId: string | null;
+    /**
+     * Point on the line at the scroll position when the + button was pressed,
+     * in project-local space. This is where the note visually anchors.
+     */
     position: {
         x: number;
         y: number;
         z: number;
     } | null;
+    /** Scroll progress along the line (0..1) when the + was pressed. */
+    progress: number;
+    /** Distance from the start of the line when the + was pressed.
+     *  In meters if GPS is configured on the project, else project-local units. */
+    distanceFromStart: number | null;
 }
+/**
+ * Stable data + commands. Updates only when meaningful things change
+ * (line opens/closes, notes loaded, project changes). Does NOT update per frame.
+ */
 interface RetorBridgeContextValue {
     project: RetorProject | null;
     lines: RetorLine[];
     activeLineId: string | null;
     activeLine: RetorLine | null;
-    closestTagId: string | null;
-    progress: number;
-    isPlaying: boolean;
     isAddNoteOpen: boolean;
     addNoteTagId: string | null;
     controls: ViewerHandle;
     openAddNote: (tagId?: string) => void;
     closeAddNote: () => void;
     submitNote: (text: string, isPrivate?: boolean) => void;
-    onNoteSubmit?: (payload: NoteSubmitPayload) => void;
 }
 declare function useRetorBridge(): RetorBridgeContextValue;
 /** Returns the array of all lines in the current project. */
@@ -91,11 +110,18 @@ declare function useProject(): RetorProject | null;
 declare function useActiveLine(): RetorLine | null;
 /**
  * Returns scroll progress (0..1) and the id of the closest tag along the
- * currently active line. Both are null when no line is open.
+ * currently active line. Components using this re-render on every frame
+ * during camera scroll — only call from leaves (tag items, progress rings).
  */
 declare function useLineProgress(): {
     progress: number;
     closestTagId: string | null;
+    targetPosition: {
+        x: number;
+        y: number;
+        z: number;
+    } | null;
+    distanceFromStart: number | null;
 };
 /**
  * Returns the autoplay state and controls.
@@ -165,16 +191,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 +218,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 +239,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 +250,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 +277,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 +302,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

@@ -43,6 +43,15 @@ interface InitPayload {
 interface LineProgressPayload {
     progress: number;
     closestTagId: string | null;
+    /** Point on the line at current progress (project-local space). */
+    targetPosition?: {
+        x: number;
+        y: number;
+        z: number;
+    } | null;
+    /** Distance along the line from the start.
+     *  In meters if GPS is configured on the project, else project-local units. */
+    distanceFromStart?: number | null;
 }
 interface ViewerHandle {
     openLine: (lineId: string) => void;
@@ -55,29 +64,39 @@ interface ViewerHandle {
 interface NoteSubmitPayload {
     text: string;
     isPrivate: boolean;
+    /** The tag that was active when the + button was pressed. */
     tagId: string | null;
     lineId: string | null;
+    /**
+     * Point on the line at the scroll position when the + button was pressed,
+     * in project-local space. This is where the note visually anchors.
+     */
     position: {
         x: number;
         y: number;
         z: number;
     } | null;
+    /** Scroll progress along the line (0..1) when the + was pressed. */
+    progress: number;
+    /** Distance from the start of the line when the + was pressed.
+     *  In meters if GPS is configured on the project, else project-local units. */
+    distanceFromStart: number | null;
 }
+/**
+ * Stable data + commands. Updates only when meaningful things change
+ * (line opens/closes, notes loaded, project changes). Does NOT update per frame.
+ */
 interface RetorBridgeContextValue {
     project: RetorProject | null;
     lines: RetorLine[];
     activeLineId: string | null;
     activeLine: RetorLine | null;
-    closestTagId: string | null;
-    progress: number;
-    isPlaying: boolean;
     isAddNoteOpen: boolean;
     addNoteTagId: string | null;
     controls: ViewerHandle;
     openAddNote: (tagId?: string) => void;
     closeAddNote: () => void;
     submitNote: (text: string, isPrivate?: boolean) => void;
-    onNoteSubmit?: (payload: NoteSubmitPayload) => void;
 }
 declare function useRetorBridge(): RetorBridgeContextValue;
 /** Returns the array of all lines in the current project. */
@@ -91,11 +110,18 @@ declare function useProject(): RetorProject | null;
 declare function useActiveLine(): RetorLine | null;
 /**
  * Returns scroll progress (0..1) and the id of the closest tag along the
- * currently active line. Both are null when no line is open.
+ * currently active line. Components using this re-render on every frame
+ * during camera scroll — only call from leaves (tag items, progress rings).
  */
 declare function useLineProgress(): {
     progress: number;
     closestTagId: string | null;
+    targetPosition: {
+        x: number;
+        y: number;
+        z: number;
+    } | null;
+    distanceFromStart: number | null;
 };
 /**
  * Returns the autoplay state and controls.
@@ -165,16 +191,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 +218,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 +239,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 +250,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 +277,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 +302,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

@@ -54,6 +54,13 @@ module.exports = __toCommonJS(index_exports);
 // src/context.tsx
 var import_react = __toESM(require("react"));
 var RetorBridgeContext = (0, import_react.createContext)(null);
+var RetorProgressContext = (0, import_react.createContext)({
+  progress: 0,
+  closestTagId: null,
+  targetPosition: null,
+  distanceFromStart: null,
+  isPlaying: false
+});
 function noop() {
 }
 var noopHandle = {
@@ -68,9 +75,6 @@ var fallback = {
   lines: [],
   activeLineId: null,
   activeLine: null,
-  closestTagId: null,
-  progress: 0,
-  isPlaying: false,
   isAddNoteOpen: false,
   addNoteTagId: null,
   controls: noopHandle,
@@ -81,6 +85,9 @@ var fallback = {
 function useRetorBridge() {
   return (0, import_react.useContext)(RetorBridgeContext) ?? fallback;
 }
+function useRetorProgress() {
+  return (0, import_react.useContext)(RetorProgressContext);
+}
 function useLines() {
   return useRetorBridge().lines;
 }
@@ -91,11 +98,15 @@ function useActiveLine() {
   return useRetorBridge().activeLine;
 }
 function useLineProgress() {
-  const { progress, closestTagId } = useRetorBridge();
-  return (0, import_react.useMemo)(() => ({ progress, closestTagId }), [progress, closestTagId]);
+  const { progress, closestTagId, targetPosition, distanceFromStart } = useRetorProgress();
+  return (0, import_react.useMemo)(
+    () => ({ progress, closestTagId, targetPosition, distanceFromStart }),
+    [progress, closestTagId, targetPosition, distanceFromStart]
+  );
 }
 function useAutoplay() {
-  const { isPlaying, controls } = useRetorBridge();
+  const { isPlaying } = useRetorProgress();
+  const { controls } = useRetorBridge();
   return (0, import_react.useMemo)(() => ({
     isPlaying,
     toggle: () => controls.toggleAutoplay(),
@@ -116,6 +127,9 @@ function useAddNote() {
 function RetorBridgeProvider({ value, children }) {
   return /* @__PURE__ */ import_react.default.createElement(RetorBridgeContext.Provider, { value }, children);
 }
+function RetorProgressProvider({ value, children }) {
+  return /* @__PURE__ */ import_react.default.createElement(RetorProgressContext.Provider, { value }, children);
+}
 
 // src/Viewer.tsx
 var import_react2 = __toESM(require("react"));
@@ -194,6 +208,8 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
   const [activeLineId, setActiveLineId] = (0, import_react2.useState)(null);
   const [closestTagId, setClosestTagId] = (0, import_react2.useState)(null);
   const [progress, setProgress] = (0, import_react2.useState)(0);
+  const [targetPosition, setTargetPosition] = (0, import_react2.useState)(null);
+  const [distanceFromStart, setDistanceFromStart] = (0, import_react2.useState)(null);
   const [isPlaying, setIsPlaying] = (0, import_react2.useState)(false);
   const [isAddNoteOpen, setIsAddNoteOpen] = (0, import_react2.useState)(false);
   const [addNoteTagId, setAddNoteTagId] = (0, import_react2.useState)(null);
@@ -235,8 +251,11 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
   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);
+  const noteSnapshotRef = (0, import_react2.useRef)({ progress: 0, targetPosition: null, distanceFromStart: null });
+  const progressRef = (0, import_react2.useRef)(progress);
+  const targetPositionRef = (0, import_react2.useRef)(targetPosition);
+  const distanceFromStartRef = (0, import_react2.useRef)(distanceFromStart);
   (0, import_react2.useEffect)(() => {
     closestTagIdRef.current = closestTagId;
   }, [closestTagId]);
@@ -246,14 +265,25 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
   (0, import_react2.useEffect)(() => {
     activeLineIdRef.current = activeLineId;
   }, [activeLineId]);
-  (0, import_react2.useEffect)(() => {
-    linesRef.current = lines;
-  }, [lines]);
   (0, import_react2.useEffect)(() => {
     onNoteSubmitRef.current = onNoteSubmit;
   }, [onNoteSubmit]);
+  (0, import_react2.useEffect)(() => {
+    progressRef.current = progress;
+  }, [progress]);
+  (0, import_react2.useEffect)(() => {
+    targetPositionRef.current = targetPosition;
+  }, [targetPosition]);
+  (0, import_react2.useEffect)(() => {
+    distanceFromStartRef.current = distanceFromStart;
+  }, [distanceFromStart]);
   const openAddNote = (0, import_react2.useCallback)((tagId) => {
     setAddNoteTagId(tagId ?? closestTagIdRef.current ?? null);
+    noteSnapshotRef.current = {
+      progress: progressRef.current,
+      targetPosition: targetPositionRef.current,
+      distanceFromStart: distanceFromStartRef.current
+    };
     setIsAddNoteOpen(true);
   }, []);
   const closeAddNote = (0, import_react2.useCallback)(() => {
@@ -262,13 +292,15 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
   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 snap = noteSnapshotRef.current;
     const payload = {
       text,
       isPrivate,
       tagId,
       lineId,
-      position: tag?.position ?? null
+      position: snap.targetPosition,
+      progress: snap.progress,
+      distanceFromStart: snap.distanceFromStart
     };
     onNoteSubmitRef.current?.(payload);
     setIsAddNoteOpen(false);
@@ -309,6 +341,8 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
           const payload = data.payload;
           setProgress(payload.progress);
           setClosestTagId(payload.closestTagId);
+          setTargetPosition(payload.targetPosition ?? null);
+          setDistanceFromStart(payload.distanceFromStart ?? null);
           onLineProgress?.(payload);
           break;
         }
@@ -333,20 +367,20 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
       lines,
       activeLineId,
       activeLine,
-      closestTagId,
-      progress,
-      isPlaying,
       isAddNoteOpen,
       addNoteTagId,
       controls,
       openAddNote,
       closeAddNote,
-      submitNote,
-      onNoteSubmit
+      submitNote
     }),
-    [project, lines, activeLineId, activeLine, closestTagId, progress, isPlaying, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote, onNoteSubmit]
+    [project, lines, activeLineId, activeLine, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote]
+  );
+  const progressCtx = (0, import_react2.useMemo)(
+    () => ({ progress, closestTagId, targetPosition, distanceFromStart, isPlaying }),
+    [progress, closestTagId, targetPosition, distanceFromStart, isPlaying]
   );
-  return /* @__PURE__ */ import_react2.default.createElement(RetorBridgeProvider, { value: ctxValue }, /* @__PURE__ */ import_react2.default.createElement(import_react_native.View, { style: [styles.root, style] }, /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react2.default.createElement(RetorBridgeProvider, { value: ctxValue }, /* @__PURE__ */ import_react2.default.createElement(RetorProgressProvider, { value: progressCtx }, /* @__PURE__ */ import_react2.default.createElement(import_react_native.View, { style: [styles.root, style] }, /* @__PURE__ */ import_react2.default.createElement(
     import_react_native_webview.WebView,
     {
       ref: webviewRef,
@@ -359,7 +393,7 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
       allowsInlineMediaPlayback: true,
       mediaPlaybackRequiresUserAction: false
     }
-  ), children));
+  ), children)));
 });
 var styles = import_react_native.StyleSheet.create({
   root: { flex: 1, position: "relative" },
@@ -370,8 +404,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 +427,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 +475,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 +557,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 +611,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 }))
   );
@@ -581,7 +627,8 @@ function DefaultHeader({
   return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: styles3.header }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles3.title, numberOfLines: 1 }, line.name), line.subtitle && /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles3.subtitle, numberOfLines: 1 }, line.subtitle), line.description && /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles3.description, numberOfLines: minimized ? 2 : 4 }, line.description)), /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: styles3.headerActions }, /* @__PURE__ */ import_react6.default.createElement(AutoplayButton, null), /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Pressable, { style: styles3.iconBtn, onPress: onToggleMinimize }, minimized ? /* @__PURE__ */ import_react6.default.createElement(import_lucide_react_native2.ArrowUp, { size: 14, color: "rgba(255,255,255,0.6)" }) : /* @__PURE__ */ import_react6.default.createElement(import_lucide_react_native2.ArrowDown, { size: 14, color: "rgba(255,255,255,0.6)" }))));
 }
 function AutoplayButton() {
-  const { isPlaying, progress, controls } = useRetorBridge();
+  const { controls } = useRetorBridge();
+  const { isPlaying, progress } = useRetorProgress();
   const r = 12.5;
   const c = 2 * Math.PI * r;
   return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Pressable, { style: styles3.iconBtn, onPress: () => controls.toggleAutoplay() }, /* @__PURE__ */ import_react6.default.createElement(import_react_native_svg.default, { width: 28, height: 28, style: import_react_native5.StyleSheet.absoluteFill }, /* @__PURE__ */ import_react6.default.createElement(
@@ -601,7 +648,8 @@ function AutoplayButton() {
   )), isPlaying ? /* @__PURE__ */ import_react6.default.createElement(import_lucide_react_native2.Pause, { size: 11, color: "white", fill: "white" }) : /* @__PURE__ */ import_react6.default.createElement(import_lucide_react_native2.Play, { size: 11, color: "white", fill: "white", style: { marginLeft: 1 } }));
 }
 function LineTagList({ children, listHeader }) {
-  const { activeLine, closestTagId } = useRetorBridge();
+  const { activeLine } = useRetorBridge();
+  const { closestTagId } = useRetorProgress();
   const scrollRef = (0, import_react6.useRef)(null);
   const offsetsRef = (0, import_react6.useRef)(/* @__PURE__ */ new Map());
   const tags = (0, import_react6.useMemo)(
@@ -611,14 +659,16 @@ function LineTagList({ children, listHeader }) {
   (0, import_react6.useEffect)(() => {
     offsetsRef.current = /* @__PURE__ */ new Map();
   }, [activeLine?._id]);
+  const lastScrolledIdRef = (0, import_react6.useRef)(null);
   (0, import_react6.useEffect)(() => {
-    if (!closestTagId) return;
+    if (!closestTagId || closestTagId === lastScrolledIdRef.current) return;
     const t = setTimeout(() => {
       const y = offsetsRef.current.get(closestTagId);
       if (y != null) {
-        scrollRef.current?.scrollTo({ y, animated: true });
+        scrollRef.current?.scrollTo?.({ y, animated: true });
+        lastScrolledIdRef.current = closestTagId;
       }
-    }, 60);
+    }, 300);
     return () => clearTimeout(t);
   }, [closestTagId]);
   if (!activeLine) return null;
@@ -727,13 +777,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 +837,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

@@ -1,6 +1,13 @@
 // src/context.tsx
 import React, { createContext, useContext, useMemo } from "react";
 var RetorBridgeContext = createContext(null);
+var RetorProgressContext = createContext({
+  progress: 0,
+  closestTagId: null,
+  targetPosition: null,
+  distanceFromStart: null,
+  isPlaying: false
+});
 function noop() {
 }
 var noopHandle = {
@@ -15,9 +22,6 @@ var fallback = {
   lines: [],
   activeLineId: null,
   activeLine: null,
-  closestTagId: null,
-  progress: 0,
-  isPlaying: false,
   isAddNoteOpen: false,
   addNoteTagId: null,
   controls: noopHandle,
@@ -28,6 +32,9 @@ var fallback = {
 function useRetorBridge() {
   return useContext(RetorBridgeContext) ?? fallback;
 }
+function useRetorProgress() {
+  return useContext(RetorProgressContext);
+}
 function useLines() {
   return useRetorBridge().lines;
 }
@@ -38,11 +45,15 @@ function useActiveLine() {
   return useRetorBridge().activeLine;
 }
 function useLineProgress() {
-  const { progress, closestTagId } = useRetorBridge();
-  return useMemo(() => ({ progress, closestTagId }), [progress, closestTagId]);
+  const { progress, closestTagId, targetPosition, distanceFromStart } = useRetorProgress();
+  return useMemo(
+    () => ({ progress, closestTagId, targetPosition, distanceFromStart }),
+    [progress, closestTagId, targetPosition, distanceFromStart]
+  );
 }
 function useAutoplay() {
-  const { isPlaying, controls } = useRetorBridge();
+  const { isPlaying } = useRetorProgress();
+  const { controls } = useRetorBridge();
   return useMemo(() => ({
     isPlaying,
     toggle: () => controls.toggleAutoplay(),
@@ -63,6 +74,9 @@ function useAddNote() {
 function RetorBridgeProvider({ value, children }) {
   return /* @__PURE__ */ React.createElement(RetorBridgeContext.Provider, { value }, children);
 }
+function RetorProgressProvider({ value, children }) {
+  return /* @__PURE__ */ React.createElement(RetorProgressContext.Provider, { value }, children);
+}
 
 // src/Viewer.tsx
 import React2, {
@@ -150,6 +164,8 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
   const [activeLineId, setActiveLineId] = useState(null);
   const [closestTagId, setClosestTagId] = useState(null);
   const [progress, setProgress] = useState(0);
+  const [targetPosition, setTargetPosition] = useState(null);
+  const [distanceFromStart, setDistanceFromStart] = useState(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isAddNoteOpen, setIsAddNoteOpen] = useState(false);
   const [addNoteTagId, setAddNoteTagId] = useState(null);
@@ -191,8 +207,11 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
   const closestTagIdRef = useRef(closestTagId);
   const addNoteTagIdRef = useRef(addNoteTagId);
   const activeLineIdRef = useRef(activeLineId);
-  const linesRef = useRef(lines);
   const onNoteSubmitRef = useRef(onNoteSubmit);
+  const noteSnapshotRef = useRef({ progress: 0, targetPosition: null, distanceFromStart: null });
+  const progressRef = useRef(progress);
+  const targetPositionRef = useRef(targetPosition);
+  const distanceFromStartRef = useRef(distanceFromStart);
   useEffect(() => {
     closestTagIdRef.current = closestTagId;
   }, [closestTagId]);
@@ -202,14 +221,25 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
   useEffect(() => {
     activeLineIdRef.current = activeLineId;
   }, [activeLineId]);
-  useEffect(() => {
-    linesRef.current = lines;
-  }, [lines]);
   useEffect(() => {
     onNoteSubmitRef.current = onNoteSubmit;
   }, [onNoteSubmit]);
+  useEffect(() => {
+    progressRef.current = progress;
+  }, [progress]);
+  useEffect(() => {
+    targetPositionRef.current = targetPosition;
+  }, [targetPosition]);
+  useEffect(() => {
+    distanceFromStartRef.current = distanceFromStart;
+  }, [distanceFromStart]);
   const openAddNote = useCallback((tagId) => {
     setAddNoteTagId(tagId ?? closestTagIdRef.current ?? null);
+    noteSnapshotRef.current = {
+      progress: progressRef.current,
+      targetPosition: targetPositionRef.current,
+      distanceFromStart: distanceFromStartRef.current
+    };
     setIsAddNoteOpen(true);
   }, []);
   const closeAddNote = useCallback(() => {
@@ -218,13 +248,15 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
   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 snap = noteSnapshotRef.current;
     const payload = {
       text,
       isPrivate,
       tagId,
       lineId,
-      position: tag?.position ?? null
+      position: snap.targetPosition,
+      progress: snap.progress,
+      distanceFromStart: snap.distanceFromStart
     };
     onNoteSubmitRef.current?.(payload);
     setIsAddNoteOpen(false);
@@ -265,6 +297,8 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
           const payload = data.payload;
           setProgress(payload.progress);
           setClosestTagId(payload.closestTagId);
+          setTargetPosition(payload.targetPosition ?? null);
+          setDistanceFromStart(payload.distanceFromStart ?? null);
           onLineProgress?.(payload);
           break;
         }
@@ -289,20 +323,20 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
       lines,
       activeLineId,
       activeLine,
-      closestTagId,
-      progress,
-      isPlaying,
       isAddNoteOpen,
       addNoteTagId,
       controls,
       openAddNote,
       closeAddNote,
-      submitNote,
-      onNoteSubmit
+      submitNote
     }),
-    [project, lines, activeLineId, activeLine, closestTagId, progress, isPlaying, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote, onNoteSubmit]
+    [project, lines, activeLineId, activeLine, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote]
+  );
+  const progressCtx = useMemo2(
+    () => ({ progress, closestTagId, targetPosition, distanceFromStart, isPlaying }),
+    [progress, closestTagId, targetPosition, distanceFromStart, isPlaying]
   );
-  return /* @__PURE__ */ React2.createElement(RetorBridgeProvider, { value: ctxValue }, /* @__PURE__ */ React2.createElement(View, { style: [styles.root, style] }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React2.createElement(RetorBridgeProvider, { value: ctxValue }, /* @__PURE__ */ React2.createElement(RetorProgressProvider, { value: progressCtx }, /* @__PURE__ */ React2.createElement(View, { style: [styles.root, style] }, /* @__PURE__ */ React2.createElement(
     WebView,
     {
       ref: webviewRef,
@@ -315,7 +349,7 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
       allowsInlineMediaPlayback: true,
       mediaPlaybackRequiresUserAction: false
     }
-  ), children));
+  ), children)));
 });
 var styles = StyleSheet.create({
   root: { flex: 1, position: "relative" },
@@ -323,11 +357,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 +383,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 +431,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 +518,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 +572,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 }))
   );
@@ -542,7 +588,8 @@ function DefaultHeader({
   return /* @__PURE__ */ React6.createElement(View5, { style: styles3.header }, /* @__PURE__ */ React6.createElement(View5, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement(Text2, { style: styles3.title, numberOfLines: 1 }, line.name), line.subtitle && /* @__PURE__ */ React6.createElement(Text2, { style: styles3.subtitle, numberOfLines: 1 }, line.subtitle), line.description && /* @__PURE__ */ React6.createElement(Text2, { style: styles3.description, numberOfLines: minimized ? 2 : 4 }, line.description)), /* @__PURE__ */ React6.createElement(View5, { style: styles3.headerActions }, /* @__PURE__ */ React6.createElement(AutoplayButton, null), /* @__PURE__ */ React6.createElement(Pressable2, { style: styles3.iconBtn, onPress: onToggleMinimize }, minimized ? /* @__PURE__ */ React6.createElement(ArrowUp2, { size: 14, color: "rgba(255,255,255,0.6)" }) : /* @__PURE__ */ React6.createElement(ArrowDown2, { size: 14, color: "rgba(255,255,255,0.6)" }))));
 }
 function AutoplayButton() {
-  const { isPlaying, progress, controls } = useRetorBridge();
+  const { controls } = useRetorBridge();
+  const { isPlaying, progress } = useRetorProgress();
   const r = 12.5;
   const c = 2 * Math.PI * r;
   return /* @__PURE__ */ React6.createElement(Pressable2, { style: styles3.iconBtn, onPress: () => controls.toggleAutoplay() }, /* @__PURE__ */ React6.createElement(Svg, { width: 28, height: 28, style: StyleSheet5.absoluteFill }, /* @__PURE__ */ React6.createElement(
@@ -562,7 +609,8 @@ function AutoplayButton() {
   )), isPlaying ? /* @__PURE__ */ React6.createElement(Pause, { size: 11, color: "white", fill: "white" }) : /* @__PURE__ */ React6.createElement(Play, { size: 11, color: "white", fill: "white", style: { marginLeft: 1 } }));
 }
 function LineTagList({ children, listHeader }) {
-  const { activeLine, closestTagId } = useRetorBridge();
+  const { activeLine } = useRetorBridge();
+  const { closestTagId } = useRetorProgress();
   const scrollRef = useRef3(null);
   const offsetsRef = useRef3(/* @__PURE__ */ new Map());
   const tags = useMemo4(
@@ -572,14 +620,16 @@ function LineTagList({ children, listHeader }) {
   useEffect3(() => {
     offsetsRef.current = /* @__PURE__ */ new Map();
   }, [activeLine?._id]);
+  const lastScrolledIdRef = useRef3(null);
   useEffect3(() => {
-    if (!closestTagId) return;
+    if (!closestTagId || closestTagId === lastScrolledIdRef.current) return;
     const t = setTimeout(() => {
       const y = offsetsRef.current.get(closestTagId);
       if (y != null) {
-        scrollRef.current?.scrollTo({ y, animated: true });
+        scrollRef.current?.scrollTo?.({ y, animated: true });
+        lastScrolledIdRef.current = closestTagId;
       }
-    }, 60);
+    }, 300);
     return () => clearTimeout(t);
   }, [closestTagId]);
   if (!activeLine) return null;
@@ -693,13 +743,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 +803,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.4.0",
   "description": "React Native SDK for embedding Retor 3D experiences",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",