@runhuman/sensor 0.2.2 → 0.2.3

package/dist/index.mjs

@@ -1154,7 +1154,276 @@ var Runhuman = class _Runhuman {
     }
   }
 };
+
+// src/overlay/RunhumanOverlay.tsx
+import { View as View2, StyleSheet as StyleSheet2 } from "react-native";
+
+// src/overlay/use-sensor-state.ts
+import { useCallback } from "react";
+import { useSyncExternalStore } from "react";
+var IDLE_STATE = { state: "idle", activeJobId: null, sessionId: null };
+function tryGetInstance() {
+  try {
+    return Runhuman.getInstance();
+  } catch {
+    return null;
+  }
+}
+function useSensorState() {
+  const subscribe = useCallback((onStoreChange) => {
+    const instance = tryGetInstance();
+    if (!instance) {
+      const interval = setInterval(() => {
+        if (tryGetInstance()) {
+          clearInterval(interval);
+          onStoreChange();
+        }
+      }, 100);
+      return () => clearInterval(interval);
+    }
+    return instance.getSessionManager().subscribe(onStoreChange);
+  }, []);
+  const getSnapshot = useCallback(() => {
+    const instance = tryGetInstance();
+    if (!instance) return IDLE_STATE;
+    const sm = instance.getSessionManager();
+    return {
+      state: sm.getSnapshot(),
+      activeJobId: sm.getActiveJobId(),
+      sessionId: sm.getSessionId()
+    };
+  }, []);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+// src/overlay/CodeEntryPanel.tsx
+import { useState } from "react";
+import { View, Text, TextInput, Pressable } from "react-native";
+
+// src/overlay/overlay-styles.ts
+import { StyleSheet } from "react-native";
+var BRAND_GREEN = "#22c55e";
+var BRAND_AMBER = "#f59e0b";
+var BRAND_RED = "#ef4444";
+var BRAND_BLUE = "#3b82f6";
+var OVERLAY_BG = "rgba(0, 0, 0, 0.85)";
+var OVERLAY_BORDER = "rgba(255, 255, 255, 0.15)";
+var overlayStyles = StyleSheet.create({
+  // Positioning containers
+  topLeft: { top: 60, left: 16 },
+  topRight: { top: 60, right: 16 },
+  bottomLeft: { bottom: 40, left: 16 },
+  bottomRight: { bottom: 40, right: 16 },
+  // Code entry panel
+  panel: {
+    position: "absolute",
+    zIndex: 99999,
+    backgroundColor: OVERLAY_BG,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: OVERLAY_BORDER,
+    padding: 16,
+    width: 220
+  },
+  panelTitle: {
+    color: "#ffffff",
+    fontSize: 13,
+    fontWeight: "600",
+    marginBottom: 8
+  },
+  input: {
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: OVERLAY_BORDER,
+    color: "#ffffff",
+    fontSize: 18,
+    fontFamily: "monospace",
+    fontWeight: "bold",
+    letterSpacing: 2,
+    padding: 10,
+    textAlign: "center"
+  },
+  inputError: {
+    borderColor: BRAND_RED
+  },
+  submitButton: {
+    backgroundColor: BRAND_BLUE,
+    borderRadius: 8,
+    paddingVertical: 8,
+    marginTop: 8,
+    alignItems: "center"
+  },
+  submitButtonDisabled: {
+    opacity: 0.5
+  },
+  submitButtonText: {
+    color: "#ffffff",
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  errorText: {
+    color: BRAND_RED,
+    fontSize: 11,
+    marginTop: 4,
+    textAlign: "center"
+  },
+  minimizeButton: {
+    position: "absolute",
+    top: 8,
+    right: 8
+  },
+  minimizeText: {
+    color: "rgba(255, 255, 255, 0.5)",
+    fontSize: 16
+  },
+  // Minimized fab (floating action button)
+  fab: {
+    position: "absolute",
+    zIndex: 99999,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: OVERLAY_BG,
+    borderWidth: 1,
+    borderColor: OVERLAY_BORDER,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fabText: {
+    color: "#ffffff",
+    fontSize: 16
+  },
+  // Active indicator dot
+  indicator: {
+    position: "absolute",
+    zIndex: 99999,
+    width: 12,
+    height: 12,
+    borderRadius: 6
+  },
+  indicatorActive: {
+    backgroundColor: BRAND_GREEN
+  },
+  indicatorEnding: {
+    backgroundColor: BRAND_AMBER
+  },
+  indicatorPolling: {
+    backgroundColor: BRAND_BLUE
+  }
+});
+
+// src/overlay/CodeEntryPanel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CodeEntryPanel({ position }) {
+  const [code, setCode] = useState("");
+  const [error, setError] = useState(null);
+  const [resolving, setResolving] = useState(false);
+  const [minimized, setMinimized] = useState(false);
+  const handleSubmit = async () => {
+    const trimmed = code.trim();
+    if (!trimmed) return;
+    setResolving(true);
+    setError(null);
+    const instance = Runhuman.getInstance();
+    const result = await instance.getApiClient().resolveShortCode(trimmed);
+    if (result) {
+      instance.activate(result.jobId);
+    } else {
+      setError("Invalid or expired code");
+      setResolving(false);
+    }
+  };
+  if (minimized) {
+    return /* @__PURE__ */ jsx(Pressable, { style: [overlayStyles.fab, overlayStyles[position]], onPress: () => setMinimized(false), children: /* @__PURE__ */ jsx(Text, { style: overlayStyles.fabText, children: "RH" }) });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: [overlayStyles.panel, overlayStyles[position]], children: [
+    /* @__PURE__ */ jsx(Pressable, { style: overlayStyles.minimizeButton, onPress: () => setMinimized(true), children: /* @__PURE__ */ jsx(Text, { style: overlayStyles.minimizeText, children: "-" }) }),
+    /* @__PURE__ */ jsx(Text, { style: overlayStyles.panelTitle, children: "Runhuman Sensor" }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        style: error ? { ...overlayStyles.input, ...overlayStyles.inputError } : overlayStyles.input,
+        value: code,
+        onChangeText: (text) => {
+          setCode(text.toUpperCase());
+          setError(null);
+        },
+        placeholder: "RH-XXXX",
+        placeholderTextColor: "rgba(255,255,255,0.3)",
+        autoCapitalize: "characters",
+        maxLength: 10,
+        editable: !resolving,
+        onSubmitEditing: handleSubmit
+      }
+    ),
+    error ? /* @__PURE__ */ jsx(Text, { style: overlayStyles.errorText, children: error }) : null,
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        style: resolving ? { ...overlayStyles.submitButton, ...overlayStyles.submitButtonDisabled } : overlayStyles.submitButton,
+        onPress: handleSubmit,
+        disabled: resolving || !code.trim(),
+        children: /* @__PURE__ */ jsx(Text, { style: overlayStyles.submitButtonText, children: resolving ? "Activating..." : "Activate" })
+      }
+    )
+  ] });
+}
+
+// src/overlay/ActiveIndicator.tsx
+import { useEffect, useRef } from "react";
+import { Animated } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var stateStyle = {
+  active: overlayStyles.indicatorActive,
+  ending: overlayStyles.indicatorEnding,
+  polling: overlayStyles.indicatorPolling
+};
+function ActiveIndicator({ state, position }) {
+  const pulse = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    if (state === "active") {
+      const animation = Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulse, { toValue: 0.3, duration: 800, useNativeDriver: true }),
+          Animated.timing(pulse, { toValue: 1, duration: 800, useNativeDriver: true })
+        ])
+      );
+      animation.start();
+      return () => animation.stop();
+    }
+    pulse.setValue(1);
+  }, [state, pulse]);
+  const colorStyle = stateStyle[state];
+  if (!colorStyle) return null;
+  return /* @__PURE__ */ jsx2(Animated.View, { style: [overlayStyles.indicator, overlayStyles[position], colorStyle, { opacity: pulse }] });
+}
+
+// src/overlay/RunhumanOverlay.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var positionMap = {
+  "top-left": "topLeft",
+  "top-right": "topRight",
+  "bottom-left": "bottomLeft",
+  "bottom-right": "bottomRight"
+};
+function RunhumanOverlay({ children, position = "bottom-right" }) {
+  const { state, activeJobId } = useSensorState();
+  const posKey = positionMap[position];
+  return /* @__PURE__ */ jsxs2(View2, { style: styles.container, children: [
+    children,
+    state === "idle" && !activeJobId ? /* @__PURE__ */ jsx3(CodeEntryPanel, { position: posKey }) : null,
+    state !== "idle" ? /* @__PURE__ */ jsx3(ActiveIndicator, { state, position: posKey }) : null
+  ] });
+}
+var styles = StyleSheet2.create({
+  container: {
+    flex: 1
+  }
+});
 export {
-  Runhuman
+  Runhuman,
+  RunhumanOverlay,
+  useSensorState
 };
 //# sourceMappingURL=index.mjs.map