@retor/react-native 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bag of Marshmallows
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,148 @@
+# @retor/react-native
+
+Embed Retor 3D experiences in a React Native / Expo app via `react-native-webview`.
+
+## Installation
+
+Install the peer dependency:
+
+```bash
+# Expo
+npx expo install react-native-webview
+
+# bare React Native
+npm install react-native-webview
+cd ios && pod install
+```
+
+Then install the SDK:
+
+```bash
+npm install @retor/react-native
+# or
+pnpm add @retor/react-native
+# or
+yarn add @retor/react-native
+```
+
+## Quick Start
+
+```tsx
+import { View } from "react-native";
+import { Viewer, Hud } from "@retor/react-native";
+
+export default function Scene() {
+  return (
+    <View style={{ flex: 1 }}>
+      <Viewer projectId="abc123" style={{ flex: 1 }}>
+        <Hud />
+      </Viewer>
+    </View>
+  );
+}
+```
+
+## Custom Bottom Sheet
+
+Listen to events and drive a native UI on top of the viewer. Use the `useViewer` hook from any component to control the viewer without threading refs around.
+
+```tsx
+import { useState } from "react";
+import { View, Text, Pressable, FlatList } from "react-native";
+import { Viewer, useViewer, type RetorLine } from "@retor/react-native";
+
+function Sheet({ lines, activeLine, closestTagId }: {
+  lines: RetorLine[];
+  activeLine: RetorLine | null;
+  closestTagId: string | null;
+}) {
+  const { openLine, exitLine, scrollToTag } = useViewer();
+
+  return (
+    <View style={{ position: "absolute", bottom: 32, left: 16, right: 16 }}>
+      {activeLine ? (
+        <View style={{ backgroundColor: "rgba(0,0,0,0.85)", borderRadius: 24, padding: 16 }}>
+          <Text style={{ color: "white", fontSize: 18, fontWeight: "600" }}>{activeLine.name}</Text>
+          <FlatList
+            data={activeLine.tags}
+            keyExtractor={(t) => t._id}
+            renderItem={({ item }) => (
+              <Pressable onPress={() => scrollToTag(item._id)}>
+                <Text style={{ color: item._id === closestTagId ? "white" : "gray" }}>
+                  {item.name}
+                </Text>
+              </Pressable>
+            )}
+          />
+          <Pressable onPress={() => exitLine()}>
+            <Text style={{ color: "white" }}>Done</Text>
+          </Pressable>
+        </View>
+      ) : (
+        <FlatList
+          horizontal
+          data={lines}
+          keyExtractor={(l) => l._id}
+          renderItem={({ item }) => (
+            <Pressable onPress={() => openLine(item._id)}>
+              <Text style={{ color: "white", padding: 16 }}>{item.name}</Text>
+            </Pressable>
+          )}
+        />
+      )}
+    </View>
+  );
+}
+
+export default function Scene() {
+  const [lines, setLines] = useState<RetorLine[]>([]);
+  const [activeLine, setActiveLine] = useState<RetorLine | null>(null);
+  const [closestTagId, setClosestTagId] = useState<string | null>(null);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Viewer
+        projectId="abc123"
+        style={{ flex: 1 }}
+        onInit={(data) => setLines(data.lines)}
+        onLineOpen={({ lineId }) => {
+          const line = lines.find((l) => l._id === lineId);
+          if (line) setActiveLine(line);
+        }}
+        onLineClose={() => setActiveLine(null)}
+        onLineProgress={({ closestTagId }) => setClosestTagId(closestTagId)}
+      />
+      <Sheet lines={lines} activeLine={activeLine} closestTagId={closestTagId} />
+    </View>
+  );
+}
+```
+
+## Notes on WebView setup
+
+- The SDK sets `originWhitelist=["*"]`, `javaScriptEnabled`, and `domStorageEnabled` automatically
+- Inline media playback is enabled without user gesture
+- Messages are JSON-stringified across the bridge — handled transparently
+- On Android, inbound messages are dispatched via `injectJavaScript`
+
+## Passing in Notes
+
+Use `<Notes>` as a child of the Viewer to push user-generated tags into the 3D scene. Same API as the React SDK — re-render with an updated array to sync changes.
+
+```tsx
+import { Viewer, Notes, type RetorTag } from "@retor/react-native";
+
+const [notes, setNotes] = useState<RetorTag[]>([]);
+
+<Viewer projectId="..." style={{ flex: 1 }}>
+  <Notes notes={notes} />
+</Viewer>
+```
+
+## API
+
+Identical to the [React SDK](https://www.npmjs.com/package/@retor/react) — same props, same imperative methods, same `useViewer` hook.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,113 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+interface RetorTag {
+    _id: string;
+    name: string;
+    description?: string;
+    subtitle?: string;
+    index?: number;
+    position: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    split?: boolean;
+    color?: string;
+    tagType?: string;
+    iconName?: string;
+}
+interface RetorLine {
+    _id: string;
+    name: string;
+    description?: string;
+    subtitle?: string;
+    autoplay?: boolean;
+    autoplaySpeed?: number;
+    scrollType?: "track" | "observe";
+    closed?: boolean;
+    notesSupported?: boolean;
+    tags: RetorTag[];
+}
+interface RetorProject {
+    _id: string;
+    name?: string;
+    description?: string;
+    startViewId?: string;
+}
+interface InitPayload {
+    project: RetorProject;
+    lines: RetorLine[];
+}
+interface LineProgressPayload {
+    progress: number;
+    closestTagId: string | null;
+}
+interface ViewerHandle {
+    openLine: (lineId: string) => void;
+    exitLine: () => void;
+    scrollToTag: (tagId: string) => void;
+    toggleAutoplay: () => void;
+    setAutoplay: (playing: boolean) => void;
+}
+interface ViewerProps {
+    projectId: string;
+    /** Identifier for this viewer instance. Used by `useViewer(id)`. Defaults to "default". */
+    id?: string;
+    /** Base URL where Retor is hosted. Defaults to https://retor.app */
+    baseUrl?: string;
+    onInit?: (data: InitPayload) => void;
+    onLineOpen?: (data: {
+        lineId: string;
+    }) => void;
+    onLineClose?: () => void;
+    onLineProgress?: (data: LineProgressPayload) => void;
+    onMessage?: (type: string, payload: unknown) => void;
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+}
+/**
+ * Hook that returns a destructured set of viewer controls.
+ *
+ * Usage with an ID (default "default"):
+ * ```tsx
+ * <Viewer projectId="..." />            // id defaults to "default"
+ * const { openLine, exitLine } = useViewer();
+ * ```
+ *
+ * With an explicit ID (multiple viewers on one screen):
+ * ```tsx
+ * <Viewer id="left" projectId="..." />
+ * <Viewer id="right" projectId="..." />
+ * const left = useViewer("left");
+ * left.openLine("...");
+ * ```
+ *
+ * With a ref (if you prefer imperative style):
+ * ```tsx
+ * const ref = useRef<ViewerHandle>(null);
+ * <Viewer ref={ref} projectId="..." />
+ * const { openLine } = useViewer(ref);
+ * ```
+ */
+declare function useViewer(target?: string | React.RefObject<ViewerHandle | null>): ViewerHandle;
+/**
+ * Include as a child of `<Viewer>` to show Retor's built-in UI
+ * (info card, tag list, autoplay controls). Without it, the viewer runs in
+ * vanilla mode — you build your own UI around the 3D scene using the props.
+ */
+declare function Hud(): React.ReactElement | null;
+interface NotesProps {
+    /** Array of notes (same shape as RetorTag) to pass into the 3D scene. */
+    notes: RetorTag[];
+}
+/**
+ * Pass user-generated notes into the Retor scene as a child of `<Viewer>`.
+ * The notes use the same shape as a RetorTag — Retor will render them in
+ * the scene and tag lists. Persistence is handled entirely by your app:
+ * re-render with an updated `notes` array to sync changes.
+ */
+declare function Notes(_props: NotesProps): React.ReactElement | null;
+declare const Viewer: React.ForwardRefExoticComponent<ViewerProps & React.RefAttributes<ViewerHandle>>;
+
+export { Hud, type InitPayload, type LineProgressPayload, Notes, type NotesProps, type RetorLine, type RetorProject, type RetorTag, Viewer, type ViewerHandle, type ViewerProps, useViewer };

