@retor/react-native 0.4.4 → 0.4.5

package/dist/index.d.mts

@@ -23,6 +23,8 @@ interface RetorTag {
     avatarUrl?: string;
     /** Display name of the note's author. Used for the initial-letter fallback when `avatarUrl` is absent. */
     authorName?: string;
+    /** ID of the user who created this note. Compared against `Viewer.userId` to show the delete button. */
+    userId?: string;
 }
 interface RetorLine {
     _id: string;
@@ -103,12 +105,16 @@ interface RetorBridgeContextValue {
     lineNotes: RetorTag[];
     /** Notes injected by the consumer via the <Notes> sentinel. */
     externalNotes: RetorTag[];
+    /** The current user's ID — notes with a matching `userId` show a delete button. */
+    userId: string | null;
     isAddNoteOpen: boolean;
     addNoteTagId: string | null;
     controls: ViewerHandle;
     openAddNote: (tagId?: string) => void;
     closeAddNote: () => void;
     submitNote: (text: string, isPrivate?: boolean) => void;
+    /** Optimistically remove a note and fire the consumer's onNoteDelete callback. */
+    deleteNote: (noteId: string) => void;
 }
 declare function useRetorBridge(): RetorBridgeContextValue;
 /** Returns the array of all lines in the current project. */
@@ -187,8 +193,12 @@ interface ViewerProps {
     id?: string;
     /** Base URL where Retor is hosted. Defaults to https://retor.app */
     baseUrl?: string;
+    /** The current user's ID. When set, notes with a matching `userId` field show a delete button. */
+    userId?: string;
     /** Called when a note is submitted via `<AddNoteSheet>`. Receives the text + position. */
     onNoteSubmit?: (note: NoteSubmitPayload) => void;
+    /** Called when the user deletes a note. The note is optimistically removed from the list. */
+    onNoteDelete?: (noteId: string) => void;
     onInit?: (data: InitPayload) => void;
     onLineOpen?: (data: {
         lineId: string;

package/dist/index.d.ts

@@ -23,6 +23,8 @@ interface RetorTag {
     avatarUrl?: string;
     /** Display name of the note's author. Used for the initial-letter fallback when `avatarUrl` is absent. */
     authorName?: string;
+    /** ID of the user who created this note. Compared against `Viewer.userId` to show the delete button. */
+    userId?: string;
 }
 interface RetorLine {
     _id: string;
@@ -103,12 +105,16 @@ interface RetorBridgeContextValue {
     lineNotes: RetorTag[];
     /** Notes injected by the consumer via the <Notes> sentinel. */
     externalNotes: RetorTag[];
+    /** The current user's ID — notes with a matching `userId` show a delete button. */
+    userId: string | null;
     isAddNoteOpen: boolean;
     addNoteTagId: string | null;
     controls: ViewerHandle;
     openAddNote: (tagId?: string) => void;
     closeAddNote: () => void;
     submitNote: (text: string, isPrivate?: boolean) => void;
+    /** Optimistically remove a note and fire the consumer's onNoteDelete callback. */
+    deleteNote: (noteId: string) => void;
 }
 declare function useRetorBridge(): RetorBridgeContextValue;
 /** Returns the array of all lines in the current project. */
@@ -187,8 +193,12 @@ interface ViewerProps {
     id?: string;
     /** Base URL where Retor is hosted. Defaults to https://retor.app */
     baseUrl?: string;
+    /** The current user's ID. When set, notes with a matching `userId` field show a delete button. */
+    userId?: string;
     /** Called when a note is submitted via `<AddNoteSheet>`. Receives the text + position. */
     onNoteSubmit?: (note: NoteSubmitPayload) => void;
+    /** Called when the user deletes a note. The note is optimistically removed from the list. */
+    onNoteDelete?: (noteId: string) => void;
     onInit?: (data: InitPayload) => void;
     onLineOpen?: (data: {
         lineId: string;

package/dist/index.js

@@ -78,12 +78,14 @@ var fallback = {
   activeLine: null,
   lineNotes: [],
   externalNotes: [],
+  userId: null,
   isAddNoteOpen: false,
   addNoteTagId: null,
   controls: noopHandle,
   openAddNote: noop,
   closeAddNote: noop,
-  submitNote: noop
+  submitNote: noop,
+  deleteNote: noop
 };
 function useRetorBridge() {
   return (0, import_react.useContext)(RetorBridgeContext) ?? fallback;
@@ -205,7 +207,7 @@ function extractNotes(children) {
   });
   return notes;
 }
-var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "default", baseUrl = "https://retor.app", onNoteSubmit, onInit, onLineOpen, onLineClose, onLineProgress, onMessage, style, children }, ref) {
+var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "default", baseUrl = "https://retor.app", userId = null, onNoteSubmit, onNoteDelete, onInit, onLineOpen, onLineClose, onLineProgress, onMessage, style, children }, ref) {
   const webviewRef = (0, import_react2.useRef)(null);
   const notes = extractNotes(children);
   const readyRef = (0, import_react2.useRef)(false);
@@ -260,6 +262,7 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
   const addNoteTagIdRef = (0, import_react2.useRef)(addNoteTagId);
   const activeLineIdRef = (0, import_react2.useRef)(activeLineId);
   const onNoteSubmitRef = (0, import_react2.useRef)(onNoteSubmit);
+  const onNoteDeleteRef = (0, import_react2.useRef)(onNoteDelete);
   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);
@@ -276,6 +279,9 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
   (0, import_react2.useEffect)(() => {
     onNoteSubmitRef.current = onNoteSubmit;
   }, [onNoteSubmit]);
+  (0, import_react2.useEffect)(() => {
+    onNoteDeleteRef.current = onNoteDelete;
+  }, [onNoteDelete]);
   (0, import_react2.useEffect)(() => {
     progressRef.current = progress;
   }, [progress]);
@@ -317,6 +323,10 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
     }
     setIsAddNoteOpen(false);
   }, [send]);
+  const deleteNote = (0, import_react2.useCallback)((noteId) => {
+    setLineNotes((prev) => prev.filter((n) => n._id !== noteId));
+    onNoteDeleteRef.current?.(noteId);
+  }, []);
   const handleMessage = (0, import_react2.useCallback)(
     (event) => {
       let data = null;
@@ -391,14 +401,16 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
       activeLine,
       lineNotes,
       externalNotes,
+      userId,
       isAddNoteOpen,
       addNoteTagId,
       controls,
       openAddNote,
       closeAddNote,
-      submitNote
+      submitNote,
+      deleteNote
     }),
-    [project, lines, activeLineId, activeLine, lineNotes, externalNotes, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote]
+    [project, lines, activeLineId, activeLine, lineNotes, externalNotes, userId, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote, deleteNote]
   );
   const progressCtx = (0, import_react2.useMemo)(
     () => ({ progress, closestTagId, targetPosition, distanceFromStart, isPlaying }),
@@ -727,14 +739,22 @@ function LineTagList({ children, listHeader }) {
       contentContainerStyle: styles3.list
     },
     listHeader,
-    tags.map((tag) => /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { key: tag._id, onLayout: (e) => handleItemLayout(tag._id, e) }, children(tag, tag._id === closestTagId)))
+    tags.map((tag, i) => {
+      const isNote = !!tag._isNote;
+      const prevIsNote = i > 0 && !!tags[i - 1]._isNote;
+      const showSep = isNote && !prevIsNote && i > 0 || !isNote && i > 0 && prevIsNote;
+      return /* @__PURE__ */ import_react6.default.createElement(import_react6.Fragment, { key: tag._id }, showSep && /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: styles3.separator }), /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { onLayout: (e) => handleItemLayout(tag._id, e) }, children(tag, tag._id === closestTagId)));
+    })
   );
 }
 function DefaultLineTagList({ listHeader }) {
   return /* @__PURE__ */ import_react6.default.createElement(LineTagList, { listHeader }, (tag, isActive) => /* @__PURE__ */ import_react6.default.createElement(DefaultTagItem, { tag, isActive }));
 }
 function DefaultTagItem({ tag, isActive }) {
-  const { controls, openAddNote } = useRetorBridge();
+  const { controls, openAddNote, userId, deleteNote } = useRetorBridge();
+  const isNote = !!tag._isNote;
+  const tagUserId = tag.userId;
+  const isOwn = !!userId && !!tagUserId && tagUserId === userId;
   const initial = tag.authorName?.trim().charAt(0).toUpperCase();
   const handlePress = () => {
     if (typeof tag.progress === "number") controls.scrollToProgress(tag.progress);
@@ -747,9 +767,17 @@ function DefaultTagItem({ tag, isActive }) {
       style: [styles3.tagItem, isActive && styles3.tagItemActive]
     },
     tag.avatarUrl ? /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Image, { source: { uri: tag.avatarUrl }, style: styles3.tagAvatar }) : initial ? /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: styles3.tagInitial }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles3.tagInitialText }, initial)) : null,
