@retor/react-native 0.4.4 → 0.4.6

package/README.md

@@ -111,24 +111,43 @@ function MyLineCard({ line }: { line: RetorLine }) {
 
 ## Notes
 
-`<AddNoteSheet>` triggers when you call `useAddNote().open(tagId?)` — for example from a "+" button on the active tag in your `LineTagList`. It collects text + private/public, then calls `onNoteSubmit` on the parent `<Viewer>`. **Persistence is your responsibility** — store the note however you like, then re-pass updated notes back to Retor via `<Notes>`.
+`<AddNoteSheet>` triggers when you call `useAddNote().open(tagId?)`. It collects text + private/public, then either:
+- calls `onNoteSubmit` on the parent `<Viewer>` (if set) — **persistence is your responsibility**
+- or falls back to persisting via Retor's own backend (Convex) when no `onNoteSubmit` is provided
+
+Re-pass saved notes back to the 3D scene via `<Notes>`.
+
+### Note fields for proper rendering
+
+When passing notes via `<Notes>`, each note should include:
+
+| Field | Required | Purpose |
+|-------|----------|---------|
+| `_id` | yes | Unique identifier |
+| `name` | yes | The note text (displayed in the tag list and 3D scene) |
+| `position` | yes | `{ x, y, z }` — where the note sits on the line |
+| `objectId` | yes | Set to the `lineId` so the note associates with the correct line |
+| `progress` | yes | `0..1` position along the line (from the submit payload) — used for sort order and scroll-to |
+| `avatarUrl` | recommended | Profile image URL — renders as a circular avatar in the tag pill and list item |
+| `authorName` | recommended | Display name — used as initial-letter fallback when no `avatarUrl` |
+| `tagType` | recommended | Set to `"icon"` for the standard note pill appearance |
+| `userId` | for deletion | The note author's user ID — compared against `Viewer.userId` to show the delete button |
+
+### Creating + deleting notes
 
 ```tsx
 import { useState } from "react";
-import { Viewer, Hud, ProjectSheet, LineDetailSheet, AddNoteSheet, Notes, useAddNote, type RetorTag } from "@retor/react-native";
-
-function AddButton() {
-  const { open } = useAddNote();
-  return <Pressable onPress={() => open()}><Text>+</Text></Pressable>;
-}
+import { Viewer, Hud, ProjectSheet, LineDetailSheet, AddNoteSheet, Notes, type RetorTag } from "@retor/react-native";
 
 export default function Scene() {
   const [notes, setNotes] = useState<RetorTag[]>([]);
+  const currentUserId = "user_abc"; // your auth system's user ID
 
   return (
     <Viewer
       projectId="abc123"
-      onNoteSubmit={({ text, isPrivate, tagId, lineId, position }) => {
+      userId={currentUserId}
+      onNoteSubmit={({ text, isPrivate, lineId, position, progress }) => {
         if (!position) return;
         setNotes((prev) => [
           ...prev,
@@ -136,24 +155,24 @@ export default function Scene() {
             _id: `note-${Date.now()}`,
             name: text,
             position,
+            progress,
             objectId: lineId ?? undefined,
+            tagType: "icon",
+            avatarUrl: "https://example.com/avatar.jpg",
+            authorName: "Jane",
+            userId: currentUserId,
           },
         ]);
       }}
+      onNoteDelete={(noteId) => {
+        setNotes((prev) => prev.filter((n) => n._id !== noteId));
+        // also delete from your backend
+      }}
     >
       <Notes notes={notes} />
       <Hud>
         <ProjectSheet />
-        <LineDetailSheet>
-          <LineTagList>
-            {(tag, isActive) => (
-              <View style={{ flexDirection: "row", padding: 12 }}>
-                <Text style={{ flex: 1, color: isActive ? "white" : "gray" }}>{tag.name}</Text>
-                {isActive && <AddButton />}
-              </View>
-            )}
-          </LineTagList>
-        </LineDetailSheet>
+        <LineDetailSheet />
         <AddNoteSheet />
       </Hud>
     </Viewer>
@@ -161,6 +180,12 @@ export default function Scene() {
 }
 ```
 
+When `onNoteSubmit` is **not** provided, the SDK sends the note to Retor's backend automatically (using the signed-in Clerk session inside the WebView). No `<Notes>` re-injection needed in that case.
+
+When a user deletes a note, the SDK:
+1. Optimistically removes it from the local tag list
+2. Fires `onNoteDelete(noteId)` so you can delete from your backend
+
 ## Hooks
 
 All hooks read from the bridge context provided by the parent `<Viewer>`.
@@ -173,7 +198,7 @@ All hooks read from the bridge context provided by the parent `<Viewer>`.
 | `useLineProgress()` | `{ progress, closestTagId }` |
 | `useAutoplay()` | `{ isPlaying, toggle, play, pause }` |
 | `useAddNote()` | `{ isOpen, tagId, open, close, submit }` |
-| `useViewer()` | Imperative controls (`openLine`, `exitLine`, `scrollToTag`, ...) |
+| `useViewer()` | Imperative controls (`openLine`, `exitLine`, `scrollToTag`, `scrollToProgress`, ...) |
 
 ## Imperative API
 

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;
@@ -34,6 +36,8 @@ interface RetorLine {
     scrollType?: "track" | "observe";
     closed?: boolean;
     notesSupported?: boolean;
+    /** User-defined key/value fields set in the line editor. */
+    metadata?: Record<string, string | number | boolean>;
     tags: RetorTag[];
 }
 interface RetorProject {
@@ -103,12 +107,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 +195,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;
@@ -34,6 +36,8 @@ interface RetorLine {
     scrollType?: "track" | "observe";
     closed?: boolean;
     notesSupported?: boolean;
+    /** User-defined key/value fields set in the line editor. */
+    metadata?: Record<string, string | number | boolean>;
     tags: RetorTag[];
 }
 interface RetorProject {
@@ -103,12 +107,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 +195,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 }),
@@ -655,7 +667,7 @@ function LineDetailSheet({ snapPoints = ["35%", "75%"], topInset, renderHeader,
       backgroundComponent: BlurBackground,
       topInset: effectiveTopInset
     },
-    activeLine && (children ?? /* @__PURE__ */ import_react6.default.createElement(DefaultLineTagList, { listHeader: header }))
+    activeLine && (children ? /* @__PURE__ */ import_react6.default.createElement(import_bottom_sheet3.BottomSheetScrollView, { contentContainerStyle: styles3.customContent }, children) : /* @__PURE__ */ import_react6.default.createElement(DefaultLineTagList, { listHeader: header }))
   );
 }
 function DefaultHeader({
@@ -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) => {
@@ -764,6 +792,7 @@ function DefaultTagItem({ tag, isActive }) {
 }
 var styles3 = import_react_native5.StyleSheet.create({
   handle: { backgroundColor: "rgba(255,255,255,0.3)" },
+  customContent: { paddingBottom: 120 },
   header: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -806,10 +835,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) {
@@ -616,7 +628,7 @@ function LineDetailSheet({ snapPoints = ["35%", "75%"], topInset, renderHeader,
       backgroundComponent: BlurBackground,
       topInset: effectiveTopInset
     },
-    activeLine && (children ?? /* @__PURE__ */ React6.createElement(DefaultLineTagList, { listHeader: header }))
+    activeLine && (children ? /* @__PURE__ */ React6.createElement(BottomSheetScrollView, { contentContainerStyle: styles3.customContent }, children) : /* @__PURE__ */ React6.createElement(DefaultLineTagList, { listHeader: header }))
   );
 }
 function DefaultHeader({
@@ -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) => {
@@ -725,6 +753,7 @@ function DefaultTagItem({ tag, isActive }) {
 }
 var styles3 = StyleSheet5.create({
   handle: { backgroundColor: "rgba(255,255,255,0.3)" },
+  customContent: { paddingBottom: 120 },
   header: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -767,10 +796,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.6",
   "description": "React Native SDK for embedding Retor 3D experiences",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",