@retor/react-native 0.2.0 → 0.3.0

package/README.md

@@ -6,11 +6,11 @@ Embed Retor 3D experiences in a React Native / Expo app — with composable bott
 
 ```bash
 # Expo
-npx expo install react-native-webview react-native-gesture-handler react-native-reanimated
-npm install @gorhom/bottom-sheet @retor/react-native
+npx expo install react-native-webview react-native-gesture-handler react-native-reanimated react-native-svg
+npm install @gorhom/bottom-sheet lucide-react-native @retor/react-native
 
 # bare React Native
-npm install react-native-webview react-native-gesture-handler react-native-reanimated @gorhom/bottom-sheet @retor/react-native
+npm install react-native-webview react-native-gesture-handler react-native-reanimated react-native-svg @gorhom/bottom-sheet lucide-react-native @retor/react-native
 cd ios && pod install
 ```
 

package/dist/index.d.mts

@@ -185,71 +185,43 @@ interface HudProps {
 declare function Hud({ children }: HudProps): React.JSX.Element;
 
 interface ProjectSheetProps {
-    /**
-     * Snap points for the sheet. Defaults to ["20%", "60%"].
-     */
+    /** Snap points. Defaults to ["35%", "85%"]. */
     snapPoints?: (string | number)[];
-    /**
-     * Override the default header (project name + description).
-     * Receives the project metadata.
-     */
+    /** Override the default header (project name + description + arrow button). */
     renderHeader?: (project: {
         name?: string;
         description?: string;
     }) => React.ReactNode;
-    /**
-     * Children to render below the header. Typically a `<LinesCarousel>`.
-     * If omitted, a default LinesCarousel is rendered.
-     */
+    /** Children to render inside. Defaults to a built-in `<LinesCarousel>`. */
     children?: React.ReactNode;
 }
 /**
- * The browse-mode bottom sheet. Auto-presents whenever no line is open.
- *
- * ```tsx
- * <ProjectSheet>
- *   <LinesCarousel>
- *     {(line) => <MyLineCard line={line} />}
- *   </LinesCarousel>
- * </ProjectSheet>
- * ```
+ * Browse-mode bottom sheet — auto-presents whenever no line is open.
  */
 declare function ProjectSheet({ snapPoints, renderHeader, children }: ProjectSheetProps): React.JSX.Element;
 interface LinesCarouselProps {
     children: (line: RetorLine, index: number) => React.ReactNode;
-    /** Optional gap between items. Defaults to 12. */
     gap?: number;
-    /** Optional horizontal padding. Defaults to 16. */
     paddingHorizontal?: number;
 }
-/**
- * Renders a horizontally scrolling list of lines using a render prop.
- * Place inside `<ProjectSheet>`.
- *
- * Pressing an item is up to your render — use `useViewer().openLine(line._id)`.
- */
 declare function LinesCarousel({ children, gap, paddingHorizontal }: LinesCarouselProps): React.JSX.Element | null;
 
 interface LineDetailSheetProps {
-    /** Snap points. Defaults to ["25%", "75%"]. */
+    /** Snap points. Defaults to ["35%", "85%"]. */
     snapPoints?: (string | number)[];
-    /** Override the header. Receives the active line. */
+    /** Override the header. */
     renderHeader?: (line: RetorLine) => React.ReactNode;
-    /** Custom content (typically a `<LineTagList>`). Defaults to a built-in tag list. */
+    /** Custom content (typically a `<LineTagList>`). */
     children?: React.ReactNode;
 }
 /**
- * Sheet that auto-presents when the user enters a line. Shows the line's
- * tags and a Done button. Pass `<LineTagList>` as a child to customise items.
+ * Sheet shown when a line is open. Includes a default header with the
+ * autoplay button + minimize arrow, the tag list, and a Done footer.
  */
 declare function LineDetailSheet({ snapPoints, renderHeader, children }: LineDetailSheetProps): React.JSX.Element;
 interface LineTagListProps {
     children: (tag: RetorTag, isActive: boolean) => React.ReactNode;
 }
-/**
- * Renders the tags of the active line as a vertical list. Re-renders the
- * active item when the camera scrolls to it. Empty when no line is open.
- */
 declare function LineTagList({ children }: LineTagListProps): React.JSX.Element | null;
 
 interface AddNoteSheetProps {

package/dist/index.d.ts

@@ -185,71 +185,43 @@ interface HudProps {
 declare function Hud({ children }: HudProps): React.JSX.Element;
 
 interface ProjectSheetProps {
-    /**
-     * Snap points for the sheet. Defaults to ["20%", "60%"].
-     */
+    /** Snap points. Defaults to ["35%", "85%"]. */
     snapPoints?: (string | number)[];
-    /**
-     * Override the default header (project name + description).
-     * Receives the project metadata.
-     */
+    /** Override the default header (project name + description + arrow button). */
     renderHeader?: (project: {
         name?: string;
         description?: string;
     }) => React.ReactNode;
-    /**
-     * Children to render below the header. Typically a `<LinesCarousel>`.
-     * If omitted, a default LinesCarousel is rendered.
-     */
+    /** Children to render inside. Defaults to a built-in `<LinesCarousel>`. */
     children?: React.ReactNode;
 }
 /**
- * The browse-mode bottom sheet. Auto-presents whenever no line is open.
- *
- * ```tsx
- * <ProjectSheet>
- *   <LinesCarousel>
- *     {(line) => <MyLineCard line={line} />}
- *   </LinesCarousel>
- * </ProjectSheet>
- * ```
+ * Browse-mode bottom sheet — auto-presents whenever no line is open.
  */
 declare function ProjectSheet({ snapPoints, renderHeader, children }: ProjectSheetProps): React.JSX.Element;
 interface LinesCarouselProps {
     children: (line: RetorLine, index: number) => React.ReactNode;
-    /** Optional gap between items. Defaults to 12. */
     gap?: number;
-    /** Optional horizontal padding. Defaults to 16. */
     paddingHorizontal?: number;
 }
-/**
- * Renders a horizontally scrolling list of lines using a render prop.
- * Place inside `<ProjectSheet>`.
- *
- * Pressing an item is up to your render — use `useViewer().openLine(line._id)`.
- */
 declare function LinesCarousel({ children, gap, paddingHorizontal }: LinesCarouselProps): React.JSX.Element | null;
 
 interface LineDetailSheetProps {
-    /** Snap points. Defaults to ["25%", "75%"]. */
+    /** Snap points. Defaults to ["35%", "85%"]. */
     snapPoints?: (string | number)[];
-    /** Override the header. Receives the active line. */
+    /** Override the header. */
     renderHeader?: (line: RetorLine) => React.ReactNode;
-    /** Custom content (typically a `<LineTagList>`). Defaults to a built-in tag list. */
+    /** Custom content (typically a `<LineTagList>`). */
     children?: React.ReactNode;
 }
 /**
- * Sheet that auto-presents when the user enters a line. Shows the line's
- * tags and a Done button. Pass `<LineTagList>` as a child to customise items.
+ * Sheet shown when a line is open. Includes a default header with the
+ * autoplay button + minimize arrow, the tag list, and a Done footer.
  */
 declare function LineDetailSheet({ snapPoints, renderHeader, children }: LineDetailSheetProps): React.JSX.Element;
 interface LineTagListProps {
     children: (tag: RetorTag, isActive: boolean) => React.ReactNode;
 }
-/**
- * Renders the tags of the active line as a vertical list. Re-renders the
- * active item when the camera scrolls to it. Empty when no line is open.
- */
 declare function LineTagList({ children }: LineTagListProps): React.JSX.Element | null;
 
 interface AddNoteSheetProps {

package/dist/index.js

@@ -359,17 +359,30 @@ function Hud({ children }) {
 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_lucide_react_native = require("lucide-react-native");
+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]);
+  const [minimized, setMinimized] = (0, import_react4.useState)(false);
   (0, import_react4.useEffect)(() => {
     if (activeLineId || isAddNoteOpen) {
       sheetRef.current?.dismiss();
     } else {
       sheetRef.current?.present();
+      setMinimized(false);
     }
   }, [activeLineId, isAddNoteOpen]);
+  const handleSheetChange = (index) => {
+    setMinimized(index === 0);
+  };
+  const toggleMinimize = () => {
+    if (minimized) {
+      sheetRef.current?.snapToIndex(snapPointsArr.length - 1);
+    } else {
+      sheetRef.current?.snapToIndex(0);
+    }
+  };
   return /* @__PURE__ */ import_react4.default.createElement(
     import_bottom_sheet2.BottomSheetModal,
     {
@@ -377,6 +390,7 @@ function ProjectSheet({ snapPoints = ["20%", "60%"], renderHeader, children }) {
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      onChange: handleSheetChange,
       backdropComponent: (props) => /* @__PURE__ */ import_react4.default.createElement(
         import_bottom_sheet2.BottomSheetBackdrop,
         {
@@ -390,7 +404,7 @@ function ProjectSheet({ snapPoints = ["20%", "60%"], renderHeader, children }) {
       handleIndicatorStyle: styles2.handle,
       backgroundStyle: styles2.background
     },
-    /* @__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_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 }, /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { style: { flex: 1, minWidth: 0 } }, project?.name && /* @__PURE__ */ import_react4.default.createElement(import_react_native3.Text, { style: styles2.title, numberOfLines: 1 }, project.name), project?.description && /* @__PURE__ */ import_react4.default.createElement(import_react_native3.Text, { style: styles2.subtitle, numberOfLines: 4 }, project.description)), /* @__PURE__ */ import_react4.default.createElement(import_react_native3.Pressable, { style: styles2.iconBtn, onPress: toggleMinimize }, minimized ? /* @__PURE__ */ import_react4.default.createElement(import_lucide_react_native.ArrowUp, { size: 14, color: "rgba(255,255,255,0.6)" }) : /* @__PURE__ */ import_react4.default.createElement(import_lucide_react_native.ArrowDown, { size: 14, color: "rgba(255,255,255,0.6)" }))), children ?? /* @__PURE__ */ import_react4.default.createElement(DefaultLinesCarousel, null))
   );
 }
 function DefaultLinesCarousel() {
@@ -399,16 +413,15 @@ function DefaultLinesCarousel() {
 function LinesCarousel({ children, gap = 12, paddingHorizontal = 16 }) {
   const { lines } = useRetorBridge();
   if (lines.length === 0) return null;
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { style: styles2.carouselWrap }, /* @__PURE__ */ import_react4.default.createElement(import_react_native3.Text, { style: styles2.carouselLabel }, "Routes"), /* @__PURE__ */ import_react4.default.createElement(
     import_react_native3.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)))
-  );
+  ));
 }
 function DefaultLineCard({ line }) {
   const { controls } = useRetorBridge();
@@ -426,10 +439,33 @@ var styles2 = import_react_native3.StyleSheet.create({
   background: { backgroundColor: "rgba(20,20,20,0.95)" },
   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)",
@@ -444,17 +480,31 @@ var styles2 = import_react_native3.StyleSheet.create({
 var import_react5 = __toESM(require("react"));
 var import_react_native4 = 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]);
+  const [minimized, setMinimized] = (0, import_react5.useState)(false);
   (0, import_react5.useEffect)(() => {
     if (activeLine && !isAddNoteOpen) {
       sheetRef.current?.present();
+      setMinimized(false);
     } else {
       sheetRef.current?.dismiss();
     }
   }, [activeLine, isAddNoteOpen]);
+  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_sheet3.BottomSheetModal,
     {
@@ -462,6 +512,7 @@ function LineDetailSheet({ snapPoints = ["25%", "75%"], renderHeader, children }
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      onChange: handleSheetChange,
       backdropComponent: (props) => /* @__PURE__ */ import_react5.default.createElement(
         import_bottom_sheet3.BottomSheetBackdrop,
         {
@@ -475,60 +526,153 @@ function LineDetailSheet({ snapPoints = ["25%", "75%"], renderHeader, children }
       handleIndicatorStyle: styles3.handle,
       backgroundStyle: styles3.background
     },
-    /* @__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 && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { style: styles3.root }, renderHeader ? renderHeader(activeLine) : /* @__PURE__ */ import_react5.default.createElement(
+      DefaultHeader,
+      {
+        line: activeLine,
+        minimized,
+        onToggleMinimize: toggleMinimize
+      }
+    ), /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { style: styles3.listContainer }, 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"))))
   );
 }
-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_react5.default.createElement(import_react_native4.View, { style: styles3.header }, /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles3.title, numberOfLines: 1 }, line.name), line.subtitle && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles3.subtitle, numberOfLines: 1 }, line.subtitle), line.description && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles3.description, numberOfLines: minimized ? 2 : 4 }, line.description)), /* @__PURE__ */ import_react5.default.createElement(import_react_native4.View, { style: styles3.headerActions }, /* @__PURE__ */ import_react5.default.createElement(AutoplayButton, null), /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Pressable, { style: styles3.iconBtn, onPress: onToggleMinimize }, minimized ? /* @__PURE__ */ import_react5.default.createElement(import_lucide_react_native2.ArrowUp, { size: 14, color: "rgba(255,255,255,0.6)" }) : /* @__PURE__ */ import_react5.default.createElement(import_lucide_react_native2.ArrowDown, { 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__ */ import_react5.default.createElement(import_react_native4.Pressable, { style: styles3.iconBtn, onPress: () => controls.toggleAutoplay() }, /* @__PURE__ */ import_react5.default.createElement(import_react_native_svg.default, { width: 28, height: 28, style: import_react_native4.StyleSheet.absoluteFill }, /* @__PURE__ */ import_react5.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_react5.default.createElement(import_lucide_react_native2.Pause, { size: 11, color: "white", fill: "white" }) : /* @__PURE__ */ import_react5.default.createElement(import_lucide_react_native2.Play, { size: 11, color: "white", fill: "white", style: { marginLeft: 1 } }));
 }
 function LineTagList({ children }) {
   const { activeLine, closestTagId } = useRetorBridge();
+  const listRef = (0, import_react5.useRef)(null);
   const tags = (0, import_react5.useMemo)(
     () => (activeLine?.tags ?? []).filter((t) => t.name && t.name.trim().length > 0),
     [activeLine]
   );
+  (0, import_react5.useEffect)(() => {
+    if (!closestTagId) return;
+    const index = tags.findIndex((t) => t._id === closestTagId);
+    if (index < 0) return;
+    requestAnimationFrame(() => {
+      try {
+        listRef.current?.scrollToIndex({ index, animated: true, viewPosition: 0 });
+      } catch {
+      }
+    });
+  }, [closestTagId, tags]);
   if (!activeLine) return null;
   return /* @__PURE__ */ import_react5.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
+      contentContainerStyle: styles3.list,
+      onScrollToIndexFailed: (info) => {
+        setTimeout(() => {
+          listRef.current?.scrollToOffset({ offset: info.averageItemLength * info.index, animated: true });
+        }, 100);
+      }
     }
   );
 }
+function DefaultLineTagList() {
+  return /* @__PURE__ */ import_react5.default.createElement(LineTagList, null, (tag, isActive) => /* @__PURE__ */ import_react5.default.createElement(DefaultTagItem, { tag, isActive }));
+}
 function DefaultTagItem({ tag, isActive }) {
-  const { controls } = useRetorBridge();
+  const { controls, openAddNote, activeLine } = useRetorBridge();
+  const showPlus = isActive && (activeLine?.notesSupported ?? false);
   return /* @__PURE__ */ import_react5.default.createElement(
     import_react_native4.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_react5.default.createElement(import_react_native4.View, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: [styles3.tagText, isActive && styles3.tagTextActive], numberOfLines: 1 }, tag.name), isActive && tag.description && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles3.tagDescription, numberOfLines: 2 }, tag.description)),
