@retor/react-native 0.2.0 → 0.3.1

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AddNoteSheet: () => AddNoteSheet,
+  BlurBackground: () => BlurBackground,
   CoverPhoto: () => CoverPhoto,
   Hud: () => Hud,
   LineDetailSheet: () => LineDetailSheet,
@@ -356,28 +357,52 @@ function Hud({ children }) {
 }
 
 // src/ProjectSheet.tsx
+var import_react5 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
+var import_lucide_react_native = require("lucide-react-native");
+
+// src/BlurBackground.tsx
 var import_react4 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
-var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
-function ProjectSheet({ snapPoints = ["20%", "60%"], renderHeader, children }) {
+var import_expo_blur = require("expo-blur");
+function BlurBackground({ style }) {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { style: [style, import_react_native3.StyleSheet.absoluteFill, { overflow: "hidden", borderTopLeftRadius: 24, borderTopRightRadius: 24 }] }, /* @__PURE__ */ import_react4.default.createElement(import_expo_blur.BlurView, { intensity: 60, tint: "dark", style: import_react_native3.StyleSheet.absoluteFill }), /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { style: [import_react_native3.StyleSheet.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 = (0, import_react4.useRef)(null);
-  const snapPointsArr = (0, import_react4.useMemo)(() => snapPoints, [snapPoints]);
-  (0, import_react4.useEffect)(() => {
+  const sheetRef = (0, import_react5.useRef)(null);
+  const snapPointsArr = (0, import_react5.useMemo)(() => snapPoints, [snapPoints]);
+  const [minimized, setMinimized] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
     if (activeLineId || isAddNoteOpen) {
       sheetRef.current?.dismiss();
     } else {
       sheetRef.current?.present();
+      setMinimized(false);
     }
   }, [activeLineId, isAddNoteOpen]);
-  return /* @__PURE__ */ import_react4.default.createElement(
+  const handleSheetChange = (index) => {
+    setMinimized(index === 0);
+  };
+  const toggleMinimize = () => {
+    if (minimized) {
+      sheetRef.current?.snapToIndex(snapPointsArr.length - 1);
+    } else {
+      sheetRef.current?.snapToIndex(0);
+    }
+  };
+  return /* @__PURE__ */ import_react5.default.createElement(
     import_bottom_sheet2.BottomSheetModal,
     {
       ref: sheetRef,
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
-      backdropComponent: (props) => /* @__PURE__ */ import_react4.default.createElement(
+      onChange: handleSheetChange,
+      backdropComponent: (props) => /* @__PURE__ */ import_react5.default.createElement(
         import_bottom_sheet2.BottomSheetBackdrop,
         {
           ...props,
@@ -388,48 +413,69 @@ function ProjectSheet({ snapPoints = ["20%", "60%"], renderHeader, children }) {
         }
       ),
       handleIndicatorStyle: styles2.handle,
-      backgroundStyle: styles2.background
+      backgroundComponent: BlurBackground
     },
-    /* @__PURE__ */ import_react4.default.createElement(import_bottom_sheet2.BottomSheetView, { style: styles2.content }, renderHeader ? renderHeader({ name: project?.name, description: project?.description }) : /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { style: styles2.header }, project?.name && /* @__PURE__ */ import_react4.default.createElement(import_react_native3.Text, { style: styles2.title }, project.name), project?.description && /* @__PURE__ */ import_react4.default.createElement(import_react_native3.Text, { style: styles2.subtitle, numberOfLines: 4 }, project.description)), children ?? /* @__PURE__ */ import_react4.default.createElement(DefaultLinesCarousel, null))
+    /* @__PURE__ */ import_react5.default.createElement(import_bottom_sheet2.BottomSheetView, { style: styles2.content }, renderHeader ? renderHeader({ name: project?.name, description: project?.description }) : /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { style: styles2.header }, /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { style: { flex: 1, minWidth: 0 } }, project?.name && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles2.title, numberOfLines: 1 }, project.name), project?.description && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles2.subtitle, numberOfLines: 4 }, project.description)), /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Pressable, { style: styles2.iconBtn, onPress: toggleMinimize }, minimized ? /* @__PURE__ */ import_react5.default.createElement(import_lucide_react_native.ArrowUp, { size: 14, color: "rgba(255,255,255,0.6)" }) : /* @__PURE__ */ import_react5.default.createElement(import_lucide_react_native.ArrowDown, { size: 14, color: "rgba(255,255,255,0.6)" }))), children ?? /* @__PURE__ */ import_react5.default.createElement(DefaultLinesCarousel, null))
   );
 }
 function DefaultLinesCarousel() {
-  return /* @__PURE__ */ import_react4.default.createElement(LinesCarousel, null, (line) => /* @__PURE__ */ import_react4.default.createElement(DefaultLineCard, { line }));
+  return /* @__PURE__ */ import_react5.default.createElement(LinesCarousel, null, (line) => /* @__PURE__ */ import_react5.default.createElement(DefaultLineCard, { line }));
 }
 function LinesCarousel({ children, gap = 12, paddingHorizontal = 16 }) {
   const { lines } = useRetorBridge();
   if (lines.length === 0) return null;
-  return /* @__PURE__ */ import_react4.default.createElement(
-    import_react_native3.ScrollView,
+  return /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { style: styles2.carouselWrap }, /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles2.carouselLabel }, "Routes"), /* @__PURE__ */ import_react5.default.createElement(
+    import_react_native4.ScrollView,
     {
       horizontal: true,
       showsHorizontalScrollIndicator: false,
-      contentContainerStyle: { paddingHorizontal, gap },
-      style: styles2.carousel
+      contentContainerStyle: { paddingHorizontal, gap }
     },
-    lines.map((line, idx) => /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, { key: line._id }, children(line, idx)))
-  );
+    lines.map((line, idx) => /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, { key: line._id }, children(line, idx)))
+  ));
 }
 function DefaultLineCard({ line }) {
   const { controls } = useRetorBridge();
-  return /* @__PURE__ */ import_react4.default.createElement(
-    import_react_native3.Pressable,
+  return /* @__PURE__ */ import_react5.default.createElement(
+    import_react_native4.Pressable,
     {
       onPress: () => controls.openLine(line._id),
       style: styles2.lineCard
     },
-    /* @__PURE__ */ import_react4.default.createElement(import_react_native3.Text, { style: styles2.lineCardTitle, numberOfLines: 1 }, line.name || "Line"),
-    line.subtitle && /* @__PURE__ */ import_react4.default.createElement(import_react_native3.Text, { style: styles2.lineCardSubtitle, numberOfLines: 2 }, line.subtitle)
+    /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles2.lineCardTitle, numberOfLines: 1 }, line.name || "Line"),
+    line.subtitle && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles2.lineCardSubtitle, numberOfLines: 2 }, line.subtitle)
   );
 }