-    /* @__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.tagText, isActive && styles3.tagTextActive], numberOfLines: 1 }, tag.name), isActive && tag.description && /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles3.tagDescription, numberOfLines: 2 }, tag.description)),
+    /* @__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.tagText, isActive && styles3.tagTextActive], numberOfLines: isNote ? 3 : 1 }, tag.name), isActive && tag.description && /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles3.tagDescription, numberOfLines: 2 }, tag.description)),
     tag.subtitle && /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles3.tagSubtitle, numberOfLines: 1 }, tag.subtitle),
-    isActive && /* @__PURE__ */ import_react6.default.createElement(
+    isNote && isOwn && /* @__PURE__ */ import_react6.default.createElement(
+      import_react_native5.Pressable,
+      {
+        onPress: () => deleteNote(tag._id),
+        style: styles3.deleteBtn
+      },
+      /* @__PURE__ */ import_react6.default.createElement(import_lucide_react_native2.Trash2, { size: 12, color: "rgba(255,255,255,0.4)" })
+    ),
+    isActive && !isNote && /* @__PURE__ */ import_react6.default.createElement(
       import_react_native5.Pressable,
       {
         onPress: (e) => {
@@ -806,10 +834,18 @@ var styles3 = import_react_native5.StyleSheet.create({
     justifyContent: "center"
   },
   tagInitialText: { color: "white", fontSize: 11, fontWeight: "700" },
+  separator: { height: 1, backgroundColor: "rgba(255,255,255,0.1)", marginHorizontal: 20, marginVertical: 4 },
   tagText: { color: "rgba(255,255,255,0.6)", fontSize: 13 },
   tagTextActive: { color: "white", fontWeight: "600" },
   tagDescription: { color: "rgba(255,255,255,0.4)", fontSize: 11, marginTop: 2, lineHeight: 14 },
   tagSubtitle: { color: "rgba(255,255,255,0.4)", fontSize: 10 },
+  deleteBtn: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   plusBtn: {
     width: 24,
     height: 24,

package/dist/index.mjs

@@ -25,12 +25,14 @@ var fallback = {
   activeLine: null,
   lineNotes: [],
   externalNotes: [],
+  userId: null,
   isAddNoteOpen: false,
   addNoteTagId: null,
   controls: noopHandle,
   openAddNote: noop,
   closeAddNote: noop,
-  submitNote: noop
+  submitNote: noop,
+  deleteNote: noop
 };
 function useRetorBridge() {
   return useContext(RetorBridgeContext) ?? fallback;
@@ -161,7 +163,7 @@ function extractNotes(children) {
   });
   return notes;
 }
-var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl = "https://retor.app", onNoteSubmit, onInit, onLineOpen, onLineClose, onLineProgress, onMessage, style, children }, ref) {
+var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl = "https://retor.app", userId = null, onNoteSubmit, onNoteDelete, onInit, onLineOpen, onLineClose, onLineProgress, onMessage, style, children }, ref) {
   const webviewRef = useRef(null);
   const notes = extractNotes(children);
   const readyRef = useRef(false);
@@ -216,6 +218,7 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
   const addNoteTagIdRef = useRef(addNoteTagId);
   const activeLineIdRef = useRef(activeLineId);
   const onNoteSubmitRef = useRef(onNoteSubmit);
+  const onNoteDeleteRef = useRef(onNoteDelete);
   const noteSnapshotRef = useRef({ progress: 0, targetPosition: null, distanceFromStart: null });
   const progressRef = useRef(progress);
   const targetPositionRef = useRef(targetPosition);
@@ -232,6 +235,9 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
   useEffect(() => {
     onNoteSubmitRef.current = onNoteSubmit;
   }, [onNoteSubmit]);
+  useEffect(() => {
+    onNoteDeleteRef.current = onNoteDelete;
+  }, [onNoteDelete]);
   useEffect(() => {
     progressRef.current = progress;
   }, [progress]);
@@ -273,6 +279,10 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
     }
     setIsAddNoteOpen(false);
   }, [send]);
