@retor/react-native 0.2.0 → 0.3.1

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,72 +185,42 @@ 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.
- */
 declare function LineDetailSheet({ snapPoints, renderHeader, children }: LineDetailSheetProps): React.JSX.Element;
 interface LineTagListProps {
     children: (tag: RetorTag, isActive: boolean) => React.ReactNode;
+    /** Optional header rendered above the list (used internally for the default header). */
+    listHeader?: 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;
+declare function LineTagList({ children, listHeader }: LineTagListProps): React.JSX.Element | null;
 
 interface AddNoteSheetProps {
     /** Snap points. Defaults to ["50%"]. */
@@ -289,4 +259,13 @@ interface CoverPhotoProps {
  */
 declare function CoverPhoto({ projectId, baseUrl, style }: CoverPhotoProps): React.JSX.Element;
 
-export { type AddNoteFormApi, AddNoteSheet, type AddNoteSheetProps, CoverPhoto, type CoverPhotoProps, Hud, type HudProps, type InitPayload, LineDetailSheet, type LineDetailSheetProps, type LineProgressPayload, LineTagList, type LineTagListProps, LinesCarousel, type LinesCarouselProps, type NoteSubmitPayload, Notes, type NotesProps, ProjectSheet, type ProjectSheetProps, type RetorBridgeContextValue, type RetorLine, type RetorProject, type RetorTag, Viewer, type ViewerHandle, type ViewerProps, useActiveLine, useAddNote, useAutoplay, useLineProgress, useLines, useProject, useRetorBridge, useViewer };
+/**
+ * Default background component for the SDK's bottom sheets.
+ * Renders an iOS-style blur with a dark tint overlay so the 3D scene
+ * remains visible behind the sheet.
+ */
+declare function BlurBackground({ style }: {
+    style?: StyleProp<ViewStyle>;
+}): React.JSX.Element;
+
+export { type AddNoteFormApi, AddNoteSheet, type AddNoteSheetProps, BlurBackground, CoverPhoto, type CoverPhotoProps, Hud, type HudProps, type InitPayload, LineDetailSheet, type LineDetailSheetProps, type LineProgressPayload, LineTagList, type LineTagListProps, LinesCarousel, type LinesCarouselProps, type NoteSubmitPayload, Notes, type NotesProps, ProjectSheet, type ProjectSheetProps, type RetorBridgeContextValue, type RetorLine, type RetorProject, type RetorTag, Viewer, type ViewerHandle, type ViewerProps, useActiveLine, useAddNote, useAutoplay, useLineProgress, useLines, useProject, useRetorBridge, useViewer };

package/dist/index.d.ts

@@ -185,72 +185,42 @@ 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.
- */
 declare function LineDetailSheet({ snapPoints, renderHeader, children }: LineDetailSheetProps): React.JSX.Element;
 interface LineTagListProps {
     children: (tag: RetorTag, isActive: boolean) => React.ReactNode;
+    /** Optional header rendered above the list (used internally for the default header). */
+    listHeader?: 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;
+declare function LineTagList({ children, listHeader }: LineTagListProps): React.JSX.Element | null;
 
 interface AddNoteSheetProps {
     /** Snap points. Defaults to ["50%"]. */
@@ -289,4 +259,13 @@ interface CoverPhotoProps {
  */
 declare function CoverPhoto({ projectId, baseUrl, style }: CoverPhotoProps): React.JSX.Element;
 
-export { type AddNoteFormApi, AddNoteSheet, type AddNoteSheetProps, CoverPhoto, type CoverPhotoProps, Hud, type HudProps, type InitPayload, LineDetailSheet, type LineDetailSheetProps, type LineProgressPayload, LineTagList, type LineTagListProps, LinesCarousel, type LinesCarouselProps, type NoteSubmitPayload, Notes, type NotesProps, ProjectSheet, type ProjectSheetProps, type RetorBridgeContextValue, type RetorLine, type RetorProject, type RetorTag, Viewer, type ViewerHandle, type ViewerProps, useActiveLine, useAddNote, useAutoplay, useLineProgress, useLines, useProject, useRetorBridge, useViewer };
+/**
+ * Default background component for the SDK's bottom sheets.
+ * Renders an iOS-style blur with a dark tint overlay so the 3D scene
+ * remains visible behind the sheet.
+ */
+declare function BlurBackground({ style }: {
+    style?: StyleProp<ViewStyle>;
+}): React.JSX.Element;
+
+export { type AddNoteFormApi, AddNoteSheet, type AddNoteSheetProps, BlurBackground, CoverPhoto, type CoverPhotoProps, Hud, type HudProps, type InitPayload, LineDetailSheet, type LineDetailSheetProps, type LineProgressPayload, LineTagList, type LineTagListProps, LinesCarousel, type LinesCarouselProps, type NoteSubmitPayload, Notes, type NotesProps, ProjectSheet, type ProjectSheetProps, type RetorBridgeContextValue, type RetorLine, type RetorProject, type RetorTag, Viewer, type ViewerHandle, type ViewerProps, useActiveLine, useAddNote, useAutoplay, useLineProgress, useLines, useProject, useRetorBridge, useViewer };