-var styles2 = import_react_native3.StyleSheet.create({
-  background: { backgroundColor: "rgba(20,20,20,0.95)" },
+var styles2 = import_react_native4.StyleSheet.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)",
@@ -441,28 +487,49 @@ var styles2 = import_react_native3.StyleSheet.create({
 });
 
 // src/LineDetailSheet.tsx
-var import_react5 = __toESM(require("react"));
-var import_react_native4 = require("react-native");
+var import_react6 = __toESM(require("react"));
+var import_react_native5 = require("react-native");
 var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
-function LineDetailSheet({ snapPoints = ["25%", "75%"], renderHeader, children }) {
+var import_react_native_svg = __toESM(require("react-native-svg"));
+var import_lucide_react_native2 = require("lucide-react-native");
+function LineDetailSheet({ snapPoints = ["35%", "85%"], renderHeader, children }) {
   const { activeLine, isAddNoteOpen, controls } = useRetorBridge();
-  const sheetRef = (0, import_react5.useRef)(null);
-  const snapPointsArr = (0, import_react5.useMemo)(() => snapPoints, [snapPoints]);
-  (0, import_react5.useEffect)(() => {
+  const sheetRef = (0, import_react6.useRef)(null);
+  const snapPointsArr = (0, import_react6.useMemo)(() => snapPoints, [snapPoints]);
+  const [minimized, setMinimized] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
     if (activeLine && !isAddNoteOpen) {
       sheetRef.current?.present();
+      setMinimized(false);
     } else {
       sheetRef.current?.dismiss();
     }
   }, [activeLine, isAddNoteOpen]);
-  return /* @__PURE__ */ import_react5.default.createElement(
+  const handleSheetChange = (index) => {
+    setMinimized(index === 0);
+  };
+  const toggleMinimize = () => {
+    if (minimized) {
+      sheetRef.current?.snapToIndex(snapPointsArr.length - 1);
+    } else {
+      sheetRef.current?.snapToIndex(0);
+    }
+  };
+  const renderFooter = (0, import_react6.useCallback)(
+    (props) => /* @__PURE__ */ import_react6.default.createElement(import_bottom_sheet3.BottomSheetFooter, { ...props, bottomInset: 0 }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: styles3.footer }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Pressable, { style: styles3.doneButton, onPress: () => controls.exitLine() }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles3.doneText }, "Done")))),
+    [controls]
+  );
+  const header = activeLine ? renderHeader ? renderHeader(activeLine) : /* @__PURE__ */ import_react6.default.createElement(DefaultHeader, { line: activeLine, minimized, onToggleMinimize: toggleMinimize }) : null;
+  return /* @__PURE__ */ import_react6.default.createElement(
     import_bottom_sheet3.BottomSheetModal,
     {
       ref: sheetRef,
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
-      backdropComponent: (props) => /* @__PURE__ */ import_react5.default.createElement(
+      onChange: handleSheetChange,
+      footerComponent: renderFooter,
+      backdropComponent: (props) => /* @__PURE__ */ import_react6.default.createElement(
         import_bottom_sheet3.BottomSheetBackdrop,
         {
           ...props,
@@ -473,63 +540,158 @@ function LineDetailSheet({ snapPoints = ["25%", "75%"], renderHeader, children }
         }
       ),
       handleIndicatorStyle: styles3.handle,
-      backgroundStyle: styles3.background
+      backgroundComponent: BlurBackground
     },
-    /* @__PURE__ */ import_react5.default.createElement(import_bottom_sheet3.BottomSheetView, { style: styles3.content }, activeLine && (renderHeader ? renderHeader(activeLine) : /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { style: styles3.header }, /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles3.title }, activeLine.name), activeLine.subtitle && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles3.subtitle }, activeLine.subtitle), activeLine.description && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles3.description, numberOfLines: 4 }, activeLine.description))), children ?? /* @__PURE__ */ import_react5.default.createElement(DefaultLineTagList, null), /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { style: styles3.footer }, /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Pressable, { style: styles3.doneButton, onPress: () => controls.exitLine() }, /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles3.doneText }, "Done"))))
+    activeLine && (children ?? /* @__PURE__ */ import_react6.default.createElement(DefaultLineTagList, { listHeader: header }))
   );
 }