+  const deleteNote = useCallback((noteId) => {
+    setLineNotes((prev) => prev.filter((n) => n._id !== noteId));
+    onNoteDeleteRef.current?.(noteId);
+  }, []);
   const handleMessage = useCallback(
     (event) => {
       let data = null;
@@ -347,14 +357,16 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
       activeLine,
       lineNotes,
       externalNotes,
+      userId,
       isAddNoteOpen,
       addNoteTagId,
       controls,
       openAddNote,
       closeAddNote,
-      submitNote
+      submitNote,
+      deleteNote
     }),
-    [project, lines, activeLineId, activeLine, lineNotes, externalNotes, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote]
+    [project, lines, activeLineId, activeLine, lineNotes, externalNotes, userId, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote, deleteNote]
   );
   const progressCtx = useMemo2(
     () => ({ progress, closestTagId, targetPosition, distanceFromStart, isPlaying }),
@@ -532,7 +544,7 @@ var styles2 = StyleSheet4.create({
 });
 
 // src/LineDetailSheet.tsx
-import React6, { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
+import React6, { Fragment, useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
 import { Image, Pressable as Pressable2, StyleSheet as StyleSheet5, Text as Text2, View as View5 } from "react-native";
 import {
   BottomSheetBackdrop as BottomSheetBackdrop2,
@@ -541,7 +553,7 @@ import {
   BottomSheetScrollView
 } 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";
+import { ArrowDown as ArrowDown2, ArrowUp as ArrowUp2, Pause, Play, Plus, Trash2 } from "lucide-react-native";
 
 // src/lineProgress.ts
 function mergeLineTagsByProgress(controls, notes) {
@@ -688,14 +700,22 @@ function LineTagList({ children, listHeader }) {
       contentContainerStyle: styles3.list
     },
     listHeader,
-    tags.map((tag) => /* @__PURE__ */ React6.createElement(View5, { key: tag._id, onLayout: (e) => handleItemLayout(tag._id, e) }, children(tag, tag._id === closestTagId)))
+    tags.map((tag, i) => {
+      const isNote = !!tag._isNote;
+      const prevIsNote = i > 0 && !!tags[i - 1]._isNote;
+      const showSep = isNote && !prevIsNote && i > 0 || !isNote && i > 0 && prevIsNote;
+      return /* @__PURE__ */ React6.createElement(Fragment, { key: tag._id }, showSep && /* @__PURE__ */ React6.createElement(View5, { style: styles3.separator }), /* @__PURE__ */ React6.createElement(View5, { onLayout: (e) => handleItemLayout(tag._id, e) }, children(tag, tag._id === closestTagId)));
+    })
   );
 }
 function DefaultLineTagList({ listHeader }) {
   return /* @__PURE__ */ React6.createElement(LineTagList, { listHeader }, (tag, isActive) => /* @__PURE__ */ React6.createElement(DefaultTagItem, { tag, isActive }));
 }
 function DefaultTagItem({ tag, isActive }) {
-  const { controls, openAddNote } = useRetorBridge();
+  const { controls, openAddNote, userId, deleteNote } = useRetorBridge();
+  const isNote = !!tag._isNote;
+  const tagUserId = tag.userId;
+  const isOwn = !!userId && !!tagUserId && tagUserId === userId;
   const initial = tag.authorName?.trim().charAt(0).toUpperCase();
   const handlePress = () => {
     if (typeof tag.progress === "number") controls.scrollToProgress(tag.progress);
@@ -708,9 +728,17 @@ function DefaultTagItem({ tag, isActive }) {
       style: [styles3.tagItem, isActive && styles3.tagItemActive]
     },
     tag.avatarUrl ? /* @__PURE__ */ React6.createElement(Image, { source: { uri: tag.avatarUrl }, style: styles3.tagAvatar }) : initial ? /* @__PURE__ */ React6.createElement(View5, { style: styles3.tagInitial }, /* @__PURE__ */ React6.createElement(Text2, { style: styles3.tagInitialText }, initial)) : null,
-    /* @__PURE__ */ React6.createElement(View5, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement(Text2, { style: [styles3.tagText, isActive && styles3.tagTextActive], numberOfLines: 1 }, tag.name), isActive && tag.description && /* @__PURE__ */ React6.createElement(Text2, { style: styles3.tagDescription, numberOfLines: 2 }, tag.description)),
+    /* @__PURE__ */ React6.createElement(View5, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement(Text2, { style: [styles3.tagText, isActive && styles3.tagTextActive], numberOfLines: isNote ? 3 : 1 }, tag.name), isActive && tag.description && /* @__PURE__ */ React6.createElement(Text2, { style: styles3.tagDescription, numberOfLines: 2 }, tag.description)),
     tag.subtitle && /* @__PURE__ */ React6.createElement(Text2, { style: styles3.tagSubtitle, numberOfLines: 1 }, tag.subtitle),
-    isActive && /* @__PURE__ */ React6.createElement(
+    isNote && isOwn && /* @__PURE__ */ React6.createElement(
+      Pressable2,
+      {
+        onPress: () => deleteNote(tag._id),
+        style: styles3.deleteBtn
+      },
+      /* @__PURE__ */ React6.createElement(Trash2, { size: 12, color: "rgba(255,255,255,0.4)" })
+    ),
+    isActive && !isNote && /* @__PURE__ */ React6.createElement(
       Pressable2,
       {
         onPress: (e) => {
@@ -767,10 +795,18 @@ var styles3 = StyleSheet5.create({
     justifyContent: "center"
   },
   tagInitialText: { color: "white", fontSize: 11, fontWeight: "700" },
+  separator: { height: 1, backgroundColor: "rgba(255,255,255,0.1)", marginHorizontal: 20, marginVertical: 4 },
   tagText: { color: "rgba(255,255,255,0.6)", fontSize: 13 },
   tagTextActive: { color: "white", fontWeight: "600" },
   tagDescription: { color: "rgba(255,255,255,0.4)", fontSize: 11, marginTop: 2, lineHeight: 14 },
   tagSubtitle: { color: "rgba(255,255,255,0.4)", fontSize: 10 },
+  deleteBtn: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   plusBtn: {
     width: 24,
     height: 24,

package/package.json

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