package/dist/index.d.ts

@@ -0,0 +1,113 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+interface RetorTag {
+    _id: string;
+    name: string;
+    description?: string;
+    subtitle?: string;
+    index?: number;
+    position: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    split?: boolean;
+    color?: string;
+    tagType?: string;
+    iconName?: string;
+}
+interface RetorLine {
+    _id: string;
+    name: string;
+    description?: string;
+    subtitle?: string;
+    autoplay?: boolean;
+    autoplaySpeed?: number;
+    scrollType?: "track" | "observe";
+    closed?: boolean;
+    notesSupported?: boolean;
+    tags: RetorTag[];
+}
+interface RetorProject {
+    _id: string;
+    name?: string;
+    description?: string;
+    startViewId?: string;
+}
+interface InitPayload {
+    project: RetorProject;
+    lines: RetorLine[];
+}
+interface LineProgressPayload {
+    progress: number;
+    closestTagId: string | null;
+}
+interface ViewerHandle {
+    openLine: (lineId: string) => void;
+    exitLine: () => void;
+    scrollToTag: (tagId: string) => void;
+    toggleAutoplay: () => void;
+    setAutoplay: (playing: boolean) => void;
+}
+interface ViewerProps {
+    projectId: string;
+    /** Identifier for this viewer instance. Used by `useViewer(id)`. Defaults to "default". */
+    id?: string;
+    /** Base URL where Retor is hosted. Defaults to https://retor.app */
+    baseUrl?: string;
+    onInit?: (data: InitPayload) => void;
+    onLineOpen?: (data: {
+        lineId: string;
+    }) => void;
+    onLineClose?: () => void;
+    onLineProgress?: (data: LineProgressPayload) => void;
+    onMessage?: (type: string, payload: unknown) => void;
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+}
+/**
+ * Hook that returns a destructured set of viewer controls.
+ *
+ * Usage with an ID (default "default"):
+ * ```tsx
+ * <Viewer projectId="..." />            // id defaults to "default"
+ * const { openLine, exitLine } = useViewer();
+ * ```
+ *
+ * With an explicit ID (multiple viewers on one screen):
+ * ```tsx
+ * <Viewer id="left" projectId="..." />
+ * <Viewer id="right" projectId="..." />
+ * const left = useViewer("left");
+ * left.openLine("...");
+ * ```
+ *
+ * With a ref (if you prefer imperative style):
+ * ```tsx
+ * const ref = useRef<ViewerHandle>(null);
+ * <Viewer ref={ref} projectId="..." />
+ * const { openLine } = useViewer(ref);
+ * ```
+ */
+declare function useViewer(target?: string | React.RefObject<ViewerHandle | null>): ViewerHandle;
+/**
+ * Include as a child of `<Viewer>` to show Retor's built-in UI
+ * (info card, tag list, autoplay controls). Without it, the viewer runs in
+ * vanilla mode — you build your own UI around the 3D scene using the props.
+ */
+declare function Hud(): React.ReactElement | null;
+interface NotesProps {
+    /** Array of notes (same shape as RetorTag) to pass into the 3D scene. */
+    notes: RetorTag[];
+}
+/**
+ * Pass user-generated notes into the Retor scene as a child of `<Viewer>`.
+ * The notes use the same shape as a RetorTag — Retor will render them in
+ * the scene and tag lists. Persistence is handled entirely by your app:
+ * re-render with an updated `notes` array to sync changes.
+ */
+declare function Notes(_props: NotesProps): React.ReactElement | null;
+declare const Viewer: React.ForwardRefExoticComponent<ViewerProps & React.RefAttributes<ViewerHandle>>;
+
+export { Hud, type InitPayload, type LineProgressPayload, Notes, type NotesProps, type RetorLine, type RetorProject, type RetorTag, Viewer, type ViewerHandle, type ViewerProps, useViewer };

