@retor/react-native 0.4.0 → 0.4.2

package/dist/index.d.mts

@@ -17,6 +17,10 @@ interface RetorTag {
     tagType?: string;
     iconName?: string;
     objectId?: string;
+    /** 0..1 position along the parent line. Set on notes; computed from index for control tags. */
+    progress?: number;
+    /** Profile image URL. For notes rendered with `icon` tag type, replaces the icon with a circular avatar. */
+    avatarUrl?: string;
 }
 interface RetorLine {
     _id: string;
@@ -91,6 +95,10 @@ interface RetorBridgeContextValue {
     lines: RetorLine[];
     activeLineId: string | null;
     activeLine: RetorLine | null;
+    /** Notes for the active line, pushed by the bridge from Convex. */
+    lineNotes: RetorTag[];
+    /** Notes injected by the consumer via the <Notes> sentinel. */
+    externalNotes: RetorTag[];
     isAddNoteOpen: boolean;
     addNoteTagId: string | null;
     controls: ViewerHandle;

package/dist/index.d.ts

@@ -17,6 +17,10 @@ interface RetorTag {
     tagType?: string;
     iconName?: string;
     objectId?: string;
+    /** 0..1 position along the parent line. Set on notes; computed from index for control tags. */
+    progress?: number;
+    /** Profile image URL. For notes rendered with `icon` tag type, replaces the icon with a circular avatar. */
+    avatarUrl?: string;
 }
 interface RetorLine {
     _id: string;
@@ -91,6 +95,10 @@ interface RetorBridgeContextValue {
     lines: RetorLine[];
     activeLineId: string | null;
     activeLine: RetorLine | null;
+    /** Notes for the active line, pushed by the bridge from Convex. */
+    lineNotes: RetorTag[];
+    /** Notes injected by the consumer via the <Notes> sentinel. */
+    externalNotes: RetorTag[];
     isAddNoteOpen: boolean;
     addNoteTagId: string | null;
     controls: ViewerHandle;

package/dist/index.js

@@ -75,6 +75,8 @@ var fallback = {
   lines: [],
   activeLineId: null,
   activeLine: null,
+  lineNotes: [],
+  externalNotes: [],
   isAddNoteOpen: false,
   addNoteTagId: null,
   controls: noopHandle,
@@ -213,6 +215,7 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
   const [isPlaying, setIsPlaying] = (0, import_react2.useState)(false);
   const [isAddNoteOpen, setIsAddNoteOpen] = (0, import_react2.useState)(false);
   const [addNoteTagId, setAddNoteTagId] = (0, import_react2.useState)(null);
+  const [lineNotes, setLineNotes] = (0, import_react2.useState)([]);
   const uri = (0, import_react2.useMemo)(() => `${baseUrl}/p/${projectId}?vanilla=true`, [baseUrl, projectId]);
   const send = (0, import_react2.useCallback)((type, payload) => {
     const message = JSON.stringify({ source: "retor-host", type, payload });
@@ -302,9 +305,13 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
       progress: snap.progress,
       distanceFromStart: snap.distanceFromStart
     };
-    onNoteSubmitRef.current?.(payload);
+    if (onNoteSubmitRef.current) {
+      onNoteSubmitRef.current(payload);
+    } else {
+      send("note-submit", payload);
+    }
     setIsAddNoteOpen(false);
-  }, []);
+  }, [send]);
   const handleMessage = (0, import_react2.useCallback)(
     (event) => {
       let data = null;
@@ -335,6 +342,7 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
         case "line-close":
           setActiveLineId(null);
           setIsPlaying(false);
+          setLineNotes([]);
           onLineClose?.();
           break;
         case "line-progress": {
@@ -346,6 +354,14 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
           onLineProgress?.(payload);
           break;
         }
+        case "line-notes": {
+          const payload = data.payload;
+          setLineNotes(payload.notes ?? []);
+          break;
+        }
+        case "request-add-note":
+          openAddNote();
+          break;
         case "autoplay-state": {
           const payload = data.payload;
           setIsPlaying(!!payload.playing);
@@ -355,18 +371,21 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
           onMessage?.(data.type, data.payload);
       }
     },
-    [notes, send, onInit, onLineOpen, onLineClose, onLineProgress, onMessage]
+    [notes, send, onInit, onLineOpen, onLineClose, onLineProgress, onMessage, openAddNote]
   );
   const activeLine = (0, import_react2.useMemo)(
     () => lines.find((l) => l._id === activeLineId) ?? null,
     [lines, activeLineId]
   );
+  const externalNotes = (0, import_react2.useMemo)(() => notes ?? [], [notes]);
   const ctxValue = (0, import_react2.useMemo)(
     () => ({
       project,
       lines,
       activeLineId,
       activeLine,
+      lineNotes,
+      externalNotes,
       isAddNoteOpen,
       addNoteTagId,
       controls,
@@ -374,7 +393,7 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
       closeAddNote,
       submitNote
     }),
-    [project, lines, activeLineId, activeLine, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote]
+    [project, lines, activeLineId, activeLine, lineNotes, externalNotes, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote]
   );
   const progressCtx = (0, import_react2.useMemo)(
     () => ({ progress, closestTagId, targetPosition, distanceFromStart, isPlaying }),
@@ -557,6 +576,24 @@ 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");
+
+// src/lineProgress.ts
+function mergeLineTagsByProgress(controls, notes) {
+  const sortedControls = [...controls].sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
+  const lastIdx = Math.max(1, sortedControls.length - 1);
+  const merged = [];
+  for (const c of sortedControls) {
+    const idx = c.index ?? 0;
+    merged.push({ ...c, _isNote: false, progress: idx / lastIdx });
+  }
+  for (const n of notes) {
+    merged.push({ ...n, _isNote: true, progress: n.progress ?? 0 });
+  }
+  merged.sort((a, b) => a.progress - b.progress);
+  return merged;
+}
+
+// src/LineDetailSheet.tsx
 var renderBackdrop2 = (props) => /* @__PURE__ */ import_react6.default.createElement(
   import_bottom_sheet3.BottomSheetBackdrop,
   {
@@ -648,14 +685,20 @@ 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 } = useRetorBridge();
+  const { activeLine, lineNotes, externalNotes } = 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)(
-    () => (activeLine?.tags ?? []).filter((t) => t.name && t.name.trim().length > 0),
-    [activeLine]
-  );
+  const tags = (0, import_react6.useMemo)(() => {
+    if (!activeLine) return [];
+    const controls = (activeLine.tags ?? []).filter(
+      (t) => t.name && t.name.trim().length > 0
+    );
+    const allNotes = [...lineNotes, ...externalNotes].filter(
+      (n) => n.name && n.name.trim().length > 0
+    );
+    return mergeLineTagsByProgress(controls, allNotes);
+  }, [activeLine, lineNotes, externalNotes]);
   (0, import_react6.useEffect)(() => {
     offsetsRef.current = /* @__PURE__ */ new Map();
   }, [activeLine?._id]);

package/dist/index.mjs

@@ -22,6 +22,8 @@ var fallback = {
   lines: [],
   activeLineId: null,
   activeLine: null,
+  lineNotes: [],
+  externalNotes: [],
   isAddNoteOpen: false,
   addNoteTagId: null,
   controls: noopHandle,
@@ -169,6 +171,7 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
   const [isPlaying, setIsPlaying] = useState(false);
   const [isAddNoteOpen, setIsAddNoteOpen] = useState(false);
   const [addNoteTagId, setAddNoteTagId] = useState(null);
+  const [lineNotes, setLineNotes] = useState([]);
   const uri = useMemo2(() => `${baseUrl}/p/${projectId}?vanilla=true`, [baseUrl, projectId]);
   const send = useCallback((type, payload) => {
     const message = JSON.stringify({ source: "retor-host", type, payload });
@@ -258,9 +261,13 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
       progress: snap.progress,
       distanceFromStart: snap.distanceFromStart
     };
-    onNoteSubmitRef.current?.(payload);
+    if (onNoteSubmitRef.current) {
+      onNoteSubmitRef.current(payload);
+    } else {
+      send("note-submit", payload);
+    }
     setIsAddNoteOpen(false);
-  }, []);
+  }, [send]);
   const handleMessage = useCallback(
     (event) => {
       let data = null;
@@ -291,6 +298,7 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
         case "line-close":
           setActiveLineId(null);
           setIsPlaying(false);
+          setLineNotes([]);
           onLineClose?.();
           break;
         case "line-progress": {
@@ -302,6 +310,14 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
           onLineProgress?.(payload);
           break;
         }
+        case "line-notes": {
+          const payload = data.payload;
+          setLineNotes(payload.notes ?? []);
+          break;
+        }
+        case "request-add-note":
+          openAddNote();
+          break;
         case "autoplay-state": {
           const payload = data.payload;
           setIsPlaying(!!payload.playing);
@@ -311,18 +327,21 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
           onMessage?.(data.type, data.payload);
       }
     },
-    [notes, send, onInit, onLineOpen, onLineClose, onLineProgress, onMessage]
+    [notes, send, onInit, onLineOpen, onLineClose, onLineProgress, onMessage, openAddNote]
   );
   const activeLine = useMemo2(
     () => lines.find((l) => l._id === activeLineId) ?? null,
     [lines, activeLineId]
   );
+  const externalNotes = useMemo2(() => notes ?? [], [notes]);
   const ctxValue = useMemo2(
     () => ({
       project,
       lines,
       activeLineId,
       activeLine,
+      lineNotes,
+      externalNotes,
       isAddNoteOpen,
       addNoteTagId,
       controls,
@@ -330,7 +349,7 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
       closeAddNote,
       submitNote
     }),
-    [project, lines, activeLineId, activeLine, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote]
+    [project, lines, activeLineId, activeLine, lineNotes, externalNotes, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote]
   );
   const progressCtx = useMemo2(
     () => ({ progress, closestTagId, targetPosition, distanceFromStart, isPlaying }),
@@ -518,6 +537,24 @@ 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";
+
+// src/lineProgress.ts
+function mergeLineTagsByProgress(controls, notes) {
+  const sortedControls = [...controls].sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
+  const lastIdx = Math.max(1, sortedControls.length - 1);
+  const merged = [];
+  for (const c of sortedControls) {
+    const idx = c.index ?? 0;
+    merged.push({ ...c, _isNote: false, progress: idx / lastIdx });
+  }
+  for (const n of notes) {
+    merged.push({ ...n, _isNote: true, progress: n.progress ?? 0 });
+  }
+  merged.sort((a, b) => a.progress - b.progress);
+  return merged;
+}
+
+// src/LineDetailSheet.tsx
 var renderBackdrop2 = (props) => /* @__PURE__ */ React6.createElement(
   BottomSheetBackdrop2,
   {
@@ -609,14 +646,20 @@ 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 } = useRetorBridge();
+  const { activeLine, lineNotes, externalNotes } = useRetorBridge();
   const { closestTagId } = useRetorProgress();
   const scrollRef = useRef3(null);
   const offsetsRef = useRef3(/* @__PURE__ */ new Map());
-  const tags = useMemo4(
-    () => (activeLine?.tags ?? []).filter((t) => t.name && t.name.trim().length > 0),
-    [activeLine]
-  );
+  const tags = useMemo4(() => {
+    if (!activeLine) return [];
+    const controls = (activeLine.tags ?? []).filter(
+      (t) => t.name && t.name.trim().length > 0
+    );
+    const allNotes = [...lineNotes, ...externalNotes].filter(
+      (n) => n.name && n.name.trim().length > 0
+    );
+    return mergeLineTagsByProgress(controls, allNotes);
+  }, [activeLine, lineNotes, externalNotes]);
   useEffect3(() => {
     offsetsRef.current = /* @__PURE__ */ new Map();
   }, [activeLine?._id]);

package/package.json

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