@np-dev/ui-ai-anotation 0.1.0

package/dist/cjs/index.native.cjs

@@ -0,0 +1,1004 @@
+"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.native.tsx
+var index_native_exports = {};
+__export(index_native_exports, {
+  AiAnnotationProvider: () => AiAnnotationProvider2,
+  AnnotationInput: () => AnnotationInput,
+  AnnotationList: () => AnnotationList,
+  Draggable: () => Draggable,
+  Highlighter: () => Highlighter,
+  Toolbar: () => Toolbar,
+  captureScreenshot: () => captureScreenshot,
+  getComponentDisplayName: () => getComponentDisplayName,
+  getElementFromFiber: () => getElementFromFiber,
+  getPlatform: () => getPlatform,
+  getReactFiber: () => getReactFiber,
+  inspectComponent: () => inspectComponent,
+  isNative: () => isNative,
+  isTauriEnv: () => isTauriEnv,
+  isWeb: () => isWeb,
+  useAiAnnotation: () => useAiAnnotation
+});
+module.exports = __toCommonJS(index_native_exports);
+var import_react_native6 = require("react-native");
+
+// src/store.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var initialState = {
+  mode: "disabled",
+  annotations: [],
+  hoveredElement: null,
+  hoveredComponentInfo: null,
+  isMinimized: false,
+  showList: false
+};
+var AnnotationContext = (0, import_react.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] = (0, import_react.useReducer)(reducer, initialState);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnnotationContext.Provider, { value: { state, dispatch }, children });
+}
+function useAiAnnotation() {
+  const context = (0, import_react.useContext)(AnnotationContext);
+  if (!context) {
+    throw new Error("useAiAnnotation must be used within an AiAnnotationProvider");
+  }
+  return context;
+}
+
+// src/components/native/Toolbar.tsx
+var import_react5 = require("react");
+var import_react_native5 = require("react-native");
+
+// src/components/native/Draggable.tsx
+var import_react2 = require("react");
+var import_react_native = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Draggable({ children, initialPos = { x: 20, y: 20 }, style }) {
+  const pan = (0, import_react2.useRef)(new import_react_native.Animated.ValueXY(initialPos)).current;
+  const lastOffset = (0, import_react2.useRef)(initialPos);
+  const panResponder = (0, import_react2.useRef)(
+    import_react_native.PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        pan.setOffset(lastOffset.current);
+        pan.setValue({ x: 0, y: 0 });
+      },
+      onPanResponderMove: import_react_native.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__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native.Animated.View,
+    {
+      ...panResponder.panHandlers,
+      style: [
+        styles.container,
+        style,
+        {
+          transform: [{ translateX: pan.x }, { translateY: pan.y }]
+        }
+      ],
+      children
+    }
+  );
+}
+var styles = import_react_native.StyleSheet.create({
+  container: {
+    position: "absolute",
+    zIndex: 9999
+  }
+});
+
+// src/components/native/Highlighter.tsx
+var import_react4 = require("react");
+var import_react_native3 = require("react-native");
+
+// src/components/native/AnnotationInput.tsx
+var import_react3 = require("react");
+var import_react_native2 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AnnotationInput({ onClose, componentName }) {
+  const { dispatch } = useAiAnnotation();
+  const [note, setNote] = (0, import_react3.useState)("");
+  const [fadeAnim] = (0, import_react3.useState)(new import_react_native2.Animated.Value(0));
+  const [scaleAnim] = (0, import_react3.useState)(new import_react_native2.Animated.Value(0.95));
+  (0, import_react3.useEffect)(() => {
+    import_react_native2.Animated.parallel([
+      import_react_native2.Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true
+      }),
+      import_react_native2.Animated.spring(scaleAnim, {
+        toValue: 1,
+        friction: 8,
+        useNativeDriver: true
+      })
+    ]).start();
+  }, []);
+  const handleClose = () => {
+    import_react_native2.Animated.parallel([
+      import_react_native2.Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true
+      }),
+      import_react_native2.Animated.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__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_native2.Modal,
+    {
+      visible: true,
+      transparent: true,
+      animationType: "none",
+      onRequestClose: handleClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native2.KeyboardAvoidingView,
+        {
+          behavior: import_react_native2.Platform.OS === "ios" ? "padding" : "height",
+          style: styles2.keyboardView,
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Animated.View, { style: [styles2.overlay, { opacity: fadeAnim }], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_react_native2.TouchableOpacity,
+            {
+              style: styles2.backdropTouchable,
+              activeOpacity: 1,
+              onPress: handleClose,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_react_native2.Animated.View,
+                {
+                  style: [
+                    styles2.container,
+                    {
+                      opacity: fadeAnim,
+                      transform: [{ scale: scaleAnim }]
+                    }
+                  ],
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.TouchableOpacity, { activeOpacity: 1, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: styles2.header, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Text, { style: styles2.title, children: "Add Annotation" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.TouchableOpacity, { onPress: handleClose, style: styles2.closeButton, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Text, { style: styles2.closeButtonText, children: "\u2715" }) })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.Text, { style: styles2.componentLabel, children: [
+                      "Component: ",
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Text, { style: styles2.componentName, children: componentName })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_react_native2.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__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: styles2.buttonContainer, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.TouchableOpacity, { style: styles2.cancelButton, onPress: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Text, { style: styles2.cancelButtonText, children: "Cancel" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.TouchableOpacity, { style: styles2.submitButton, onPress: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Text, { style: styles2.submitButtonText, children: "Save Annotation" }) })
+                    ] })
+                  ] })
+                }
+              )
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+var styles2 = import_react_native2.StyleSheet.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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Highlighter({ onInspect }) {
+  const { state, dispatch } = useAiAnnotation();
+  const { mode } = state;
+  const [highlightRect, setHighlightRect] = (0, import_react4.useState)(null);
+  const [componentName, setComponentName] = (0, import_react4.useState)("");
+  const [showInput, setShowInput] = (0, import_react4.useState)(false);
+  const [showTooltip, setShowTooltip] = (0, import_react4.useState)(false);
+  const [tooltipPos, setTooltipPos] = (0, import_react4.useState)({ x: 0, y: 0 });
+  const screenDimensions = import_react_native3.Dimensions.get("window");
+  const handleTouch = (0, import_react4.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__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: import_react_native3.StyleSheet.absoluteFill, pointerEvents: "box-none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react_native3.TouchableOpacity,
+      {
+        style: styles3.touchOverlay,
+        activeOpacity: 1,
+        onPress: handleTouch
+      }
+    ),
+    highlightRect && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_react_native3.View,
+        {
+          style: [
+            styles3.highlight,
+            {
+              left: highlightRect.x - 2,
+              top: highlightRect.y - 2,
+              width: highlightRect.width + 4,
+              height: highlightRect.height + 4
+            }
+          ],
+          pointerEvents: "none"
+        }
+      ),
+      componentName && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_react_native3.View,
+        {
+          style: [
+            styles3.nameLabel,
+            {
+              left: highlightRect.x,
+              top: highlightRect.y - 24
+            }
+          ],
+          pointerEvents: "none",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.Text, { style: styles3.nameLabelText, children: componentName })
+        }
+      )
+    ] }),
+    showTooltip && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_react_native3.View,
+      {
+        style: [
+          styles3.tooltip,
+          {
+            left: adjustedX,
+            top: adjustedY
+          }
+        ],
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.TouchableOpacity, { style: styles3.tooltipButton, onPress: handleAddAnnotation, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.Text, { style: styles3.tooltipButtonText, children: "+" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.TouchableOpacity, { style: styles3.dismissButton, onPress: handleDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.Text, { style: styles3.dismissButtonText, children: "\u2715" }) })
+        ]
+      }
+    ),
+    showInput && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AnnotationInput, { onClose: handleCloseInput, componentName: componentName || "Unknown" })
+  ] });
+}
+var styles3 = import_react_native3.StyleSheet.create({
+  touchOverlay: {
+    ...import_react_native3.StyleSheet.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
+var import_react_native4 = require("react-native");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function AnnotationList() {
+  const { state, dispatch } = useAiAnnotation();
+  if (!state.showList) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_native4.Modal,
+    {
+      visible: state.showList,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: () => dispatch({ type: "TOGGLE_LIST" }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: styles4.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: styles4.container, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: styles4.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.Text, { style: styles4.title, children: [
+            "Annotations (",
+            state.annotations.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: styles4.headerActions, children: [
+            state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_react_native4.TouchableOpacity,
+              {
+                style: styles4.clearButton,
+                onPress: () => dispatch({ type: "CLEAR_ALL_ANNOTATIONS" }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles4.clearButtonText, children: "Clear All" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_react_native4.TouchableOpacity,
+              {
+                style: styles4.closeButton,
+                onPress: () => dispatch({ type: "TOGGLE_LIST" }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles4.closeButtonText, children: "\u2715" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.ScrollView, { style: styles4.listContainer, children: state.annotations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles4.emptyText, children: "No annotations yet." }) : state.annotations.map((ann) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: styles4.annotationItem, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: styles4.annotationContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles4.componentName, children: ann.componentName }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles4.annotationNote, children: ann.note })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_react_native4.TouchableOpacity,
+            {
+              style: styles4.deleteButton,
+              onPress: () => dispatch({ type: "REMOVE_ANNOTATION", payload: ann.id }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles4.deleteButtonText, children: "\u{1F5D1}" })
+            }
+          )
+        ] }, ann.id)) })
+      ] }) })
+    }
+  );
+}
+var styles4 = import_react_native4.StyleSheet.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
+var import_jsx_runtime6 = require("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] = (0, import_react5.useState)(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__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Highlighter, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AnnotationList, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Draggable, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.toolbar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.dragHandle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: styles5.dragHandleText, children: "\u22EE\u22EE" }) }),
+      !state.isMinimized && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.separator }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native5.TouchableOpacity,
+          {
+            style: [
+              styles5.button,
+              state.mode === "inspecting" && styles5.buttonActive
+            ],
+            onPress: toggleMode,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: styles5.buttonText, children: state.mode === "inspecting" ? "\u{1F446}" : "\u{1F6AB}" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          import_react_native5.TouchableOpacity,
+          {
+            style: styles5.button,
+            onPress: () => dispatch({ type: "TOGGLE_LIST" }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: styles5.buttonText, children: "\u{1F4CB}" }),
+              state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.badge, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: styles5.badgeText, children: state.annotations.length }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          import_react_native5.TouchableOpacity,
+          {
+            style: [styles5.button, showCopied && styles5.buttonSuccess],
+            onPress: handleCopy,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: styles5.buttonText, children: showCopied ? "\u2713" : "\u{1F4CB}" }),
+              showCopied && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: styles5.copiedText, children: "Copied!" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.separator }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.TouchableOpacity, { style: styles5.button, onPress: handleToggleMinimized, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: styles5.buttonText, children: state.isMinimized ? "\u2B1C" : "\u2796" }) })
+    ] }) })
+  ] });
+}
+var styles5 = import_react_native5.StyleSheet.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
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function AiAnnotationProvider2({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AiAnnotationProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: { flex: 1 }, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Toolbar, {})
+  ] }) });
+}
+//# sourceMappingURL=index.native.cjs.map