@np-dev/ui-ai-anotation 0.1.0

package/dist/esm/index.native.js

@@ -0,0 +1,1012 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/index.native.tsx
+import { View as View6 } from "react-native";
+
+// src/store.tsx
+import { createContext, useContext, useReducer } from "react";
+import { jsx } from "react/jsx-runtime";
+var initialState = {
+  mode: "disabled",
+  annotations: [],
+  hoveredElement: null,
+  hoveredComponentInfo: null,
+  isMinimized: false,
+  showList: false
+};
+var AnnotationContext = createContext(void 0);
+function reducer(state, action) {
+  switch (action.type) {
+    case "SET_MODE":
+      return { ...state, mode: action.payload };
+    case "ADD_ANNOTATION":
+      return { ...state, annotations: [...state.annotations, action.payload] };
+    case "REMOVE_ANNOTATION":
+      return {
+        ...state,
+        annotations: state.annotations.filter((a) => a.id !== action.payload)
+      };
+    case "CLEAR_ALL_ANNOTATIONS":
+      return {
+        ...state,
+        annotations: []
+      };
+    case "SET_HOVERED":
+      if (state.hoveredElement === action.payload.element) return state;
+      return {
+        ...state,
+        hoveredElement: action.payload.element,
+        hoveredComponentInfo: action.payload.name ? { name: action.payload.name, details: action.payload.details } : null
+      };
+    case "RESET_HOVER":
+      return { ...state, hoveredElement: null, hoveredComponentInfo: null };
+    case "TOGGLE_MINIMIZED":
+      return { ...state, isMinimized: !state.isMinimized };
+    case "TOGGLE_LIST":
+      return { ...state, showList: !state.showList };
+    default:
+      return state;
+  }
+}
+function AiAnnotationProvider({ children }) {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return /* @__PURE__ */ jsx(AnnotationContext.Provider, { value: { state, dispatch }, children });
+}
+function useAiAnnotation() {
+  const context = useContext(AnnotationContext);
+  if (!context) {
+    throw new Error("useAiAnnotation must be used within an AiAnnotationProvider");
+  }
+  return context;
+}
+
+// src/components/native/Toolbar.tsx
+import { useState as useState3 } from "react";
+import {
+  View as View5,
+  Text as Text4,
+  TouchableOpacity as TouchableOpacity4,
+  StyleSheet as StyleSheet5
+} from "react-native";
+
+// src/components/native/Draggable.tsx
+import { useRef } from "react";
+import {
+  PanResponder,
+  Animated,
+  StyleSheet
+} from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Draggable({ children, initialPos = { x: 20, y: 20 }, style }) {
+  const pan = useRef(new Animated.ValueXY(initialPos)).current;
+  const lastOffset = useRef(initialPos);
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        pan.setOffset(lastOffset.current);
+        pan.setValue({ x: 0, y: 0 });
+      },
+      onPanResponderMove: Animated.event(
+        [null, { dx: pan.x, dy: pan.y }],
+        { useNativeDriver: false }
+      ),
+      onPanResponderRelease: (_e, gestureState) => {
+        lastOffset.current = {
+          x: lastOffset.current.x + gestureState.dx,
+          y: lastOffset.current.y + gestureState.dy
+        };
+        pan.flattenOffset();
+      }
+    })
+  ).current;
+  return /* @__PURE__ */ jsx2(
+    Animated.View,
+    {
+      ...panResponder.panHandlers,
+      style: [
+        styles.container,
+        style,
+        {
+          transform: [{ translateX: pan.x }, { translateY: pan.y }]
+        }
+      ],
+      children
+    }
+  );
+}
+var styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    zIndex: 9999
+  }
+});
+
+// src/components/native/Highlighter.tsx
+import { useState as useState2, useCallback } from "react";
+import {
+  View as View3,
+  Text as Text2,
+  TouchableOpacity as TouchableOpacity2,
+  StyleSheet as StyleSheet3,
+  Dimensions
+} from "react-native";
+
+// src/components/native/AnnotationInput.tsx
+import { useState, useEffect } from "react";
+import {
+  View as View2,
+  Text,
+  Modal,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet as StyleSheet2,
+  Animated as Animated2,
+  KeyboardAvoidingView,
+  Platform
+} from "react-native";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function AnnotationInput({ onClose, componentName }) {
+  const { dispatch } = useAiAnnotation();
+  const [note, setNote] = useState("");
+  const [fadeAnim] = useState(new Animated2.Value(0));
+  const [scaleAnim] = useState(new Animated2.Value(0.95));
+  useEffect(() => {
+    Animated2.parallel([
+      Animated2.timing(fadeAnim, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true
+      }),
+      Animated2.spring(scaleAnim, {
+        toValue: 1,
+        friction: 8,
+        useNativeDriver: true
+      })
+    ]).start();
+  }, []);
+  const handleClose = () => {
+    Animated2.parallel([
+      Animated2.timing(fadeAnim, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true
+      }),
+      Animated2.timing(scaleAnim, {
+        toValue: 0.95,
+        duration: 150,
+        useNativeDriver: true
+      })
+    ]).start(() => {
+      onClose();
+    });
+  };
+  const handleSubmit = () => {
+    if (!note.trim()) return;
+    dispatch({
+      type: "ADD_ANNOTATION",
+      payload: {
+        id: Date.now().toString(),
+        componentName,
+        note: note.trim(),
+        timestamp: Date.now()
+      }
+    });
+    handleClose();
+  };
+  return /* @__PURE__ */ jsx3(
+    Modal,
+    {
+      visible: true,
+      transparent: true,
+      animationType: "none",
+      onRequestClose: handleClose,
+      children: /* @__PURE__ */ jsx3(
+        KeyboardAvoidingView,
+        {
+          behavior: Platform.OS === "ios" ? "padding" : "height",
+          style: styles2.keyboardView,
+          children: /* @__PURE__ */ jsx3(Animated2.View, { style: [styles2.overlay, { opacity: fadeAnim }], children: /* @__PURE__ */ jsx3(
+            TouchableOpacity,
+            {
+              style: styles2.backdropTouchable,
+              activeOpacity: 1,
+              onPress: handleClose,
+              children: /* @__PURE__ */ jsx3(
+                Animated2.View,
+                {
+                  style: [
+                    styles2.container,
+                    {
+                      opacity: fadeAnim,
+                      transform: [{ scale: scaleAnim }]
+                    }
+                  ],
+                  children: /* @__PURE__ */ jsxs(TouchableOpacity, { activeOpacity: 1, children: [
+                    /* @__PURE__ */ jsxs(View2, { style: styles2.header, children: [
+                      /* @__PURE__ */ jsx3(Text, { style: styles2.title, children: "Add Annotation" }),
+                      /* @__PURE__ */ jsx3(TouchableOpacity, { onPress: handleClose, style: styles2.closeButton, children: /* @__PURE__ */ jsx3(Text, { style: styles2.closeButtonText, children: "\u2715" }) })
+                    ] }),
+                    /* @__PURE__ */ jsxs(Text, { style: styles2.componentLabel, children: [
+                      "Component: ",
+                      /* @__PURE__ */ jsx3(Text, { style: styles2.componentName, children: componentName })
+                    ] }),
+                    /* @__PURE__ */ jsx3(
+                      TextInput,
+                      {
+                        style: styles2.textInput,
+                        value: note,
+                        onChangeText: setNote,
+                        placeholder: "Describe what this component does...",
+                        placeholderTextColor: "#6b7280",
+                        multiline: true,
+                        numberOfLines: 4,
+                        textAlignVertical: "top",
+                        autoFocus: true
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(View2, { style: styles2.buttonContainer, children: [
+                      /* @__PURE__ */ jsx3(TouchableOpacity, { style: styles2.cancelButton, onPress: handleClose, children: /* @__PURE__ */ jsx3(Text, { style: styles2.cancelButtonText, children: "Cancel" }) }),
+                      /* @__PURE__ */ jsx3(TouchableOpacity, { style: styles2.submitButton, onPress: handleSubmit, children: /* @__PURE__ */ jsx3(Text, { style: styles2.submitButtonText, children: "Save Annotation" }) })
+                    ] })
+                  ] })
+                }
+              )
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+var styles2 = StyleSheet2.create({
+  keyboardView: {
+    flex: 1
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  backdropTouchable: {
+    flex: 1,
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  container: {
+    backgroundColor: "#1e1e1e",
+    borderRadius: 8,
+    padding: 20,
+    width: "90%",
+    maxWidth: 400
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 16
+  },
+  title: {
+    color: "#e5e7eb",
+    fontSize: 18,
+    fontWeight: "bold"
+  },
+  closeButton: {
+    padding: 4
+  },
+  closeButtonText: {
+    color: "#e5e7eb",
+    fontSize: 20
+  },
+  componentLabel: {
+    color: "#9ca3af",
+    fontSize: 14,
+    marginBottom: 12
+  },
+  componentName: {
+    color: "#e5e7eb",
+    fontWeight: "bold"
+  },
+  textInput: {
+    backgroundColor: "#2d2d2d",
+    borderWidth: 1,
+    borderColor: "#404040",
+    borderRadius: 4,
+    padding: 8,
+    color: "white",
+    height: 100,
+    marginBottom: 16,
+    fontSize: 14
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 8
+  },
+  cancelButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: "#404040"
+  },
+  cancelButtonText: {
+    color: "white",
+    fontSize: 14
+  },
+  submitButton: {
+    backgroundColor: "#3b82f6",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 4
+  },
+  submitButtonText: {
+    color: "white",
+    fontSize: 14
+  }
+});
+
+// src/components/native/Highlighter.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Highlighter({ onInspect }) {
+  const { state, dispatch } = useAiAnnotation();
+  const { mode } = state;
+  const [highlightRect, setHighlightRect] = useState2(null);
+  const [componentName, setComponentName] = useState2("");
+  const [showInput, setShowInput] = useState2(false);
+  const [showTooltip, setShowTooltip] = useState2(false);
+  const [tooltipPos, setTooltipPos] = useState2({ x: 0, y: 0 });
+  const screenDimensions = Dimensions.get("window");
+  const handleTouch = useCallback(
+    (event) => {
+      if (mode !== "inspecting") return;
+      const { pageX, pageY } = event.nativeEvent;
+      if (onInspect) {
+        const result = onInspect(event);
+        if (result) {
+          setHighlightRect(result.rect);
+          setComponentName(result.name);
+          setTooltipPos({ x: pageX, y: pageY });
+          setShowTooltip(true);
+          return;
+        }
+      }
+      setTooltipPos({ x: pageX, y: pageY });
+      setShowTooltip(true);
+      setComponentName("TouchedComponent");
+      setHighlightRect({
+        x: pageX - 50,
+        y: pageY - 50,
+        width: 100,
+        height: 100
+      });
+    },
+    [mode, onInspect]
+  );
+  const handleAddAnnotation = () => {
+    setShowInput(true);
+    setShowTooltip(false);
+  };
+  const handleCloseInput = () => {
+    setShowInput(false);
+    setHighlightRect(null);
+    setComponentName("");
+  };
+  const handleDismiss = () => {
+    setShowTooltip(false);
+    setHighlightRect(null);
+    setComponentName("");
+  };
+  if (mode !== "inspecting") return null;
+  const tooltipWidth = 120;
+  const tooltipHeight = 50;
+  let adjustedX = tooltipPos.x + 16;
+  let adjustedY = tooltipPos.y + 16;
+  if (adjustedX + tooltipWidth > screenDimensions.width) {
+    adjustedX = tooltipPos.x - tooltipWidth - 16;
+  }
+  if (adjustedY + tooltipHeight > screenDimensions.height) {
+    adjustedY = tooltipPos.y - tooltipHeight - 16;
+  }
+  return /* @__PURE__ */ jsxs2(View3, { style: StyleSheet3.absoluteFill, pointerEvents: "box-none", children: [
+    /* @__PURE__ */ jsx4(
+      TouchableOpacity2,
+      {
+        style: styles3.touchOverlay,
+        activeOpacity: 1,
+        onPress: handleTouch
+      }
+    ),
+    highlightRect && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx4(
+        View3,
+        {
+          style: [
+            styles3.highlight,
+            {
+              left: highlightRect.x - 2,
+              top: highlightRect.y - 2,
+              width: highlightRect.width + 4,
+              height: highlightRect.height + 4
+            }
+          ],
+          pointerEvents: "none"
+        }
+      ),
+      componentName && /* @__PURE__ */ jsx4(
+        View3,
+        {
+          style: [
+            styles3.nameLabel,
+            {
+              left: highlightRect.x,
+              top: highlightRect.y - 24
+            }
+          ],
+          pointerEvents: "none",
+          children: /* @__PURE__ */ jsx4(Text2, { style: styles3.nameLabelText, children: componentName })
+        }
+      )
+    ] }),
+    showTooltip && /* @__PURE__ */ jsxs2(
+      View3,
+      {
+        style: [
+          styles3.tooltip,
+          {
+            left: adjustedX,
+            top: adjustedY
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx4(TouchableOpacity2, { style: styles3.tooltipButton, onPress: handleAddAnnotation, children: /* @__PURE__ */ jsx4(Text2, { style: styles3.tooltipButtonText, children: "+" }) }),
+          /* @__PURE__ */ jsx4(TouchableOpacity2, { style: styles3.dismissButton, onPress: handleDismiss, children: /* @__PURE__ */ jsx4(Text2, { style: styles3.dismissButtonText, children: "\u2715" }) })
+        ]
+      }
+    ),
+    showInput && /* @__PURE__ */ jsx4(AnnotationInput, { onClose: handleCloseInput, componentName: componentName || "Unknown" })
+  ] });
+}
+var styles3 = StyleSheet3.create({
+  touchOverlay: {
+    ...StyleSheet3.absoluteFillObject,
+    backgroundColor: "transparent"
+  },
+  highlight: {
+    position: "absolute",
+    borderWidth: 2,
+    borderColor: "#3b82f6",
+    borderRadius: 4,
+    backgroundColor: "rgba(59, 130, 246, 0.1)"
+  },
+  nameLabel: {
+    position: "absolute",
+    backgroundColor: "#3b82f6",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  nameLabelText: {
+    color: "white",
+    fontSize: 12,
+    fontFamily: "monospace"
+  },
+  tooltip: {
+    position: "absolute",
+    flexDirection: "row",
+    gap: 6,
+    padding: 6,
+    backgroundColor: "rgba(0, 0, 0, 0.9)",
+    borderRadius: 8,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 8
+  },
+  tooltipButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 6,
+    backgroundColor: "#3b82f6",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  tooltipButtonText: {
+    color: "white",
+    fontSize: 18,
+    fontWeight: "bold"
+  },
+  dismissButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 6,
+    backgroundColor: "#6b7280",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  dismissButtonText: {
+    color: "white",
+    fontSize: 14
+  }
+});
+
+// src/components/native/AnnotationList.tsx
+import {
+  View as View4,
+  Text as Text3,
+  Modal as Modal2,
+  TouchableOpacity as TouchableOpacity3,
+  ScrollView,
+  StyleSheet as StyleSheet4
+} from "react-native";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function AnnotationList() {
+  const { state, dispatch } = useAiAnnotation();
+  if (!state.showList) return null;
+  return /* @__PURE__ */ jsx5(
+    Modal2,
+    {
+      visible: state.showList,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: () => dispatch({ type: "TOGGLE_LIST" }),
+      children: /* @__PURE__ */ jsx5(View4, { style: styles4.overlay, children: /* @__PURE__ */ jsxs3(View4, { style: styles4.container, children: [
+        /* @__PURE__ */ jsxs3(View4, { style: styles4.header, children: [
+          /* @__PURE__ */ jsxs3(Text3, { style: styles4.title, children: [
+            "Annotations (",
+            state.annotations.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxs3(View4, { style: styles4.headerActions, children: [
+            state.annotations.length > 0 && /* @__PURE__ */ jsx5(
+              TouchableOpacity3,
+              {
+                style: styles4.clearButton,
+                onPress: () => dispatch({ type: "CLEAR_ALL_ANNOTATIONS" }),
+                children: /* @__PURE__ */ jsx5(Text3, { style: styles4.clearButtonText, children: "Clear All" })
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              TouchableOpacity3,
+              {
+                style: styles4.closeButton,
+                onPress: () => dispatch({ type: "TOGGLE_LIST" }),
+                children: /* @__PURE__ */ jsx5(Text3, { style: styles4.closeButtonText, children: "\u2715" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5(ScrollView, { style: styles4.listContainer, children: state.annotations.length === 0 ? /* @__PURE__ */ jsx5(Text3, { style: styles4.emptyText, children: "No annotations yet." }) : state.annotations.map((ann) => /* @__PURE__ */ jsxs3(View4, { style: styles4.annotationItem, children: [
+          /* @__PURE__ */ jsxs3(View4, { style: styles4.annotationContent, children: [
+            /* @__PURE__ */ jsx5(Text3, { style: styles4.componentName, children: ann.componentName }),
+            /* @__PURE__ */ jsx5(Text3, { style: styles4.annotationNote, children: ann.note })
+          ] }),
+          /* @__PURE__ */ jsx5(
+            TouchableOpacity3,
+            {
+              style: styles4.deleteButton,
+              onPress: () => dispatch({ type: "REMOVE_ANNOTATION", payload: ann.id }),
+              children: /* @__PURE__ */ jsx5(Text3, { style: styles4.deleteButtonText, children: "\u{1F5D1}" })
+            }
+          )
+        ] }, ann.id)) })
+      ] }) })
+    }
+  );
+}
+var styles4 = StyleSheet4.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  container: {
+    backgroundColor: "#1e1e1e",
+    borderRadius: 8,
+    width: "90%",
+    maxWidth: 500,
+    maxHeight: "80%",
+    padding: 20
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 16
+  },
+  title: {
+    color: "#e5e7eb",
+    fontSize: 18,
+    fontWeight: "bold"
+  },
+  headerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  clearButton: {
+    backgroundColor: "#ef4444",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 4
+  },
+  clearButtonText: {
+    color: "white",
+    fontSize: 12
+  },
+  closeButton: {
+    padding: 4
+  },
+  closeButtonText: {
+    color: "#e5e7eb",
+    fontSize: 20
+  },
+  listContainer: {
+    flex: 1
+  },
+  emptyText: {
+    color: "#9ca3af",
+    textAlign: "center",
+    padding: 20
+  },
+  annotationItem: {
+    backgroundColor: "#2d2d2d",
+    padding: 12,
+    borderRadius: 4,
+    marginBottom: 8,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start"
+  },
+  annotationContent: {
+    flex: 1,
+    marginRight: 12
+  },
+  componentName: {
+    color: "#60a5fa",
+    fontWeight: "bold",
+    fontSize: 14,
+    marginBottom: 4
+  },
+  annotationNote: {
+    color: "#e5e7eb",
+    fontSize: 14
+  },
+  deleteButton: {
+    padding: 4
+  },
+  deleteButtonText: {
+    fontSize: 16
+  }
+});
+
+// src/components/native/Toolbar.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var copyToClipboard = async (text) => {
+  try {
+    const ExpoClipboard = await import("expo-clipboard");
+    await ExpoClipboard.setStringAsync(text);
+  } catch {
+    try {
+      const RNClipboard = await import("@react-native-clipboard/clipboard");
+      RNClipboard.default.setString(text);
+    } catch {
+      console.warn("No clipboard module available");
+    }
+  }
+};
+function Toolbar() {
+  const { state, dispatch } = useAiAnnotation();
+  const [showCopied, setShowCopied] = useState3(false);
+  const handleCopy = async () => {
+    const data = state.annotations.map((a) => ({
+      component: a.componentName,
+      instruction: a.note
+    }));
+    const text = JSON.stringify(data, null, 2);
+    await copyToClipboard(text);
+    setShowCopied(true);
+    setTimeout(() => setShowCopied(false), 2e3);
+  };
+  const toggleMode = () => {
+    dispatch({
+      type: "SET_MODE",
+      payload: state.mode === "disabled" ? "inspecting" : "disabled"
+    });
+  };
+  const handleToggleMinimized = () => {
+    dispatch({ type: "TOGGLE_MINIMIZED" });
+  };
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(Highlighter, {}),
+    /* @__PURE__ */ jsx6(AnnotationList, {}),
+    /* @__PURE__ */ jsx6(Draggable, { children: /* @__PURE__ */ jsxs4(View5, { style: styles5.toolbar, children: [
+      /* @__PURE__ */ jsx6(View5, { style: styles5.dragHandle, children: /* @__PURE__ */ jsx6(Text4, { style: styles5.dragHandleText, children: "\u22EE\u22EE" }) }),
+      !state.isMinimized && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsx6(View5, { style: styles5.separator }),
+        /* @__PURE__ */ jsx6(
+          TouchableOpacity4,
+          {
+            style: [
+              styles5.button,
+              state.mode === "inspecting" && styles5.buttonActive
+            ],
+            onPress: toggleMode,
+            children: /* @__PURE__ */ jsx6(Text4, { style: styles5.buttonText, children: state.mode === "inspecting" ? "\u{1F446}" : "\u{1F6AB}" })
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          TouchableOpacity4,
+          {
+            style: styles5.button,
+            onPress: () => dispatch({ type: "TOGGLE_LIST" }),
+            children: [
+              /* @__PURE__ */ jsx6(Text4, { style: styles5.buttonText, children: "\u{1F4CB}" }),
+              state.annotations.length > 0 && /* @__PURE__ */ jsx6(View5, { style: styles5.badge, children: /* @__PURE__ */ jsx6(Text4, { style: styles5.badgeText, children: state.annotations.length }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          TouchableOpacity4,
+          {
+            style: [styles5.button, showCopied && styles5.buttonSuccess],
+            onPress: handleCopy,
+            children: [
+              /* @__PURE__ */ jsx6(Text4, { style: styles5.buttonText, children: showCopied ? "\u2713" : "\u{1F4CB}" }),
+              showCopied && /* @__PURE__ */ jsx6(Text4, { style: styles5.copiedText, children: "Copied!" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx6(View5, { style: styles5.separator }),
+      /* @__PURE__ */ jsx6(TouchableOpacity4, { style: styles5.button, onPress: handleToggleMinimized, children: /* @__PURE__ */ jsx6(Text4, { style: styles5.buttonText, children: state.isMinimized ? "\u2B1C" : "\u2796" }) })
+    ] }) })
+  ] });
+}
+var styles5 = StyleSheet5.create({
+  toolbar: {
+    backgroundColor: "#1e1e1e",
+    borderWidth: 1,
+    borderColor: "#333",
+    borderRadius: 8,
+    padding: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 8
+  },
+  dragHandle: {
+    paddingHorizontal: 4
+  },
+  dragHandleText: {
+    color: "#666",
+    fontSize: 16
+  },
+  separator: {
+    width: 1,
+    height: 24,
+    backgroundColor: "#333"
+  },
+  button: {
+    width: 32,
+    height: 32,
+    borderRadius: 4,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative"
+  },
+  buttonActive: {
+    backgroundColor: "#3b82f6"
+  },
+  buttonSuccess: {
+    backgroundColor: "#22c55e",
+    flexDirection: "row",
+    width: "auto",
+    paddingHorizontal: 8,
+    gap: 4
+  },
+  buttonText: {
+    fontSize: 16
+  },
+  copiedText: {
+    color: "white",
+    fontSize: 12
+  },
+  badge: {
+    position: "absolute",
+    top: -4,
+    right: -4,
+    backgroundColor: "#ef4444",
+    borderRadius: 7,
+    width: 14,
+    height: 14,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  badgeText: {
+    color: "white",
+    fontSize: 9,
+    fontWeight: "bold"
+  }
+});
+
+// src/utils/screenshot.native.ts
+async function captureScreenshot(viewRef, options = {}) {
+  const {
+    scale = 2,
+    format = "png",
+    quality = 0.9,
+    copyToClipboard: copyToClipboard2 = false,
+    saveToCameraRoll = false
+  } = options;
+  try {
+    let captureRef;
+    try {
+      const viewShot = await import("react-native-view-shot");
+      captureRef = viewShot.captureRef;
+    } catch {
+      return {
+        success: false,
+        error: "react-native-view-shot is not installed. Run: npm install react-native-view-shot"
+      };
+    }
+    if (!viewRef.current) {
+      return {
+        success: false,
+        error: "View reference is null"
+      };
+    }
+    const uri = await captureRef(viewRef, {
+      format,
+      quality,
+      result: "tmpfile",
+      snapshotContentContainer: false
+    });
+    let base64;
+    if (copyToClipboard2) {
+      const base64Result = await captureRef(viewRef, {
+        format,
+        quality,
+        result: "base64",
+        snapshotContentContainer: false
+      });
+      base64 = base64Result;
+    }
+    if (copyToClipboard2 && base64) {
+      try {
+        const Clipboard = await import("expo-clipboard");
+        await Clipboard.setStringAsync(base64);
+      } catch {
+        console.warn("expo-clipboard not available for clipboard support");
+      }
+    }
+    if (saveToCameraRoll) {
+      try {
+        const MediaLibrary = await import("expo-media-library");
+        const { status } = await MediaLibrary.requestPermissionsAsync();
+        if (status === "granted") {
+          await MediaLibrary.saveToLibraryAsync(uri);
+        }
+      } catch {
+        console.warn("expo-media-library not available for saving to camera roll");
+      }
+    }
+    return {
+      success: true,
+      uri,
+      base64
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    console.error("Screenshot capture failed:", message);
+    return {
+      success: false,
+      error: message
+    };
+  }
+}
+
+// src/utils/fiber.native.ts
+function getReactFiber(instance) {
+  if (!instance) return null;
+  const key = Object.keys(instance).find(
+    (k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$") || k.startsWith("_reactInternals")
+  );
+  return key ? instance[key] : null;
+}
+function getComponentDisplayName(fiber) {
+  if (!fiber) return "Unknown";
+  let curr = fiber;
+  while (curr) {
+    const type = curr.type;
+    if (type) {
+      const name = type.displayName || type.name;
+      if (name && typeof name === "string") {
+        if (!name.startsWith("RCT") && !name.startsWith("_")) {
+          return name;
+        }
+      }
+    }
+    curr = curr.return;
+  }
+  return "Unknown";
+}
+function getElementFromFiber(_fiber) {
+  return null;
+}
+function inspectComponent(ref) {
+  if (!ref) return null;
+  const fiber = getReactFiber(ref);
+  if (fiber) {
+    return {
+      name: getComponentDisplayName(fiber),
+      props: fiber.memoizedProps
+    };
+  }
+  if (ref.constructor && ref.constructor.name) {
+    return {
+      name: ref.constructor.name
+    };
+  }
+  return null;
+}
+
+// src/utils/platform.ts
+var isWeb = typeof document !== "undefined" && typeof window !== "undefined";
+var isNative = !isWeb && typeof global !== "undefined";
+function getPlatform() {
+  if (isWeb) return "web";
+  try {
+    const { Platform: Platform3 } = __require("react-native");
+    if (Platform3.OS === "ios") return "ios";
+    if (Platform3.OS === "android") return "android";
+    return "native";
+  } catch {
+    return "native";
+  }
+}
+function isTauriEnv() {
+  return isWeb && typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
+}
+
+// src/index.native.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function AiAnnotationProvider2({ children }) {
+  return /* @__PURE__ */ jsx7(AiAnnotationProvider, { children: /* @__PURE__ */ jsxs5(View6, { style: { flex: 1 }, children: [
+    children,
+    /* @__PURE__ */ jsx7(Toolbar, {})
+  ] }) });
+}
+export {
+  AiAnnotationProvider2 as AiAnnotationProvider,
+  AnnotationInput,
+  AnnotationList,
+  Draggable,
+  Highlighter,
+  Toolbar,
+  captureScreenshot,
+  getComponentDisplayName,
+  getElementFromFiber,
+  getPlatform,
+  getReactFiber,
+  inspectComponent,
+  isNative,
+  isTauriEnv,
+  isWeb,
+  useAiAnnotation
+};
+//# sourceMappingURL=index.native.js.map