@retor/react-native 0.1.0 → 0.3.0

package/dist/index.mjs

@@ -1,13 +1,81 @@
-// src/index.tsx
-import React, {
+// src/context.tsx
+import React, { createContext, useContext, useMemo } from "react";
+var RetorBridgeContext = createContext(null);
+function noop() {
+}
+var noopHandle = {
+  openLine: noop,
+  exitLine: noop,
+  scrollToTag: noop,
+  toggleAutoplay: noop,
+  setAutoplay: noop
+};
+var fallback = {
+  project: null,
+  lines: [],
+  activeLineId: null,
+  activeLine: null,
+  closestTagId: null,
+  progress: 0,
+  isPlaying: false,
+  isAddNoteOpen: false,
+  addNoteTagId: null,
+  controls: noopHandle,
+  openAddNote: noop,
+  closeAddNote: noop,
+  submitNote: noop
+};
+function useRetorBridge() {
+  return useContext(RetorBridgeContext) ?? fallback;
+}
+function useLines() {
+  return useRetorBridge().lines;
+}
+function useProject() {
+  return useRetorBridge().project;
+}
+function useActiveLine() {
+  return useRetorBridge().activeLine;
+}
+function useLineProgress() {
+  const { progress, closestTagId } = useRetorBridge();
+  return useMemo(() => ({ progress, closestTagId }), [progress, closestTagId]);
+}
+function useAutoplay() {
+  const { isPlaying, controls } = useRetorBridge();
+  return useMemo(() => ({
+    isPlaying,
+    toggle: () => controls.toggleAutoplay(),
+    play: () => controls.setAutoplay(true),
+    pause: () => controls.setAutoplay(false)
+  }), [isPlaying, controls]);
+}
+function useAddNote() {
+  const { isAddNoteOpen, addNoteTagId, openAddNote, closeAddNote, submitNote } = useRetorBridge();
+  return useMemo(() => ({
+    isOpen: isAddNoteOpen,
+    tagId: addNoteTagId,
+    open: openAddNote,
+    close: closeAddNote,
+    submit: submitNote
+  }), [isAddNoteOpen, addNoteTagId, openAddNote, closeAddNote, submitNote]);
+}
+function RetorBridgeProvider({ value, children }) {
+  return /* @__PURE__ */ React.createElement(RetorBridgeContext.Provider, { value }, children);
+}
+
+// src/Viewer.tsx
+import React2, {
   forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
-  useMemo,
+  useMemo as useMemo2,
   useRef,
+  useState,
   useSyncExternalStore
 } from "react";
+import { View, StyleSheet } from "react-native";
 import { WebView } from "react-native-webview";
 var viewerRegistry = /* @__PURE__ */ new Map();
 var registryListeners = /* @__PURE__ */ new Set();
@@ -36,7 +104,7 @@ function useViewer(target = "default") {
     [target]
   );
   const handle = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  return useMemo(() => {
+  return useMemo2(() => {
     const resolve = () => typeof target === "string" ? viewerRegistry.get(target) ?? null : target.current ?? null;
     return {
       openLine: (lineId) => {
@@ -57,27 +125,14 @@ function useViewer(target = "default") {
     };
   }, [target, handle]);
 }
-function Hud() {
-  return null;
-}
-Hud.__isHud = true;
-function hasHud(children) {
-  let found = false;
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) return;
-    const type = child.type;
-    if (type?.__isHud) found = true;
-  });
-  return found;
-}
 function Notes(_props) {
   return null;
 }
 Notes.__isNotes = true;
 function extractNotes(children) {
   let notes = null;
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) return;
+  React2.Children.forEach(children, (child) => {
+    if (!React2.isValidElement(child)) return;
     const type = child.type;
     if (type?.__isNotes) {
       const props = child.props;
@@ -86,54 +141,83 @@ function extractNotes(children) {
   });
   return notes;
 }
-var Viewer = forwardRef(
-  function Viewer2({ projectId, id = "default", baseUrl = "https://retor.app", onInit, onLineOpen, onLineClose, onLineProgress, onMessage, style, children }, ref) {
-    const webviewRef = useRef(null);
-    const showHud = hasHud(children);
-    const notes = extractNotes(children);
-    const readyRef = useRef(false);
-    useEffect(() => {
-      const handle = {
-        openLine: (lineId) => send("open-line", { lineId }),
-        exitLine: () => send("exit-line"),
-        scrollToTag: (tagId) => send("scroll-to-tag", { tagId }),
-        toggleAutoplay: () => send("toggle-autoplay"),
-        setAutoplay: (playing) => send("set-autoplay", { playing })
-      };
-      return registerViewer(id, handle);
-    }, [id]);
-    const uri = useMemo(() => {
-      const params = [];
-      if (!showHud) params.push("vanilla=true");
-      const qs = params.length ? `?${params.join("&")}` : "";
-      return `${baseUrl}/p/${projectId}${qs}`;
-    }, [baseUrl, projectId, showHud]);
-    const send = useCallback((type, payload) => {
-      const message = JSON.stringify({ source: "retor-host", type, payload });
-      const escaped = message.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
-      const script = `
-        (function(){
-          try {
-            var msg = JSON.parse(\`${escaped}\`);
-            window.dispatchEvent(new MessageEvent('message', { data: msg }));
-          } catch(e) {}
-          true;
-        })();
-      `;
-      webviewRef.current?.injectJavaScript(script);
-    }, []);
-    useImperativeHandle(ref, () => ({
+var Viewer = forwardRef(function Viewer2({ projectId, id = "default", baseUrl = "https://retor.app", onNoteSubmit, onInit, onLineOpen, onLineClose, onLineProgress, onMessage, style, children }, ref) {
+  const webviewRef = useRef(null);
+  const notes = extractNotes(children);
+  const readyRef = useRef(false);
+  const [project, setProject] = useState(null);
+  const [lines, setLines] = useState([]);
+  const [activeLineId, setActiveLineId] = useState(null);
+  const [closestTagId, setClosestTagId] = useState(null);
+  const [progress, setProgress] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isAddNoteOpen, setIsAddNoteOpen] = useState(false);
+  const [addNoteTagId, setAddNoteTagId] = useState(null);
+  const uri = useMemo2(() => `${baseUrl}/p/${projectId}?vanilla=true`, [baseUrl, projectId]);
+  const send = useCallback((type, payload) => {
+    const message = JSON.stringify({ source: "retor-host", type, payload });
+    const escaped = message.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
+    const script = `
+      (function(){
+        try {
+          var msg = JSON.parse(\`${escaped}\`);
+          window.dispatchEvent(new MessageEvent('message', { data: msg }));
+        } catch(e) {}
+        true;
+      })();
+    `;
+    webviewRef.current?.injectJavaScript(script);
+  }, []);
+  const controls = useMemo2(
+    () => ({
       openLine: (lineId) => send("open-line", { lineId }),
       exitLine: () => send("exit-line"),
       scrollToTag: (tagId) => send("scroll-to-tag", { tagId }),
-      toggleAutoplay: () => send("toggle-autoplay"),
-      setAutoplay: (playing) => send("set-autoplay", { playing })
-    }), [send]);
-    useEffect(() => {
-      if (!notes || !readyRef.current) return;
-      send("set-notes", { notes });
-    }, [notes, send]);
-    const handleMessage = useCallback((event) => {
+      toggleAutoplay: () => {
+        setIsPlaying((v) => !v);
+        send("toggle-autoplay");
+      },
+      setAutoplay: (playing) => {
+        setIsPlaying(playing);
+        send("set-autoplay", { playing });
+      }
+    }),
+    [send]
+  );
+  useImperativeHandle(ref, () => controls, [controls]);
+  useEffect(() => {
+    return registerViewer(id, controls);
+  }, [id, controls]);
+  useEffect(() => {
+    if (!notes || !readyRef.current) return;
+    send("set-notes", { notes });
+  }, [notes, send]);
+  const openAddNote = useCallback((tagId) => {
+    setAddNoteTagId(tagId ?? closestTagId ?? null);
+    setIsAddNoteOpen(true);
+  }, [closestTagId]);
+  const closeAddNote = useCallback(() => {
+    setIsAddNoteOpen(false);
+  }, []);
+  const submitNote = useCallback(
+    (text, isPrivate = true) => {
+      const tagId = addNoteTagId;
+      const lineId = activeLineId;
+      const tag = lines.find((l) => l._id === lineId)?.tags.find((t) => t._id === tagId);
+      const payload = {
+        text,
+        isPrivate,
+        tagId,
+        lineId,
+        position: tag?.position ?? null
+      };
+      onNoteSubmit?.(payload);
+      setIsAddNoteOpen(false);
+    },
+    [addNoteTagId, activeLineId, lines, onNoteSubmit]
+  );
+  const handleMessage = useCallback(
+    (event) => {
       let data = null;
       try {
         data = JSON.parse(event.nativeEvent.data);
@@ -142,45 +226,605 @@ var Viewer = forwardRef(
       }
       if (!data || data.source !== "retor" || !data.type) return;
       switch (data.type) {
-        case "init":
+        case "init": {
+          const payload = data.payload;
+          setProject(payload.project);
+          setLines(payload.lines);
           if (!readyRef.current) {
             readyRef.current = true;
             if (notes) send("set-notes", { notes });
           }
-          onInit?.(data.payload);
+          onInit?.(payload);
           break;
-        case "line-open":
-          onLineOpen?.(data.payload);
+        }
+        case "line-open": {
+          const payload = data.payload;
+          setActiveLineId(payload.lineId);
+          onLineOpen?.(payload);
           break;
+        }
         case "line-close":
+          setActiveLineId(null);
+          setIsPlaying(false);
           onLineClose?.();
           break;
-        case "line-progress":
-          onLineProgress?.(data.payload);
+        case "line-progress": {
+          const payload = data.payload;
+          setProgress(payload.progress);
+          setClosestTagId(payload.closestTagId);
+          onLineProgress?.(payload);
           break;
+        }
         default:
           onMessage?.(data.type, data.payload);
       }
-    }, [notes, send, onInit, onLineOpen, onLineClose, onLineProgress, onMessage]);
-    return /* @__PURE__ */ React.createElement(
-      WebView,
+    },
+    [notes, send, onInit, onLineOpen, onLineClose, onLineProgress, onMessage]
+  );
+  const activeLine = useMemo2(
+    () => lines.find((l) => l._id === activeLineId) ?? null,
+    [lines, activeLineId]
+  );
+  const ctxValue = useMemo2(
+    () => ({
+      project,
+      lines,
+      activeLineId,
+      activeLine,
+      closestTagId,
+      progress,
+      isPlaying,
+      isAddNoteOpen,
+      addNoteTagId,
+      controls,
+      openAddNote,
+      closeAddNote,
+      submitNote,
+      onNoteSubmit
+    }),
+    [project, lines, activeLineId, activeLine, closestTagId, progress, isPlaying, isAddNoteOpen, addNoteTagId, controls, openAddNote, closeAddNote, submitNote, onNoteSubmit]
+  );
+  return /* @__PURE__ */ React2.createElement(RetorBridgeProvider, { value: ctxValue }, /* @__PURE__ */ React2.createElement(View, { style: [styles.root, style] }, /* @__PURE__ */ React2.createElement(
+    WebView,
+    {
+      ref: webviewRef,
+      source: { uri },
+      style: styles.webview,
+      onMessage: handleMessage,
+      originWhitelist: ["*"],
+      javaScriptEnabled: true,
+      domStorageEnabled: true,
+      allowsInlineMediaPlayback: true,
+      mediaPlaybackRequiresUserAction: false
+    }
+  ), children));
+});
+var styles = StyleSheet.create({
+  root: { flex: 1, position: "relative" },
+  webview: { flex: 1 }
+});
+
+// src/Hud.tsx
+import React3 from "react";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+function Hud({ children }) {
+  return /* @__PURE__ */ React3.createElement(View2, { pointerEvents: "box-none", style: StyleSheet2.absoluteFill }, /* @__PURE__ */ React3.createElement(BottomSheetModalProvider, null, children));
+}
+
+// src/ProjectSheet.tsx
+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";
+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,
+    {
+      ref: sheetRef,
+      snapPoints: snapPointsArr,
+      enablePanDownToClose: false,
+      enableDismissOnClose: false,
+      onChange: handleSheetChange,
+      backdropComponent: (props) => /* @__PURE__ */ React4.createElement(
+        BottomSheetBackdrop,
+        {
+          ...props,
+          appearsOnIndex: 1,
+          disappearsOnIndex: 0,
+          opacity: 0.4,
+          pressBehavior: "collapse"
+        }
+      ),
+      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 }, /* @__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() {
+  return /* @__PURE__ */ React4.createElement(LinesCarousel, null, (line) => /* @__PURE__ */ React4.createElement(DefaultLineCard, { line }));
+}
+function LinesCarousel({ children, gap = 12, paddingHorizontal = 16 }) {
+  const { lines } = useRetorBridge();
+  if (lines.length === 0) return null;
+  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 }
+    },
+    lines.map((line, idx) => /* @__PURE__ */ React4.createElement(React4.Fragment, { key: line._id }, children(line, idx)))
+  ));
+}
+function DefaultLineCard({ line }) {
+  const { controls } = useRetorBridge();
+  return /* @__PURE__ */ React4.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)
+  );
+}
+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: {
+    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 },
+  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)",
+    borderRadius: 16,
+    padding: 16
+  },
+  lineCardTitle: { color: "white", fontSize: 14, fontWeight: "600" },
+  lineCardSubtitle: { color: "rgba(255,255,255,0.5)", fontSize: 11, marginTop: 4 }
+});
+
+// src/LineDetailSheet.tsx
+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 } 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,
+    {
+      ref: sheetRef,
+      snapPoints: snapPointsArr,
+      enablePanDownToClose: false,
+      enableDismissOnClose: false,
+      onChange: handleSheetChange,
+      backdropComponent: (props) => /* @__PURE__ */ React5.createElement(
+        BottomSheetBackdrop2,
+        {
+          ...props,
+          appearsOnIndex: 1,
+          disappearsOnIndex: 0,
+          opacity: 0.4,
+          pressBehavior: "collapse"
+        }
+      ),
+      handleIndicatorStyle: styles3.handle,
+      backgroundStyle: styles3.background
+    },
+    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 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,
+      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, 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(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,
       {
-        ref: webviewRef,
-        source: { uri },
-        style,
-        onMessage: handleMessage,
-        originWhitelist: ["*"],
-        javaScriptEnabled: true,
-        domStorageEnabled: true,
-        allowsInlineMediaPlayback: true,
-        mediaPlaybackRequiresUserAction: false
+        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)" },
+  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: 12,
+    borderRadius: 12,
+    gap: 8
+  },
+  tagItemActive: { backgroundColor: "rgba(255,255,255,0.1)" },
+  tagText: { color: "rgba(255,255,255,0.6)", fontSize: 13 },
+  tagTextActive: { color: "white", fontWeight: "600" },
+  tagDescription: { color: "rgba(255,255,255,0.4)", fontSize: 11, marginTop: 2, lineHeight: 14 },
+  tagSubtitle: { color: "rgba(255,255,255,0.4)", fontSize: 10 },
+  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",
+    borderRadius: 14,
+    paddingVertical: 14,
+    alignItems: "center"
+  },
+  doneText: { color: "black", fontSize: 14, fontWeight: "600" }
+});
+
+// src/AddNoteSheet.tsx
+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 BottomSheetView2
+} from "@gorhom/bottom-sheet";
+import { ArrowUp as ArrowUp3, X } from "lucide-react-native";
+function AddNoteSheet({
+  snapPoints = ["50%"],
+  maxLength = 280,
+  placeholder = "Write a note...",
+  renderForm
+}) {
+  const { isAddNoteOpen, addNoteTagId, activeLine, closeAddNote, submitNote } = useRetorBridge();
+  const sheetRef = useRef4(null);
+  const snapPointsArr = useMemo5(() => snapPoints, [snapPoints]);
+  const [text, setText] = useState4("");
+  const [isPrivate, setPrivate] = useState4(true);
+  useEffect4(() => {
+    if (isAddNoteOpen) {
+      sheetRef.current?.present();
+      setText("");
+      setPrivate(true);
+    } else {
+      sheetRef.current?.dismiss();
+    }
+  }, [isAddNoteOpen]);
+  const tag = useMemo5(
+    () => activeLine?.tags.find((t) => t._id === addNoteTagId) ?? null,
+    [activeLine, addNoteTagId]
+  );
+  const handleSubmit = () => {
+    if (!text.trim()) return;
+    submitNote(text.trim(), isPrivate);
+    setText("");
+  };
+  const formApi = {
+    text,
+    setText: (v) => {
+      if (v.length <= maxLength) setText(v);
+    },
+    isPrivate,
+    setPrivate,
+    submit: handleSubmit,
+    close: closeAddNote,
+    maxLength
+  };
+  return /* @__PURE__ */ React6.createElement(
+    BottomSheetModal3,
+    {
+      ref: sheetRef,
+      snapPoints: snapPointsArr,
+      enablePanDownToClose: true,
+      onDismiss: closeAddNote,
+      backdropComponent: (props) => /* @__PURE__ */ React6.createElement(
+        BottomSheetBackdrop3,
+        {
+          ...props,
+          appearsOnIndex: 0,
+          disappearsOnIndex: -1,
+          opacity: 0.6
+        }
+      ),
+      handleIndicatorStyle: styles4.handle,
+      backgroundStyle: styles4.background
+    },
+    /* @__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,
+        onChangeText: (v) => {
+          if (v.length <= maxLength) setText(v);
+        },
+        placeholder,
+        placeholderTextColor: "rgba(255,255,255,0.3)",
+        multiline: true,
+        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(
+      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(
+      Pressable3,
+      {
+        onPress: handleSubmit,
+        disabled: !text.trim(),
+        style: [styles4.submit, !text.trim() && styles4.submitDisabled]
+      },
+      /* @__PURE__ */ React6.createElement(ArrowUp3, { size: 16, color: "black", strokeWidth: 2.5 })
+    ))))
+  );
+}
+var styles4 = StyleSheet5.create({
+  background: { backgroundColor: "rgba(20,20,20,0.98)" },
+  handle: { backgroundColor: "rgba(255,255,255,0.3)" },
+  content: { flex: 1, padding: 24 },
+  form: { flex: 1 },
+  headerRow: { flexDirection: "row", alignItems: "flex-start", marginBottom: 16 },
+  title: { color: "white", fontSize: 18, fontWeight: "600" },
+  subtitle: { color: "rgba(255,255,255,0.5)", fontSize: 12, marginTop: 2 },
+  closeBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: "rgba(255,255,255,0.1)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  input: {
+    flex: 1,
+    color: "white",
+    fontSize: 14,
+    minHeight: 100,
+    paddingVertical: 12
+  },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: "rgba(255,255,255,0.08)",
+    gap: 8
+  },
+  counter: { color: "rgba(255,255,255,0.4)", fontSize: 11 },
+  pill: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 999,
+    backgroundColor: "rgba(255,255,255,0.1)"
+  },
+  pillActive: { backgroundColor: "rgba(59,130,246,0.2)" },
+  pillText: { color: "rgba(255,255,255,0.6)", fontSize: 11 },
+  pillTextActive: { color: "#60a5fa" },
+  submit: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: "white",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  submitDisabled: { opacity: 0.3 }
+});
+
+// src/CoverPhoto.tsx
+import React7 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(
+    WebView2,
+    {
+      source: { uri },
+      style,
+      originWhitelist: ["*"],
+      javaScriptEnabled: true,
+      domStorageEnabled: true,
+      scrollEnabled: false
+    }
+  );
+}
 export {
+  AddNoteSheet,
+  CoverPhoto,
   Hud,
+  LineDetailSheet,
+  LineTagList,
+  LinesCarousel,
   Notes,
+  ProjectSheet,
   Viewer,
+  useActiveLine,
+  useAddNote,
+  useAutoplay,
+  useLineProgress,
+  useLines,
+  useProject,
+  useRetorBridge,
   useViewer
 };