-function DefaultLineTagList() {
-  return /* @__PURE__ */ import_react5.default.createElement(LineTagList, null, (tag, isActive) => /* @__PURE__ */ import_react5.default.createElement(DefaultTagItem, { tag, isActive }));
+function DefaultHeader({
+  line,
+  minimized,
+  onToggleMinimize
+}) {
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: styles3.header }, /* @__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.title, numberOfLines: 1 }, line.name), line.subtitle && /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles3.subtitle, numberOfLines: 1 }, line.subtitle), line.description && /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles3.description, numberOfLines: minimized ? 2 : 4 }, line.description)), /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: styles3.headerActions }, /* @__PURE__ */ import_react6.default.createElement(AutoplayButton, null), /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Pressable, { style: styles3.iconBtn, onPress: onToggleMinimize }, minimized ? /* @__PURE__ */ import_react6.default.createElement(import_lucide_react_native2.ArrowUp, { size: 14, color: "rgba(255,255,255,0.6)" }) : /* @__PURE__ */ import_react6.default.createElement(import_lucide_react_native2.ArrowDown, { size: 14, color: "rgba(255,255,255,0.6)" }))));
 }
-function LineTagList({ children }) {
+function AutoplayButton() {
+  const { isPlaying, progress, controls } = useRetorBridge();
+  const r = 12.5;
+  const c = 2 * Math.PI * r;
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Pressable, { style: styles3.iconBtn, onPress: () => controls.toggleAutoplay() }, /* @__PURE__ */ import_react6.default.createElement(import_react_native_svg.default, { width: 28, height: 28, style: import_react_native5.StyleSheet.absoluteFill }, /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native_svg.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__ */ 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, closestTagId } = useRetorBridge();
-  const tags = (0, import_react5.useMemo)(
+  const listRef = (0, import_react6.useRef)(null);
+  const tags = (0, import_react6.useMemo)(
     () => (activeLine?.tags ?? []).filter((t) => t.name && t.name.trim().length > 0),
     [activeLine]
   );
+  (0, import_react6.useEffect)(() => {
+    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__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(
     import_bottom_sheet3.BottomSheetFlatList,
     {
+      ref: listRef,
       data: tags,
       keyExtractor: (t) => t._id,
-      renderItem: ({ item }) => /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, null, children(item, item._id === closestTagId)),
-      contentContainerStyle: styles3.list
+      ListHeaderComponent: listHeader ? () => /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, listHeader) : void 0,
+      renderItem: ({ item }) => /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, 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__ */ import_react6.default.createElement(LineTagList, { listHeader }, (tag, isActive) => /* @__PURE__ */ import_react6.default.createElement(DefaultTagItem, { tag, isActive }));
+}
 function DefaultTagItem({ tag, isActive }) {
-  const { controls } = useRetorBridge();
-  return /* @__PURE__ */ import_react5.default.createElement(
-    import_react_native4.Pressable,
+  const { controls, openAddNote } = useRetorBridge();
+  return /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native5.Pressable,
     {
       onPress: () => controls.scrollToTag(tag._id),
       style: [styles3.tagItem, isActive && styles3.tagItemActive]
     },
-    /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: [styles3.tagText, isActive && styles3.tagTextActive], numberOfLines: 1 }, tag.name),
-    tag.subtitle && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles3.tagSubtitle, numberOfLines: 1 }, tag.subtitle)
+    /* @__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(
+      import_react_native5.Pressable,
+      {
+        onPress: (e) => {
+          e.stopPropagation();
+          openAddNote(tag._id);
+        },
+        style: styles3.plusBtn
+      },
+      /* @__PURE__ */ import_react6.default.createElement(import_lucide_react_native2.Plus, { size: 14, color: "white" })
+    )
   );
 }