+    tag.subtitle && /* @__PURE__ */ import_react5.default.createElement(import_react_native4.Text, { style: styles3.tagSubtitle, numberOfLines: 1 }, tag.subtitle),
+    showPlus && /* @__PURE__ */ import_react5.default.createElement(
+      import_react_native4.Pressable,
+      {
+        onPress: (e) => {
+          e.stopPropagation();
+          openAddNote(tag._id);
+        },
+        style: styles3.plusBtn
+      },
+      /* @__PURE__ */ import_react5.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)" },
   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 },
+  root: { flex: 1 },
+  header: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    paddingHorizontal: 24,
+    paddingTop: 8,
+    paddingBottom: 12,
+    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"
+  },
+  listContainer: { flex: 1 },
+  list: { paddingHorizontal: 16, paddingBottom: 8, 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 },
+  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: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: "rgba(255,255,255,0.15)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
   footer: { paddingHorizontal: 16, paddingBottom: 16, paddingTop: 8 },
   doneButton: {
     backgroundColor: "white",
@@ -543,6 +687,7 @@ var styles3 = import_react_native4.StyleSheet.create({
 var import_react6 = __toESM(require("react"));
 var import_react_native5 = 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,
@@ -602,7 +747,7 @@ function AddNoteSheet({
       handleIndicatorStyle: styles4.handle,
       backgroundStyle: styles4.background
     },
-    /* @__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_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_lucide_react_native3.X, { size: 14, color: "rgba(255,255,255,0.6)" }))), /* @__PURE__ */ import_react6.default.createElement(
       import_bottom_sheet4.BottomSheetTextInput,
       {
         value: text,
@@ -629,7 +774,7 @@ function AddNoteSheet({
         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_react6.default.createElement(import_lucide_react_native3.ArrowUp, { size: 16, color: "black", strokeWidth: 2.5 })
     ))))
   );
 }
@@ -649,7 +794,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,8 +827,7 @@ 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

package/dist/index.mjs

@@ -313,20 +313,33 @@ function Hud({ children }) {
 }
 
 // src/ProjectSheet.tsx
-import React4, { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
+import React4, { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
 import { Pressable, ScrollView, StyleSheet as StyleSheet3, Text, View as View3 } 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";
+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]);
+  const handleSheetChange = (index) => {
+    setMinimized(index === 0);
+  };
+  const toggleMinimize = () => {
+    if (minimized) {
+      sheetRef.current?.snapToIndex(snapPointsArr.length - 1);
+    } else {
+      sheetRef.current?.snapToIndex(0);
+    }
+  };
   return /* @__PURE__ */ React4.createElement(
     BottomSheetModal,
     {
@@ -334,6 +347,7 @@ function ProjectSheet({ snapPoints = ["20%", "60%"], renderHeader, children }) {
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      onChange: handleSheetChange,
       backdropComponent: (props) => /* @__PURE__ */ React4.createElement(
         BottomSheetBackdrop,
         {
@@ -347,7 +361,7 @@ function ProjectSheet({ snapPoints = ["20%", "60%"], renderHeader, children }) {
       handleIndicatorStyle: styles2.handle,
       backgroundStyle: styles2.background
     },
-    /* @__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__ */ React4.createElement(BottomSheetView, { style: styles2.content }, renderHeader ? renderHeader({ name: project?.name, description: project?.description }) : /* @__PURE__ */ React4.createElement(View3, { style: styles2.header }, /* @__PURE__ */ React4.createElement(View3, { style: { flex: 1, minWidth: 0 } }, project?.name && /* @__PURE__ */ React4.createElement(Text, { style: styles2.title, numberOfLines: 1 }, project.name), project?.description && /* @__PURE__ */ React4.createElement(Text, { style: styles2.subtitle, numberOfLines: 4 }, project.description)), /* @__PURE__ */ React4.createElement(Pressable, { style: styles2.iconBtn, onPress: toggleMinimize }, minimized ? /* @__PURE__ */ React4.createElement(ArrowUp, { size: 14, color: "rgba(255,255,255,0.6)" }) : /* @__PURE__ */ React4.createElement(ArrowDown, { size: 14, color: "rgba(255,255,255,0.6)" }))), children ?? /* @__PURE__ */ React4.createElement(DefaultLinesCarousel, null))
   );
 }
 function DefaultLinesCarousel() {
@@ -356,16 +370,15 @@ function DefaultLinesCarousel() {
 function LinesCarousel({ children, gap = 12, paddingHorizontal = 16 }) {
   const { lines } = useRetorBridge();
   if (lines.length === 0) return null;
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React4.createElement(View3, { style: styles2.carouselWrap }, /* @__PURE__ */ React4.createElement(Text, { style: styles2.carouselLabel }, "Routes"), /* @__PURE__ */ React4.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)))
-  );
+  ));
 }
 function DefaultLineCard({ line }) {
   const { controls } = useRetorBridge();
@@ -383,10 +396,33 @@ var styles2 = StyleSheet3.create({
   background: { backgroundColor: "rgba(20,20,20,0.95)" },
   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,20 +434,34 @@ var styles2 = StyleSheet3.create({
 });
 
 // src/LineDetailSheet.tsx
-import React5, { useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3 } from "react";
+import React5, { useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState3 } 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 { BottomSheetBackdrop as BottomSheetBackdrop2, BottomSheetFlatList, 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]);
+  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(
     BottomSheetModal2,
     {
@@ -419,6 +469,7 @@ function LineDetailSheet({ snapPoints = ["25%", "75%"], renderHeader, children }
       snapPoints: snapPointsArr,
       enablePanDownToClose: false,
       enableDismissOnClose: false,
+      onChange: handleSheetChange,
       backdropComponent: (props) => /* @__PURE__ */ React5.createElement(
         BottomSheetBackdrop2,
         {
@@ -432,60 +483,153 @@ function LineDetailSheet({ snapPoints = ["25%", "75%"], renderHeader, children }
       handleIndicatorStyle: styles3.handle,
       backgroundStyle: styles3.background
     },
-    /* @__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 && /* @__PURE__ */ React5.createElement(View4, { style: styles3.root }, renderHeader ? renderHeader(activeLine) : /* @__PURE__ */ React5.createElement(
+      DefaultHeader,
+      {
+        line: activeLine,
+        minimized,
+        onToggleMinimize: toggleMinimize
+      }
+    ), /* @__PURE__ */ React5.createElement(View4, { style: styles3.listContainer }, 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"))))
   );
 }
-function DefaultLineTagList() {
-  return /* @__PURE__ */ React5.createElement(LineTagList, null, (tag, isActive) => /* @__PURE__ */ React5.createElement(DefaultTagItem, { tag, isActive }));
+function DefaultHeader({
+  line,
+  minimized,
+  onToggleMinimize
+}) {
+  return /* @__PURE__ */ React5.createElement(View4, { style: styles3.header }, /* @__PURE__ */ React5.createElement(View4, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React5.createElement(Text2, { style: styles3.title, numberOfLines: 1 }, line.name), line.subtitle && /* @__PURE__ */ React5.createElement(Text2, { style: styles3.subtitle, numberOfLines: 1 }, line.subtitle), line.description && /* @__PURE__ */ React5.createElement(Text2, { style: styles3.description, numberOfLines: minimized ? 2 : 4 }, line.description)), /* @__PURE__ */ React5.createElement(View4, { style: styles3.headerActions }, /* @__PURE__ */ React5.createElement(AutoplayButton, null), /* @__PURE__ */ React5.createElement(Pressable2, { style: styles3.iconBtn, onPress: onToggleMinimize }, minimized ? /* @__PURE__ */ React5.createElement(ArrowUp2, { size: 14, color: "rgba(255,255,255,0.6)" }) : /* @__PURE__ */ React5.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__ */ React5.createElement(Pressable2, { style: styles3.iconBtn, onPress: () => controls.toggleAutoplay() }, /* @__PURE__ */ React5.createElement(Svg, { width: 28, height: 28, style: StyleSheet4.absoluteFill }, /* @__PURE__ */ React5.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__ */ React5.createElement(Pause, { size: 11, color: "white", fill: "white" }) : /* @__PURE__ */ React5.createElement(Play, { size: 11, color: "white", fill: "white", style: { marginLeft: 1 } }));
 }
 function LineTagList({ children }) {
   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((t) => t._id === closestTagId);
+    if (index < 0) return;
+    requestAnimationFrame(() => {
+      try {
+        listRef.current?.scrollToIndex({ index, animated: true, viewPosition: 0 });
+      } catch {
+      }
+    });
+  }, [closestTagId, tags]);
   if (!activeLine) return null;
   return /* @__PURE__ */ React5.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
+      contentContainerStyle: styles3.list,
+      onScrollToIndexFailed: (info) => {
+        setTimeout(() => {
+          listRef.current?.scrollToOffset({ offset: info.averageItemLength * info.index, animated: true });
+        }, 100);
+      }
     }
   );
 }
+function DefaultLineTagList() {
+  return /* @__PURE__ */ React5.createElement(LineTagList, null, (tag, isActive) => /* @__PURE__ */ React5.createElement(DefaultTagItem, { tag, isActive }));
+}
 function DefaultTagItem({ tag, isActive }) {
-  const { controls } = useRetorBridge();
+  const { controls, openAddNote, activeLine } = useRetorBridge();
+  const showPlus = isActive && (activeLine?.notesSupported ?? false);
   return /* @__PURE__ */ React5.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__ */ React5.createElement(View4, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React5.createElement(Text2, { style: [styles3.tagText, isActive && styles3.tagTextActive], numberOfLines: 1 }, tag.name), isActive && tag.description && /* @__PURE__ */ React5.createElement(Text2, { style: styles3.tagDescription, numberOfLines: 2 }, tag.description)),
+    tag.subtitle && /* @__PURE__ */ React5.createElement(Text2, { style: styles3.tagSubtitle, numberOfLines: 1 }, tag.subtitle),
+    showPlus && /* @__PURE__ */ React5.createElement(
+      Pressable2,
+      {
+        onPress: (e) => {
+          e.stopPropagation();
+          openAddNote(tag._id);
+        },
+        style: styles3.plusBtn
+      },
+      /* @__PURE__ */ React5.createElement(Plus, { size: 14, color: "white" })
+    )
   );
 }
 var styles3 = StyleSheet4.create({
   background: { backgroundColor: "rgba(20,20,20,0.95)" },
   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 },
+  root: { flex: 1 },
+  header: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    paddingHorizontal: 24,
+    paddingTop: 8,
+    paddingBottom: 12,
+    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"
+  },
+  listContainer: { flex: 1 },
+  list: { paddingHorizontal: 16, paddingBottom: 8, 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 },
+  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: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: "rgba(255,255,255,0.15)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
   footer: { paddingHorizontal: 16, paddingBottom: 16, paddingTop: 8 },
   doneButton: {
     backgroundColor: "white",
@@ -497,14 +641,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 React6, { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef4, useState as useState4 } from "react";
 import { Pressable as Pressable3, StyleSheet as StyleSheet5, Text as Text3, View as View5 } 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 +659,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();
@@ -564,7 +709,7 @@ function AddNoteSheet({
       handleIndicatorStyle: styles4.handle,
       backgroundStyle: styles4.background
     },
-    /* @__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__ */ React6.createElement(BottomSheetView2, { 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(X, { size: 14, color: "rgba(255,255,255,0.6)" }))), /* @__PURE__ */ React6.createElement(
       BottomSheetTextInput,
       {
         value: text,
@@ -591,7 +736,7 @@ function AddNoteSheet({
         disabled: !text.trim(),
         style: [styles4.submit, !text.trim() && styles4.submitDisabled]
       },
-      /* @__PURE__ */ React6.createElement(Text3, { style: styles4.submitArrow }, "\u2191")
+      /* @__PURE__ */ React6.createElement(ArrowUp3, { size: 16, color: "black", strokeWidth: 2.5 })
     ))))
   );
 }
@@ -611,7 +756,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,8 +789,7 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retor/react-native",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React Native SDK for embedding Retor 3D experiences",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -27,26 +27,30 @@
   "license": "MIT",
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5",
+    "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"
   },
   "devDependencies": {
     "@gorhom/bottom-sheet": "^5.1.0",
     "@types/react": "^19.0.0",
+    "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",
+    "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",
     "typecheck": "tsc --noEmit"
   }
 }