@retor/react-native 0.1.0 → 0.3.0

package/dist/index.js

@@ -30,13 +30,95 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  AddNoteSheet: () => AddNoteSheet,
+  CoverPhoto: () => CoverPhoto,
   Hud: () => Hud,
+  LineDetailSheet: () => LineDetailSheet,
+  LineTagList: () => LineTagList,
+  LinesCarousel: () => LinesCarousel,
   Notes: () => Notes,
+  ProjectSheet: () => ProjectSheet,
   Viewer: () => Viewer,
+  useActiveLine: () => useActiveLine,
+  useAddNote: () => useAddNote,
+  useAutoplay: () => useAutoplay,
+  useLineProgress: () => useLineProgress,
+  useLines: () => useLines,
+  useProject: () => useProject,
+  useRetorBridge: () => useRetorBridge,
   useViewer: () => useViewer
 });
 module.exports = __toCommonJS(index_exports);
+
+// src/context.tsx
 var import_react = __toESM(require("react"));
+var RetorBridgeContext = (0, import_react.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 (0, import_react.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 (0, import_react.useMemo)(() => ({ progress, closestTagId }), [progress, closestTagId]);
+}
+function useAutoplay() {
+  const { isPlaying, controls } = useRetorBridge();
+  return (0, import_react.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 (0, import_react.useMemo)(() => ({
+    isOpen: isAddNoteOpen,
+    tagId: addNoteTagId,
+    open: openAddNote,
+    close: closeAddNote,
+    submit: submitNote
+  }), [isAddNoteOpen, addNoteTagId, openAddNote, closeAddNote, submitNote]);
+}
+function RetorBridgeProvider({ value, children }) {
+  return /* @__PURE__ */ import_react.default.createElement(RetorBridgeContext.Provider, { value }, children);
+}
+
+// src/Viewer.tsx
+var import_react2 = __toESM(require("react"));
+var import_react_native = require("react-native");
 var import_react_native_webview = require("react-native-webview");
 var viewerRegistry = /* @__PURE__ */ new Map();
 var registryListeners = /* @__PURE__ */ new Set();
@@ -55,17 +137,17 @@ function subscribeRegistry(cb) {
   };
 }
 function useViewer(target = "default") {
-  const subscribe = (0, import_react.useCallback)(
+  const subscribe = (0, import_react2.useCallback)(
     (cb) => typeof target === "string" ? subscribeRegistry(cb) : () => {
     },
     [target]
   );
-  const getSnapshot = (0, import_react.useCallback)(
+  const getSnapshot = (0, import_react2.useCallback)(
     () => typeof target === "string" ? viewerRegistry.get(target) ?? null : target.current ?? null,
     [target]
   );
-  const handle = (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  return (0, import_react.useMemo)(() => {
+  const handle = (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react2.useMemo)(() => {
     const resolve = () => typeof target === "string" ? viewerRegistry.get(target) ?? null : target.current ?? null;
     return {
       openLine: (lineId) => {
@@ -86,27 +168,14 @@ function useViewer(target = "default") {
     };
   }, [target, handle]);
 }
-function Hud() {
-  return null;
-}
-Hud.__isHud = true;
-function hasHud(children) {
-  let found = false;
-  import_react.default.Children.forEach(children, (child) => {
-    if (!import_react.default.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;
-  import_react.default.Children.forEach(children, (child) => {
-    if (!import_react.default.isValidElement(child)) return;
+  import_react2.default.Children.forEach(children, (child) => {
+    if (!import_react2.default.isValidElement(child)) return;
     const type = child.type;
     if (type?.__isNotes) {
       const props = child.props;
@@ -115,54 +184,83 @@ function extractNotes(children) {
   });
   return notes;
 }
-var Viewer = (0, import_react.forwardRef)(
-  function Viewer2({ projectId, id = "default", baseUrl = "https://retor.app", onInit, onLineOpen, onLineClose, onLineProgress, onMessage, style, children }, ref) {
-    const webviewRef = (0, import_react.useRef)(null);
-    const showHud = hasHud(children);
-    const notes = extractNotes(children);
-    const readyRef = (0, import_react.useRef)(false);
-    (0, import_react.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 = (0, import_react.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 = (0, import_react.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);
-    }, []);
-    (0, import_react.useImperativeHandle)(ref, () => ({
+var Viewer = (0, import_react2.forwardRef)(function Viewer2({ projectId, id = "default", baseUrl = "https://retor.app", onNoteSubmit, onInit, onLineOpen, onLineClose, onLineProgress, onMessage, style, children }, ref) {
+  const webviewRef = (0, import_react2.useRef)(null);
+  const notes = extractNotes(children);
+  const readyRef = (0, import_react2.useRef)(false);
+  const [project, setProject] = (0, import_react2.useState)(null);
+  const [lines, setLines] = (0, import_react2.useState)([]);
+  const [activeLineId, setActiveLineId] = (0, import_react2.useState)(null);
+  const [closestTagId, setClosestTagId] = (0, import_react2.useState)(null);
+  const [progress, setProgress] = (0, import_react2.useState)(0);
+  const [isPlaying, setIsPlaying] = (0, import_react2.useState)(false);
+  const [isAddNoteOpen, setIsAddNoteOpen] = (0, import_react2.useState)(false);
+  const [addNoteTagId, setAddNoteTagId] = (0, import_react2.useState)(null);
+  const uri = (0, import_react2.useMemo)(() => `${baseUrl}/p/${projectId}?vanilla=true`, [baseUrl, projectId]);
+  const send = (0, import_react2.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 = (0, import_react2.useMemo)(
+    () => ({
       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]);
-    (0, import_react.useEffect)(() => {
-      if (!notes || !readyRef.current) return;
-      send("set-notes", { notes });
-    }, [notes, send]);
-    const handleMessage = (0, import_react.useCallback)((event) => {
+      toggleAutoplay: () => {
+        setIsPlaying((v) => !v);
+        send("toggle-autoplay");
+      },
+      setAutoplay: (playing) => {
+        setIsPlaying(playing);
+        send("set-autoplay", { playing });
+      }
+    }),
+    [send]
+  );
+  (0, import_react2.useImperativeHandle)(ref, () => controls, [controls]);
+  (0, import_react2.useEffect)(() => {
+    return registerViewer(id, controls);
+  }, [id, controls]);
+  (0, import_react2.useEffect)(() => {
+    if (!notes || !readyRef.current) return;
+    send("set-notes", { notes });
+  }, [notes, send]);
+  const openAddNote = (0, import_react2.useCallback)((tagId) => {
+    setAddNoteTagId(tagId ?? closestTagId ?? null);
+    setIsAddNoteOpen(true);
+  }, [closestTagId]);
+  const closeAddNote = (0, import_react2.useCallback)(() => {
+    setIsAddNoteOpen(false);
+  }, []);
+  const submitNote = (0, import_react2.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 = (0, import_react2.useCallback)(
+    (event) => {
       let data = null;
       try {
         data = JSON.parse(event.nativeEvent.data);
@@ -171,46 +269,601 @@ var Viewer = (0, import_react.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__ */ import_react.default.createElement(
-      import_react_native_webview.WebView,
+    },
+    [notes, send, onInit, onLineOpen, onLineClose, onLineProgress, onMessage]
+  );
+  const activeLine = (0, import_react2.useMemo)(
+    () => lines.find((l) => l._id === activeLineId) ?? null,
+    [lines, activeLineId]
+  );
+  const ctxValue = (0, import_react2.useMemo)(
+    () => ({
+      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__ */ import_react2.default.createElement(RetorBridgeProvider, { value: ctxValue }, /* @__PURE__ */ import_react2.default.createElement(import_react_native.View, { style: [styles.root, style] }, /* @__PURE__ */ import_react2.default.createElement(
+    import_react_native_webview.WebView,
+    {
+      ref: webviewRef,
+      source: { uri },
+      style: styles.webview,
+      onMessage: handleMessage,
+      originWhitelist: ["*"],
+      javaScriptEnabled: true,
+      domStorageEnabled: true,
+      allowsInlineMediaPlayback: true,
+      mediaPlaybackRequiresUserAction: false
+    }
+  ), children));
+});
+var styles = import_react_native.StyleSheet.create({
+  root: { flex: 1, position: "relative" },
+  webview: { flex: 1 }
+});
+
+// src/Hud.tsx
+var import_react3 = __toESM(require("react"));
+var import_react_native2 = require("react-native");
+var import_bottom_sheet = require("@gorhom/bottom-sheet");
+function Hud({ children }) {
+  return /* @__PURE__ */ import_react3.default.createElement(import_react_native2.View, { pointerEvents: "box-none", style: import_react_native2.StyleSheet.absoluteFill }, /* @__PURE__ */ import_react3.default.createElement(import_bottom_sheet.BottomSheetModalProvider, null, children));
+}
+
+// src/ProjectSheet.tsx
+var import_react4 = __toESM(require("react"));
+var import_react_native3 = require("react-native");
+var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
+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,
+    {
+      ref: sheetRef,
+      snapPoints: snapPointsArr,
+      enablePanDownToClose: false,
+      enableDismissOnClose: false,
+      onChange: handleSheetChange,
+      backdropComponent: (props) => /* @__PURE__ */ import_react4.default.createElement(
+        import_bottom_sheet2.BottomSheetBackdrop,
+        {
+          ...props,
+          appearsOnIndex: 1,
+          disappearsOnIndex: 0,
+          opacity: 0.4,
+          pressBehavior: "collapse"
+        }
+      ),
+      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 }, /* @__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() {
+  return /* @__PURE__ */ import_react4.default.createElement(LinesCarousel, null, (line) => /* @__PURE__ */ import_react4.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.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 }
+    },
+    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();
+  return /* @__PURE__ */ import_react4.default.createElement(
+    import_react_native3.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)
+  );
+}
+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: {
+    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
+var import_react5 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
+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,
+    {
+      ref: sheetRef,
+      snapPoints: snapPointsArr,
+      enablePanDownToClose: false,
+      enableDismissOnClose: false,
+      onChange: handleSheetChange,
+      backdropComponent: (props) => /* @__PURE__ */ import_react5.default.createElement(
+        import_bottom_sheet3.BottomSheetBackdrop,
+        {
+          ...props,
+          appearsOnIndex: 1,
+          disappearsOnIndex: 0,
+          opacity: 0.4,
+          pressBehavior: "collapse"
+        }
+      ),
+      handleIndicatorStyle: styles3.handle,
+      backgroundStyle: styles3.background
+    },
+    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 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,
+      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, 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.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,
       {
-        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__ */ 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)" },
+  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
+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,
+  placeholder = "Write a note...",
+  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)(() => {
+    if (isAddNoteOpen) {
+      sheetRef.current?.present();
+      setText("");
+      setPrivate(true);
+    } else {
+      sheetRef.current?.dismiss();
+    }
+  }, [isAddNoteOpen]);
+  const tag = (0, import_react6.useMemo)(
+    () => 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__ */ import_react6.default.createElement(
+    import_bottom_sheet4.BottomSheetModal,
+    {
+      ref: sheetRef,
+      snapPoints: snapPointsArr,
+      enablePanDownToClose: true,
+      onDismiss: closeAddNote,
+      backdropComponent: (props) => /* @__PURE__ */ import_react6.default.createElement(
+        import_bottom_sheet4.BottomSheetBackdrop,
+        {
+          ...props,
+          appearsOnIndex: 0,
+          disappearsOnIndex: -1,
+          opacity: 0.6
+        }
+      ),
+      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_lucide_react_native3.X, { size: 14, color: "rgba(255,255,255,0.6)" }))), /* @__PURE__ */ import_react6.default.createElement(
+      import_bottom_sheet4.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__ */ 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,
+      {
+        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,
+      {
+        onPress: handleSubmit,
+        disabled: !text.trim(),
+        style: [styles4.submit, !text.trim() && styles4.submitDisabled]
+      },
+      /* @__PURE__ */ import_react6.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)" },
+  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
+var import_react7 = __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(
+    import_react_native_webview2.WebView,
+    {
+      source: { uri },
+      style,
+      originWhitelist: ["*"],
+      javaScriptEnabled: true,
+      domStorageEnabled: true,
+      scrollEnabled: false
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AddNoteSheet,
+  CoverPhoto,
   Hud,
+  LineDetailSheet,
+  LineTagList,
+  LinesCarousel,
   Notes,
+  ProjectSheet,
   Viewer,
+  useActiveLine,
+  useAddNote,
+  useAutoplay,
+  useLineProgress,
+  useLines,
+  useProject,
+  useRetorBridge,
   useViewer
 });