-var styles3 = import_react_native4.StyleSheet.create({
-  background: { backgroundColor: "rgba(20,20,20,0.95)" },
+var styles3 = import_react_native5.StyleSheet.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,
@@ -540,9 +702,10 @@ var styles3 = import_react_native4.StyleSheet.create({
 });
 
 // src/AddNoteSheet.tsx
-var import_react6 = __toESM(require("react"));
-var import_react_native5 = require("react-native");
+var import_react7 = __toESM(require("react"));
+var import_react_native6 = require("react-native");
 var import_bottom_sheet4 = require("@gorhom/bottom-sheet");
+var import_lucide_react_native3 = require("lucide-react-native");
 function AddNoteSheet({
   snapPoints = ["50%"],
   maxLength = 280,
@@ -550,11 +713,11 @@ function AddNoteSheet({
   renderForm
 }) {
   const { isAddNoteOpen, addNoteTagId, activeLine, closeAddNote, submitNote } = useRetorBridge();
-  const sheetRef = (0, import_react6.useRef)(null);
-  const snapPointsArr = (0, import_react6.useMemo)(() => snapPoints, [snapPoints]);
-  const [text, setText] = (0, import_react6.useState)("");
-  const [isPrivate, setPrivate] = (0, import_react6.useState)(true);
-  (0, import_react6.useEffect)(() => {
+  const sheetRef = (0, import_react7.useRef)(null);
+  const snapPointsArr = (0, import_react7.useMemo)(() => snapPoints, [snapPoints]);
+  const [text, setText] = (0, import_react7.useState)("");
+  const [isPrivate, setPrivate] = (0, import_react7.useState)(true);
+  (0, import_react7.useEffect)(() => {
     if (isAddNoteOpen) {
       sheetRef.current?.present();
       setText("");
@@ -563,7 +726,7 @@ function AddNoteSheet({
       sheetRef.current?.dismiss();
     }
   }, [isAddNoteOpen]);
-  const tag = (0, import_react6.useMemo)(
+  const tag = (0, import_react7.useMemo)(
     () => activeLine?.tags.find((t) => t._id === addNoteTagId) ?? null,
     [activeLine, addNoteTagId]
   );
@@ -583,14 +746,14 @@ function AddNoteSheet({
     close: closeAddNote,
     maxLength
   };
-  return /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(
     import_bottom_sheet4.BottomSheetModal,
     {
       ref: sheetRef,
       snapPoints: snapPointsArr,
       enablePanDownToClose: true,
       onDismiss: closeAddNote,
-      backdropComponent: (props) => /* @__PURE__ */ import_react6.default.createElement(
+      backdropComponent: (props) => /* @__PURE__ */ import_react7.default.createElement(
         import_bottom_sheet4.BottomSheetBackdrop,
         {
           ...props,
@@ -600,9 +763,9 @@ function AddNoteSheet({
         }
       ),
       handleIndicatorStyle: styles4.handle,
-      backgroundStyle: styles4.background
+      backgroundComponent: BlurBackground
     },
-    /* @__PURE__ */ import_react6.default.createElement(import_bottom_sheet4.BottomSheetView, { style: styles4.content }, renderForm ? renderForm(formApi) : /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: styles4.form }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: styles4.headerRow }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: { flex: 1 } }, activeLine && /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles4.title, numberOfLines: 1 }, activeLine.name), tag && /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles4.subtitle, numberOfLines: 1 }, tag.name)), /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Pressable, { onPress: closeAddNote, style: styles4.closeBtn }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles4.closeBtnText }, "\u2715"))), /* @__PURE__ */ import_react6.default.createElement(
+    /* @__PURE__ */ import_react7.default.createElement(import_bottom_sheet4.BottomSheetView, { style: styles4.content }, renderForm ? renderForm(formApi) : /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: styles4.form }, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: styles4.headerRow }, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: { flex: 1 } }, activeLine && /* @__PURE__ */ import_react7.default.createElement(import_react_native6.Text, { style: styles4.title, numberOfLines: 1 }, activeLine.name), tag && /* @__PURE__ */ import_react7.default.createElement(import_react_native6.Text, { style: styles4.subtitle, numberOfLines: 1 }, tag.name)), /* @__PURE__ */ import_react7.default.createElement(import_react_native6.Pressable, { onPress: closeAddNote, style: styles4.closeBtn }, /* @__PURE__ */ import_react7.default.createElement(import_lucide_react_native3.X, { size: 14, color: "rgba(255,255,255,0.6)" }))), /* @__PURE__ */ import_react7.default.createElement(
       import_bottom_sheet4.BottomSheetTextInput,
       {
         value: text,
@@ -615,26 +778,25 @@ function AddNoteSheet({
         style: styles4.input,
         autoFocus: true
       }
-    ), /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: styles4.footer }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: [styles4.counter, text.length > maxLength * 0.9 && { color: "#fbbf24" }] }, text.length, "/", maxLength), /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: { flex: 1 } }), /* @__PURE__ */ import_react6.default.createElement(
-      import_react_native5.Pressable,
+    ), /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: styles4.footer }, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.Text, { style: [styles4.counter, text.length > maxLength * 0.9 && { color: "#fbbf24" }] }, text.length, "/", maxLength), /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: { flex: 1 } }), /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native6.Pressable,
       {
         onPress: () => setPrivate(!isPrivate),
         style: [styles4.pill, !isPrivate && styles4.pillActive]
       },
