@retor/react-native 0.4.2 → 0.4.4

package/dist/index.d.mts

@@ -21,6 +21,8 @@ interface RetorTag {
     progress?: number;
     /** Profile image URL. For notes rendered with `icon` tag type, replaces the icon with a circular avatar. */
     avatarUrl?: string;
+    /** Display name of the note's author. Used for the initial-letter fallback when `avatarUrl` is absent. */
+    authorName?: string;
 }
 interface RetorLine {
     _id: string;
@@ -61,6 +63,8 @@ interface ViewerHandle {
     openLine: (lineId: string) => void;
     exitLine: () => void;
     scrollToTag: (tagId: string) => void;
+    /** Scroll the active line's camera to a 0..1 position. Use for notes (which aren't indexed by tagId on the server). */
+    scrollToProgress: (t: number) => void;
     toggleAutoplay: () => void;
     setAutoplay: (playing: boolean) => void;
 }

package/dist/index.d.ts

@@ -21,6 +21,8 @@ interface RetorTag {
     progress?: number;
     /** Profile image URL. For notes rendered with `icon` tag type, replaces the icon with a circular avatar. */
     avatarUrl?: string;
+    /** Display name of the note's author. Used for the initial-letter fallback when `avatarUrl` is absent. */
+    authorName?: string;
 }
 interface RetorLine {
     _id: string;
@@ -61,6 +63,8 @@ interface ViewerHandle {
     openLine: (lineId: string) => void;
     exitLine: () => void;
     scrollToTag: (tagId: string) => void;
+    /** Scroll the active line's camera to a 0..1 position. Use for notes (which aren't indexed by tagId on the server). */
+    scrollToProgress: (t: number) => void;
     toggleAutoplay: () => void;
     setAutoplay: (playing: boolean) => void;
 }

package/dist/index.js

@@ -67,6 +67,7 @@ var noopHandle = {
   openLine: noop,
   exitLine: noop,
   scrollToTag: noop,
+  scrollToProgress: noop,
   toggleAutoplay: noop,
   setAutoplay: noop
 };
@@ -176,6 +177,9 @@ function useViewer(target = "default") {
       scrollToTag: (tagId) => {
         resolve()?.scrollToTag(tagId);
       },
+      scrollToProgress: (t) => {
+        resolve()?.scrollToProgress(t);
+      },
       toggleAutoplay: () => {
         resolve()?.toggleAutoplay();
       },
@@ -236,6 +240,7 @@ var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "d
       openLine: (lineId) => send("open-line", { lineId }),
       exitLine: () => send("exit-line"),
       scrollToTag: (tagId) => send("scroll-to-tag", { tagId }),
+      scrollToProgress: (t) => send("scroll-to-progress", { t }),
       // Bridge owns autoplay state — it'll emit `autoplay-state` back, which
       // we use to update isPlaying. No optimistic local update.
       toggleAutoplay: () => send("toggle-autoplay"),
@@ -579,12 +584,9 @@ 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 c of controls) {
+    merged.push({ ...c, _isNote: false, progress: c.progress ?? 0 });
   }
   for (const n of notes) {
     merged.push({ ...n, _isNote: true, progress: n.progress ?? 0 });
@@ -733,12 +735,18 @@ function DefaultLineTagList({ listHeader }) {
 }
 function DefaultTagItem({ tag, isActive }) {
   const { controls, openAddNote } = useRetorBridge();
+  const initial = tag.authorName?.trim().charAt(0).toUpperCase();
+  const handlePress = () => {
+    if (typeof tag.progress === "number") controls.scrollToProgress(tag.progress);
+    else controls.scrollToTag(tag._id);
+  };
   return /* @__PURE__ */ import_react6.default.createElement(
     import_react_native5.Pressable,
     {
-      onPress: () => controls.scrollToTag(tag._id),
+      onPress: handlePress,
       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)),
     tag.subtitle && /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles3.tagSubtitle, numberOfLines: 1 }, tag.subtitle),
     isActive && /* @__PURE__ */ import_react6.default.createElement(
@@ -788,6 +796,16 @@ var styles3 = import_react_native5.StyleSheet.create({
     gap: 8
   },
   tagItemActive: { backgroundColor: "rgba(255,255,255,0.1)" },
+  tagAvatar: { width: 22, height: 22, borderRadius: 11 },
+  tagInitial: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: "rgba(255,255,255,0.15)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tagInitialText: { color: "white", fontSize: 11, fontWeight: "700" },
   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 },

package/dist/index.mjs

@@ -14,6 +14,7 @@ var noopHandle = {
   openLine: noop,
   exitLine: noop,
   scrollToTag: noop,
+  scrollToProgress: noop,
   toggleAutoplay: noop,
   setAutoplay: noop
 };
@@ -132,6 +133,9 @@ function useViewer(target = "default") {
       scrollToTag: (tagId) => {
         resolve()?.scrollToTag(tagId);
       },
+      scrollToProgress: (t) => {
+        resolve()?.scrollToProgress(t);
+      },
       toggleAutoplay: () => {
         resolve()?.toggleAutoplay();
       },
@@ -192,6 +196,7 @@ var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl =
       openLine: (lineId) => send("open-line", { lineId }),
       exitLine: () => send("exit-line"),
       scrollToTag: (tagId) => send("scroll-to-tag", { tagId }),
+      scrollToProgress: (t) => send("scroll-to-progress", { t }),
       // Bridge owns autoplay state — it'll emit `autoplay-state` back, which
       // we use to update isPlaying. No optimistic local update.
       toggleAutoplay: () => send("toggle-autoplay"),
@@ -528,7 +533,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 { Pressable as Pressable2, StyleSheet as StyleSheet5, Text as Text2, View as View5 } from "react-native";
+import { Image, Pressable as Pressable2, StyleSheet as StyleSheet5, Text as Text2, View as View5 } from "react-native";
 import {
   BottomSheetBackdrop as BottomSheetBackdrop2,
   BottomSheetFooter,
@@ -540,12 +545,9 @@ import { ArrowDown as ArrowDown2, ArrowUp as ArrowUp2, Pause, Play, Plus } from
 
 // 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 c of controls) {
+    merged.push({ ...c, _isNote: false, progress: c.progress ?? 0 });
   }
   for (const n of notes) {
     merged.push({ ...n, _isNote: true, progress: n.progress ?? 0 });
@@ -694,12 +696,18 @@ function DefaultLineTagList({ listHeader }) {
 }
 function DefaultTagItem({ tag, isActive }) {
   const { controls, openAddNote } = useRetorBridge();
+  const initial = tag.authorName?.trim().charAt(0).toUpperCase();
+  const handlePress = () => {
+    if (typeof tag.progress === "number") controls.scrollToProgress(tag.progress);
+    else controls.scrollToTag(tag._id);
+  };
   return /* @__PURE__ */ React6.createElement(
     Pressable2,
     {
-      onPress: () => controls.scrollToTag(tag._id),
+      onPress: handlePress,
       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)),
     tag.subtitle && /* @__PURE__ */ React6.createElement(Text2, { style: styles3.tagSubtitle, numberOfLines: 1 }, tag.subtitle),
     isActive && /* @__PURE__ */ React6.createElement(
@@ -749,6 +757,16 @@ var styles3 = StyleSheet5.create({
     gap: 8
   },
   tagItemActive: { backgroundColor: "rgba(255,255,255,0.1)" },
+  tagAvatar: { width: 22, height: 22, borderRadius: 11 },
+  tagInitial: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: "rgba(255,255,255,0.15)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tagInitialText: { color: "white", fontSize: 11, fontWeight: "700" },
   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 },

package/package.json

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