package/dist/index.js

@@ -0,0 +1,216 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Hud: () => Hud,
+  Notes: () => Notes,
+  Viewer: () => Viewer,
+  useViewer: () => useViewer
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = __toESM(require("react"));
+var import_react_native_webview = require("react-native-webview");
+var viewerRegistry = /* @__PURE__ */ new Map();
+var registryListeners = /* @__PURE__ */ new Set();
+function registerViewer(id, handle) {
+  viewerRegistry.set(id, handle);
+  registryListeners.forEach((l) => l());
+  return () => {
+    viewerRegistry.delete(id);
+    registryListeners.forEach((l) => l());
+  };
+}
+function subscribeRegistry(cb) {
+  registryListeners.add(cb);
+  return () => {
+    registryListeners.delete(cb);
+  };
+}
+function useViewer(target = "default") {
+  const subscribe = (0, import_react.useCallback)(
+    (cb) => typeof target === "string" ? subscribeRegistry(cb) : () => {
+    },
+    [target]
+  );
+  const getSnapshot = (0, import_react.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 resolve = () => typeof target === "string" ? viewerRegistry.get(target) ?? null : target.current ?? null;
+    return {
+      openLine: (lineId) => {
+        resolve()?.openLine(lineId);
+      },
+      exitLine: () => {
+        resolve()?.exitLine();
+      },
+      scrollToTag: (tagId) => {
+        resolve()?.scrollToTag(tagId);
+      },
+      toggleAutoplay: () => {
+        resolve()?.toggleAutoplay();
+      },
+      setAutoplay: (playing) => {
+        resolve()?.setAutoplay(playing);
+      }
+    };
+  }, [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;
+    const type = child.type;
+    if (type?.__isNotes) {
+      const props = child.props;
+      notes = props.notes ?? [];
+    }
+  });
+  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, () => ({
+      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) => {
+      let data = null;
+      try {
+        data = JSON.parse(event.nativeEvent.data);
+      } catch {
+        return;
+      }
+      if (!data || data.source !== "retor" || !data.type) return;
+      switch (data.type) {
+        case "init":
+          if (!readyRef.current) {
+            readyRef.current = true;
+            if (notes) send("set-notes", { notes });
+          }
+          onInit?.(data.payload);
+          break;
+        case "line-open":
+          onLineOpen?.(data.payload);
+          break;
+        case "line-close":
+          onLineClose?.();
+          break;
+        case "line-progress":
+          onLineProgress?.(data.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,
+      {
+        ref: webviewRef,
+        source: { uri },
+        style,
+        onMessage: handleMessage,
+        originWhitelist: ["*"],
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        allowsInlineMediaPlayback: true,
+        mediaPlaybackRequiresUserAction: false
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Hud,
+  Notes,
+  Viewer,
+  useViewer
+});

package/dist/index.mjs

@@ -0,0 +1,186 @@
+// src/index.tsx
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useSyncExternalStore
+} from "react";
+import { WebView } from "react-native-webview";
+var viewerRegistry = /* @__PURE__ */ new Map();
+var registryListeners = /* @__PURE__ */ new Set();
+function registerViewer(id, handle) {
+  viewerRegistry.set(id, handle);
+  registryListeners.forEach((l) => l());
+  return () => {
+    viewerRegistry.delete(id);
+    registryListeners.forEach((l) => l());
+  };
+}
+function subscribeRegistry(cb) {
+  registryListeners.add(cb);
+  return () => {
+    registryListeners.delete(cb);
+  };
+}
+function useViewer(target = "default") {
+  const subscribe = useCallback(
+    (cb) => typeof target === "string" ? subscribeRegistry(cb) : () => {
+    },
+    [target]
+  );
+  const getSnapshot = useCallback(
+    () => typeof target === "string" ? viewerRegistry.get(target) ?? null : target.current ?? null,
+    [target]
+  );
+  const handle = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return useMemo(() => {
+    const resolve = () => typeof target === "string" ? viewerRegistry.get(target) ?? null : target.current ?? null;
+    return {
+      openLine: (lineId) => {
+        resolve()?.openLine(lineId);
+      },
+      exitLine: () => {
+        resolve()?.exitLine();
+      },
+      scrollToTag: (tagId) => {
+        resolve()?.scrollToTag(tagId);
+      },
+      toggleAutoplay: () => {
+        resolve()?.toggleAutoplay();
+      },
+      setAutoplay: (playing) => {
+        resolve()?.setAutoplay(playing);
+      }
+    };
+  }, [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;
+    const type = child.type;
+    if (type?.__isNotes) {
+      const props = child.props;
+      notes = props.notes ?? [];
+    }
+  });
+  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, () => ({
+      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) => {
+      let data = null;
+      try {
+        data = JSON.parse(event.nativeEvent.data);
+      } catch {
+        return;
+      }
+      if (!data || data.source !== "retor" || !data.type) return;
+      switch (data.type) {
+        case "init":
+          if (!readyRef.current) {
+            readyRef.current = true;
+            if (notes) send("set-notes", { notes });
+          }
+          onInit?.(data.payload);
+          break;
+        case "line-open":
+          onLineOpen?.(data.payload);
+          break;
+        case "line-close":
+          onLineClose?.();
+          break;
+        case "line-progress":
+          onLineProgress?.(data.payload);
+          break;
+        default:
+          onMessage?.(data.type, data.payload);
+      }
+    }, [notes, send, onInit, onLineOpen, onLineClose, onLineProgress, onMessage]);
+    return /* @__PURE__ */ React.createElement(
+      WebView,
+      {
+        ref: webviewRef,
+        source: { uri },
+        style,
+        onMessage: handleMessage,
+        originWhitelist: ["*"],
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        allowsInlineMediaPlayback: true,
+        mediaPlaybackRequiresUserAction: false
+      }
+    );
+  }
+);
+export {
+  Hud,
+  Notes,
+  Viewer,
+  useViewer
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@retor/react-native",
+  "version": "0.1.0",
+  "description": "React Native SDK for embedding Retor 3D experiences",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "retor",
+    "3d",
+    "gaussian-splat",
+    "react-native",
+    "expo"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.72",
+    "react-native-webview": ">=13"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "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",
+    "dev": "tsup src/index.tsx --format cjs,esm --dts --watch --external react --external react-native --external react-native-webview",
+    "typecheck": "tsc --noEmit"
+  }
+}