-      /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: [styles4.pillText, !isPrivate && styles4.pillTextActive] }, isPrivate ? "Private" : "Public")
-    ), /* @__PURE__ */ import_react6.default.createElement(
-      import_react_native5.Pressable,
+      /* @__PURE__ */ import_react7.default.createElement(import_react_native6.Text, { style: [styles4.pillText, !isPrivate && styles4.pillTextActive] }, isPrivate ? "Private" : "Public")
+    ), /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native6.Pressable,
       {
         onPress: handleSubmit,
         disabled: !text.trim(),
         style: [styles4.submit, !text.trim() && styles4.submitDisabled]
       },
-      /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Text, { style: styles4.submitArrow }, "\u2191")
+      /* @__PURE__ */ import_react7.default.createElement(import_lucide_react_native3.ArrowUp, { size: 16, color: "black", strokeWidth: 2.5 })
     ))))
   );
 }
-var styles4 = import_react_native5.StyleSheet.create({
-  background: { backgroundColor: "rgba(20,20,20,0.98)" },
+var styles4 = import_react_native6.StyleSheet.create({
   handle: { backgroundColor: "rgba(255,255,255,0.3)" },
   content: { flex: 1, padding: 24 },
   form: { flex: 1 },
@@ -649,7 +811,6 @@ var styles4 = import_react_native5.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  closeBtnText: { color: "rgba(255,255,255,0.6)", fontSize: 14 },
   input: {
     flex: 1,
     color: "white",
@@ -683,16 +844,15 @@ var styles4 = import_react_native5.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  submitDisabled: { opacity: 0.3 },
-  submitArrow: { color: "black", fontSize: 16, fontWeight: "700" }
+  submitDisabled: { opacity: 0.3 }
 });
 
 // src/CoverPhoto.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_react_native_webview2 = require("react-native-webview");
 function CoverPhoto({ projectId, baseUrl = "https://retor.app", style }) {
   const uri = `${baseUrl}/p/${projectId}?cover=true`;
-  return /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(
     import_react_native_webview2.WebView,
     {
       source: { uri },
@@ -707,6 +867,7 @@ function CoverPhoto({ projectId, baseUrl = "https://retor.app", style }) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddNoteSheet,
+  BlurBackground,
   CoverPhoto,
   Hud,
   LineDetailSheet,