@retor/react-native 0.2.0 → 0.3.1

package/dist/index.mjs

@@ -313,28 +313,52 @@ function Hud({ children }) {
 }
 
 // src/ProjectSheet.tsx
-import React4, { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
-import { Pressable, ScrollView, StyleSheet as StyleSheet3, Text, View as View3 } from "react-native";
+import React5, { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
+import { Pressable, ScrollView, StyleSheet as StyleSheet4, Text, View as View4 } from "react-native";
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetView } from "@gorhom/bottom-sheet";
-function ProjectSheet({ snapPoints = ["20%", "60%"], renderHeader, children }) {
+import { ArrowDown, ArrowUp } from "lucide-react-native";
+
+// src/BlurBackground.tsx
+import React4 from "react";
+import { StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { BlurView } from "expo-blur";
+function BlurBackground({ style }) {
+  return /* @__PURE__ */ React4.createElement(View3, { style: [style, StyleSheet3.absoluteFill, { overflow: "hidden", borderTopLeftRadius: 24, borderTopRightRadius: 24 }] }, /* @__PURE__ */ React4.createElement(BlurView, { intensity: 60, tint: "dark", style: StyleSheet3.absoluteFill }), /* @__PURE__ */ React4.createElement(View3, { style: [StyleSheet3.absoluteFill, { backgroundColor: "rgba(20,20,20,0.55)" }] }));
+}
+
+// src/ProjectSheet.tsx
+function ProjectSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
   const { project, activeLineId, isAddNoteOpen } = useRetorBridge();
   const sheetRef = useRef2(null);
   const snapPointsArr = useMemo3(() => snapPoints, [snapPoints]);
+  const [minimized, setMinimized] = useState2(false);
   useEffect2(() => {
     if (activeLineId || isAddNoteOpen) {
       sheetRef.current?.dismiss();
     } else {
       sheetRef.current?.present();
+      setMinimized(false);
     }
   }, [activeLineId, isAddNoteOpen]);
-  return /* @__PURE__ */ React4.createElement(
+  const handleSheetChange = (index) => {
+    setMinimized(index === 0);
+  };
+  const toggleMinimize = () => {
+    if (minimized) {
+      sheetRef.current?.snapToIndex(snapPointsArr.length - 1);
+    } else {
+      sheetRef.current?.snapToIndex(0);
+    }
+  };
+  return /* @__PURE__ */ React5.createElement(
     BottomSheetModal,
     {
       ref: sheetRef,
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
-      backdropComponent: (props) => /* @__PURE__ */ React4.createElement(
+      onChange: handleSheetChange,
+      backdropComponent: (props) => /* @__PURE__ */ React5.createElement(
         BottomSheetBackdrop,
         {
           ...props,
@@ -345,48 +369,69 @@ function ProjectSheet({ snapPoints = ["20%", "60%"], renderHeader, children }) {
         }
       ),
       handleIndicatorStyle: styles2.handle,
-      backgroundStyle: styles2.background
+      backgroundComponent: BlurBackground
     },
-    /* @__PURE__ */ React4.createElement(BottomSheetView, { style: styles2.content }, renderHeader ? renderHeader({ name: project?.name, description: project?.description }) : /* @__PURE__ */ React4.createElement(View3, { style: styles2.header }, project?.name && /* @__PURE__ */ React4.createElement(Text, { style: styles2.title }, project.name), project?.description && /* @__PURE__ */ React4.createElement(Text, { style: styles2.subtitle, numberOfLines: 4 }, project.description)), children ?? /* @__PURE__ */ React4.createElement(DefaultLinesCarousel, null))
+    /* @__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))
   );
 }
 function DefaultLinesCarousel() {
-  return /* @__PURE__ */ React4.createElement(LinesCarousel, null, (line) => /* @__PURE__ */ React4.createElement(DefaultLineCard, { line }));
+  return /* @__PURE__ */ React5.createElement(LinesCarousel, null, (line) => /* @__PURE__ */ React5.createElement(DefaultLineCard, { line }));
 }
 function LinesCarousel({ children, gap = 12, paddingHorizontal = 16 }) {
   const { lines } = useRetorBridge();
   if (lines.length === 0) return null;
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(View4, { style: styles2.carouselWrap }, /* @__PURE__ */ React5.createElement(Text, { style: styles2.carouselLabel }, "Routes"), /* @__PURE__ */ React5.createElement(
     ScrollView,
     {
       horizontal: true,
       showsHorizontalScrollIndicator: false,
-      contentContainerStyle: { paddingHorizontal, gap },
-      style: styles2.carousel
+      contentContainerStyle: { paddingHorizontal, gap }
     },
-    lines.map((line, idx) => /* @__PURE__ */ React4.createElement(React4.Fragment, { key: line._id }, children(line, idx)))
-  );
+    lines.map((line, idx) => /* @__PURE__ */ React5.createElement(React5.Fragment, { key: line._id }, children(line, idx)))
+  ));
 }
 function DefaultLineCard({ line }) {
   const { controls } = useRetorBridge();
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     Pressable,
     {
       onPress: () => controls.openLine(line._id),
       style: styles2.lineCard
     },
-    /* @__PURE__ */ React4.createElement(Text, { style: styles2.lineCardTitle, numberOfLines: 1 }, line.name || "Line"),
-    line.subtitle && /* @__PURE__ */ React4.createElement(Text, { style: styles2.lineCardSubtitle, numberOfLines: 2 }, line.subtitle)
+    /* @__PURE__ */ React5.createElement(Text, { style: styles2.lineCardTitle, numberOfLines: 1 }, line.name || "Line"),
+    line.subtitle && /* @__PURE__ */ React5.createElement(Text, { style: styles2.lineCardSubtitle, numberOfLines: 2 }, line.subtitle)
   );
 }
-var styles2 = StyleSheet3.create({
-  background: { backgroundColor: "rgba(20,20,20,0.95)" },
+var styles2 = StyleSheet4.create({
   handle: { backgroundColor: "rgba(255,255,255,0.3)" },
   content: { flex: 1, paddingTop: 12, paddingBottom: 24 },
-  header: { paddingHorizontal: 24, paddingBottom: 16 },
+  header: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    paddingHorizontal: 24,
+    paddingBottom: 16,
+    gap: 8
+  },
   title: { color: "white", fontSize: 18, fontWeight: "600", lineHeight: 22 },
   subtitle: { color: "rgba(255,255,255,0.6)", fontSize: 13, marginTop: 4, lineHeight: 18 },
-  carousel: { marginTop: 8 },
+  iconBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: "rgba(255,255,255,0.1)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  carouselWrap: { marginTop: 8 },
+  carouselLabel: {
+    color: "rgba(255,255,255,0.4)",
+    fontSize: 10,
+    textTransform: "uppercase",
+    letterSpacing: 1,
+    fontWeight: "500",
+    paddingHorizontal: 24,
+    marginBottom: 8
+  },
   lineCard: {
     width: 220,
     backgroundColor: "rgba(255,255,255,0.06)",
@@ -398,28 +443,54 @@ var styles2 = StyleSheet3.create({
 });
 
 // src/LineDetailSheet.tsx
-import React5, { useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3 } from "react";
-import { Pressable as Pressable2, StyleSheet as StyleSheet4, Text as Text2, View as View4 } from "react-native";
-import { BottomSheetBackdrop as BottomSheetBackdrop2, BottomSheetFlatList, BottomSheetModal as BottomSheetModal2, BottomSheetView as BottomSheetView2 } from "@gorhom/bottom-sheet";
-function LineDetailSheet({ snapPoints = ["25%", "75%"], renderHeader, children }) {
+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 {
+  BottomSheetBackdrop as BottomSheetBackdrop2,
+  BottomSheetFlatList,
+  BottomSheetFooter,
+  BottomSheetModal as BottomSheetModal2
+} 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%", "85%"], renderHeader, children }) {
   const { activeLine, isAddNoteOpen, controls } = useRetorBridge();
   const sheetRef = useRef3(null);
   const snapPointsArr = useMemo4(() => snapPoints, [snapPoints]);
+  const [minimized, setMinimized] = useState3(false);
   useEffect3(() => {
     if (activeLine && !isAddNoteOpen) {
       sheetRef.current?.present();
+      setMinimized(false);
     } else {
       sheetRef.current?.dismiss();
     }
   }, [activeLine, isAddNoteOpen]);
-  return /* @__PURE__ */ React5.createElement(
+  const handleSheetChange = (index) => {
+    setMinimized(index === 0);
+  };
+  const toggleMinimize = () => {
+    if (minimized) {
+      sheetRef.current?.snapToIndex(snapPointsArr.length - 1);
+    } else {
+      sheetRef.current?.snapToIndex(0);
+    }
+  };
+  const renderFooter = useCallback2(
+    (props) => /* @__PURE__ */ React6.createElement(BottomSheetFooter, { ...props, bottomInset: 0 }, /* @__PURE__ */ React6.createElement(View5, { style: styles3.footer }, /* @__PURE__ */ React6.createElement(Pressable2, { style: styles3.doneButton, onPress: () => controls.exitLine() }, /* @__PURE__ */ React6.createElement(Text2, { style: styles3.doneText }, "Done")))),
+    [controls]
+  );
+  const header = activeLine ? renderHeader ? renderHeader(activeLine) : /* @__PURE__ */ React6.createElement(DefaultHeader, { line: activeLine, minimized, onToggleMinimize: toggleMinimize }) : null;
+  return /* @__PURE__ */ React6.createElement(
     BottomSheetModal2,
     {
       ref: sheetRef,
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
-      backdropComponent: (props) => /* @__PURE__ */ React5.createElement(
+      onChange: handleSheetChange,
+      footerComponent: renderFooter,
+      backdropComponent: (props) => /* @__PURE__ */ React6.createElement(
         BottomSheetBackdrop2,
         {
           ...props,
@@ -430,63 +501,158 @@ function LineDetailSheet({ snapPoints = ["25%", "75%"], renderHeader, children }
         }
       ),
       handleIndicatorStyle: styles3.handle,
-      backgroundStyle: styles3.background
+      backgroundComponent: BlurBackground
     },
-    /* @__PURE__ */ React5.createElement(BottomSheetView2, { style: styles3.content }, activeLine && (renderHeader ? renderHeader(activeLine) : /* @__PURE__ */ React5.createElement(View4, { style: styles3.header }, /* @__PURE__ */ React5.createElement(Text2, { style: styles3.title }, activeLine.name), activeLine.subtitle && /* @__PURE__ */ React5.createElement(Text2, { style: styles3.subtitle }, activeLine.subtitle), activeLine.description && /* @__PURE__ */ React5.createElement(Text2, { style: styles3.description, numberOfLines: 4 }, activeLine.description))), children ?? /* @__PURE__ */ React5.createElement(DefaultLineTagList, null), /* @__PURE__ */ React5.createElement(View4, { style: styles3.footer }, /* @__PURE__ */ React5.createElement(Pressable2, { style: styles3.doneButton, onPress: () => controls.exitLine() }, /* @__PURE__ */ React5.createElement(Text2, { style: styles3.doneText }, "Done"))))
+    activeLine && (children ?? /* @__PURE__ */ React6.createElement(DefaultLineTagList, { listHeader: header }))
   );
 }
-function DefaultLineTagList() {
-  return /* @__PURE__ */ React5.createElement(LineTagList, null, (tag, isActive) => /* @__PURE__ */ React5.createElement(DefaultTagItem, { tag, isActive }));
+function DefaultHeader({
+  line,
+  minimized,
+  onToggleMinimize
+}) {
+  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 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(
+    Circle,
+    {
+      cx: 14,
+      cy: 14,
+      r,
+      fill: "none",
+      stroke: "white",
+      strokeWidth: 2,
+      strokeDasharray: `${c}`,
+      strokeDashoffset: c * (1 - progress),
+      strokeLinecap: "round",
+      transform: "rotate(-90, 14, 14)"
+    }
+  )), 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 }) {
+function LineTagList({ children, listHeader }) {
   const { activeLine, closestTagId } = useRetorBridge();
+  const listRef = useRef3(null);
   const tags = useMemo4(
     () => (activeLine?.tags ?? []).filter((t) => t.name && t.name.trim().length > 0),
     [activeLine]
   );
+  useEffect3(() => {
+    if (!closestTagId) return;
+    const index = tags.findIndex((t2) => t2._id === closestTagId);
+    if (index < 0) return;
+    const t = setTimeout(() => {
+      try {
+        listRef.current?.scrollToIndex({ index, animated: true, viewPosition: 0 });
+      } catch {
+      }
+    }, 50);
+    return () => clearTimeout(t);
+  }, [closestTagId, tags]);
   if (!activeLine) return null;
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     BottomSheetFlatList,
     {
+      ref: listRef,
       data: tags,
       keyExtractor: (t) => t._id,
-      renderItem: ({ item }) => /* @__PURE__ */ React5.createElement(View4, null, children(item, item._id === closestTagId)),
-      contentContainerStyle: styles3.list
+      ListHeaderComponent: listHeader ? () => /* @__PURE__ */ React6.createElement(React6.Fragment, null, listHeader) : void 0,
+      renderItem: ({ item }) => /* @__PURE__ */ React6.createElement(View5, null, children(item, item._id === closestTagId)),
+      contentContainerStyle: styles3.list,
+      removeClippedSubviews: false,
+      onScrollToIndexFailed: (info) => {
+        const offset = info.averageItemLength * info.index;
+        listRef.current?.scrollToOffset({ offset, animated: false });
+        setTimeout(() => {
+          try {
+            listRef.current?.scrollToIndex({ index: info.index, animated: true, viewPosition: 0 });
+          } catch {
+          }
+        }, 100);
+      }
     }
   );
 }
+function DefaultLineTagList({ listHeader }) {
+  return /* @__PURE__ */ React6.createElement(LineTagList, { listHeader }, (tag, isActive) => /* @__PURE__ */ React6.createElement(DefaultTagItem, { tag, isActive }));
+}
 function DefaultTagItem({ tag, isActive }) {
-  const { controls } = useRetorBridge();
-  return /* @__PURE__ */ React5.createElement(
+  const { controls, openAddNote } = useRetorBridge();
+  return /* @__PURE__ */ React6.createElement(
     Pressable2,
     {
       onPress: () => controls.scrollToTag(tag._id),
       style: [styles3.tagItem, isActive && styles3.tagItemActive]
     },
-    /* @__PURE__ */ React5.createElement(Text2, { style: [styles3.tagText, isActive && styles3.tagTextActive], numberOfLines: 1 }, tag.name),
-    tag.subtitle && /* @__PURE__ */ React5.createElement(Text2, { style: styles3.tagSubtitle, numberOfLines: 1 }, tag.subtitle)
+    /* @__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(
+      Pressable2,
+      {
+        onPress: (e) => {
+          e.stopPropagation();
+          openAddNote(tag._id);
+        },
+        style: styles3.plusBtn
+      },
+      /* @__PURE__ */ React6.createElement(Plus, { size: 14, color: "white" })
+    )
   );
 }
-var styles3 = StyleSheet4.create({
-  background: { backgroundColor: "rgba(20,20,20,0.95)" },
+var styles3 = StyleSheet5.create({
   handle: { backgroundColor: "rgba(255,255,255,0.3)" },
-  content: { flex: 1 },
-  header: { paddingHorizontal: 24, paddingTop: 8, paddingBottom: 12 },
-  title: { color: "white", fontSize: 20, fontWeight: "700" },
-  subtitle: { color: "rgba(255,255,255,0.5)", fontSize: 12, marginTop: 4 },
-  description: { color: "rgba(255,255,255,0.7)", fontSize: 13, marginTop: 8, lineHeight: 18 },
-  list: { paddingHorizontal: 16, paddingBottom: 8 },
+  header: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    paddingHorizontal: 24,
+    paddingTop: 8,
+    paddingBottom: 16,
+    gap: 8
+  },
+  headerActions: { flexDirection: "row", alignItems: "center", gap: 6 },
+  title: { color: "white", fontSize: 18, fontWeight: "700" },
+  subtitle: { color: "rgba(255,255,255,0.5)", fontSize: 12, marginTop: 2 },
+  description: { color: "rgba(255,255,255,0.6)", fontSize: 12, marginTop: 6, lineHeight: 18 },
+  iconBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: "rgba(255,255,255,0.1)",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative"
+  },
+  list: { paddingHorizontal: 16, paddingBottom: 96, gap: 4 },
   tagItem: {
+    flexDirection: "row",
+    alignItems: "center",
     paddingHorizontal: 12,
-    paddingVertical: 10,
+    paddingVertical: 12,
     borderRadius: 12,
-    marginBottom: 4
+    gap: 8
   },
   tagItemActive: { backgroundColor: "rgba(255,255,255,0.1)" },
-  tagText: { color: "rgba(255,255,255,0.6)", fontSize: 14 },
+  tagText: { color: "rgba(255,255,255,0.6)", fontSize: 13 },
   tagTextActive: { color: "white", fontWeight: "600" },
-  tagSubtitle: { color: "rgba(255,255,255,0.4)", fontSize: 10, marginTop: 2 },
-  footer: { paddingHorizontal: 16, paddingBottom: 16, paddingTop: 8 },
+  tagDescription: { color: "rgba(255,255,255,0.4)", fontSize: 11, marginTop: 2, lineHeight: 14 },
+  tagSubtitle: { color: "rgba(255,255,255,0.4)", fontSize: 10 },
+  plusBtn: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: "rgba(255,255,255,0.2)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  footer: {
+    paddingHorizontal: 16,
+    paddingBottom: 24,
+    paddingTop: 8,
+    backgroundColor: "transparent"
+  },
   doneButton: {
     backgroundColor: "white",
     borderRadius: 14,
@@ -497,14 +663,15 @@ var styles3 = StyleSheet4.create({
 });
 
 // src/AddNoteSheet.tsx
-import React6, { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef4, useState as useState2 } from "react";
-import { Pressable as Pressable3, StyleSheet as StyleSheet5, Text as Text3, View as View5 } from "react-native";
+import React7, { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef4, useState as useState4 } from "react";
+import { Pressable as Pressable3, StyleSheet as StyleSheet6, Text as Text3, View as View6 } from "react-native";
 import {
   BottomSheetBackdrop as BottomSheetBackdrop3,
   BottomSheetModal as BottomSheetModal3,
   BottomSheetTextInput,
-  BottomSheetView as BottomSheetView3
+  BottomSheetView as BottomSheetView2
 } from "@gorhom/bottom-sheet";
+import { ArrowUp as ArrowUp3, X } from "lucide-react-native";
 function AddNoteSheet({
   snapPoints = ["50%"],
   maxLength = 280,
@@ -514,8 +681,8 @@ function AddNoteSheet({
   const { isAddNoteOpen, addNoteTagId, activeLine, closeAddNote, submitNote } = useRetorBridge();
   const sheetRef = useRef4(null);
   const snapPointsArr = useMemo5(() => snapPoints, [snapPoints]);
-  const [text, setText] = useState2("");
-  const [isPrivate, setPrivate] = useState2(true);
+  const [text, setText] = useState4("");
+  const [isPrivate, setPrivate] = useState4(true);
   useEffect4(() => {
     if (isAddNoteOpen) {
       sheetRef.current?.present();
@@ -545,14 +712,14 @@ function AddNoteSheet({
     close: closeAddNote,
     maxLength
   };
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     BottomSheetModal3,
     {
       ref: sheetRef,
       snapPoints: snapPointsArr,
       enablePanDownToClose: true,
       onDismiss: closeAddNote,
-      backdropComponent: (props) => /* @__PURE__ */ React6.createElement(
+      backdropComponent: (props) => /* @__PURE__ */ React7.createElement(
         BottomSheetBackdrop3,
         {
           ...props,
@@ -562,9 +729,9 @@ function AddNoteSheet({
         }
       ),
       handleIndicatorStyle: styles4.handle,
-      backgroundStyle: styles4.background
+      backgroundComponent: BlurBackground
     },
-    /* @__PURE__ */ React6.createElement(BottomSheetView3, { style: styles4.content }, renderForm ? renderForm(formApi) : /* @__PURE__ */ React6.createElement(View5, { style: styles4.form }, /* @__PURE__ */ React6.createElement(View5, { style: styles4.headerRow }, /* @__PURE__ */ React6.createElement(View5, { style: { flex: 1 } }, activeLine && /* @__PURE__ */ React6.createElement(Text3, { style: styles4.title, numberOfLines: 1 }, activeLine.name), tag && /* @__PURE__ */ React6.createElement(Text3, { style: styles4.subtitle, numberOfLines: 1 }, tag.name)), /* @__PURE__ */ React6.createElement(Pressable3, { onPress: closeAddNote, style: styles4.closeBtn }, /* @__PURE__ */ React6.createElement(Text3, { style: styles4.closeBtnText }, "\u2715"))), /* @__PURE__ */ React6.createElement(
+    /* @__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,
       {
         value: text,
@@ -577,26 +744,25 @@ function AddNoteSheet({
         style: styles4.input,
         autoFocus: true
       }
-    ), /* @__PURE__ */ React6.createElement(View5, { style: styles4.footer }, /* @__PURE__ */ React6.createElement(Text3, { style: [styles4.counter, text.length > maxLength * 0.9 && { color: "#fbbf24" }] }, text.length, "/", maxLength), /* @__PURE__ */ React6.createElement(View5, { style: { flex: 1 } }), /* @__PURE__ */ React6.createElement(
+    ), /* @__PURE__ */ React7.createElement(View6, { style: styles4.footer }, /* @__PURE__ */ React7.createElement(Text3, { style: [styles4.counter, text.length > maxLength * 0.9 && { color: "#fbbf24" }] }, text.length, "/", maxLength), /* @__PURE__ */ React7.createElement(View6, { style: { flex: 1 } }), /* @__PURE__ */ React7.createElement(
       Pressable3,
       {
         onPress: () => setPrivate(!isPrivate),
         style: [styles4.pill, !isPrivate && styles4.pillActive]
       },
-      /* @__PURE__ */ React6.createElement(Text3, { style: [styles4.pillText, !isPrivate && styles4.pillTextActive] }, isPrivate ? "Private" : "Public")
-    ), /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React7.createElement(Text3, { style: [styles4.pillText, !isPrivate && styles4.pillTextActive] }, isPrivate ? "Private" : "Public")
+    ), /* @__PURE__ */ React7.createElement(
       Pressable3,
       {
         onPress: handleSubmit,
         disabled: !text.trim(),
         style: [styles4.submit, !text.trim() && styles4.submitDisabled]
       },
-      /* @__PURE__ */ React6.createElement(Text3, { style: styles4.submitArrow }, "\u2191")
+      /* @__PURE__ */ React7.createElement(ArrowUp3, { size: 16, color: "black", strokeWidth: 2.5 })
     ))))
   );
 }
-var styles4 = StyleSheet5.create({
-  background: { backgroundColor: "rgba(20,20,20,0.98)" },
+var styles4 = StyleSheet6.create({
   handle: { backgroundColor: "rgba(255,255,255,0.3)" },
   content: { flex: 1, padding: 24 },
   form: { flex: 1 },
@@ -611,7 +777,6 @@ var styles4 = StyleSheet5.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  closeBtnText: { color: "rgba(255,255,255,0.6)", fontSize: 14 },
   input: {
     flex: 1,
     color: "white",
@@ -645,16 +810,15 @@ var styles4 = StyleSheet5.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  submitDisabled: { opacity: 0.3 },
-  submitArrow: { color: "black", fontSize: 16, fontWeight: "700" }
+  submitDisabled: { opacity: 0.3 }
 });
 
 // src/CoverPhoto.tsx
-import React7 from "react";
+import React8 from "react";
 import { WebView as WebView2 } from "react-native-webview";
 function CoverPhoto({ projectId, baseUrl = "https://retor.app", style }) {
   const uri = `${baseUrl}/p/${projectId}?cover=true`;
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     WebView2,
     {
       source: { uri },
@@ -668,6 +832,7 @@ function CoverPhoto({ projectId, baseUrl = "https://retor.app", style }) {
 }
 export {
   AddNoteSheet,
+  BlurBackground,
   CoverPhoto,
   Hud,
   LineDetailSheet,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retor/react-native",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "React Native SDK for embedding Retor 3D experiences",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -27,26 +27,37 @@
   "license": "MIT",
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5",
+    "expo-blur": ">=14",
+    "lucide-react-native": ">=1",
     "react": ">=18",
     "react-native": ">=0.72",
     "react-native-gesture-handler": ">=2.12",
     "react-native-reanimated": ">=3.5",
+    "react-native-svg": ">=14",
     "react-native-webview": ">=13"
   },
+  "peerDependenciesMeta": {
+    "expo-blur": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@gorhom/bottom-sheet": "^5.1.0",
     "@types/react": "^19.0.0",
+    "expo-blur": "^55.0.14",
+    "lucide-react-native": "^1.8.0",
     "react": "19.1.0",
     "react-native": "0.81.4",
     "react-native-gesture-handler": "^2.20.0",
     "react-native-reanimated": "^3.16.0",
+    "react-native-svg": "^15.8.0",
     "react-native-webview": "^13.13.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0"
   },
   "scripts": {
-    "build": "tsup src/index.tsx --format cjs,esm --dts --clean --external react --external react-native --external react-native-webview --external @gorhom/bottom-sheet --external react-native-gesture-handler --external react-native-reanimated",
-    "dev": "tsup src/index.tsx --format cjs,esm --dts --watch --external react --external react-native --external react-native-webview --external @gorhom/bottom-sheet --external react-native-gesture-handler --external react-native-reanimated",
+    "build": "tsup src/index.tsx --format cjs,esm --dts --clean --external react --external react-native --external react-native-webview --external @gorhom/bottom-sheet --external react-native-gesture-handler --external react-native-reanimated --external react-native-svg --external lucide-react-native --external expo-blur",
+    "dev": "tsup src/index.tsx --format cjs,esm --dts --watch --external react --external react-native --external react-native-webview --external @gorhom/bottom-sheet --external react-native-gesture-handler --external react-native-reanimated --external react-native-svg --external lucide-react-native --external expo-blur",
     "typecheck": "tsc --noEmit"
   }
 }