@buoy-gg/shared-ui 2.1.1 → 2.1.3

package/lib/module/license/LicenseEntryModal.js

@@ -1,583 +1,188 @@
 "use strict";
 
 /**
- * LicenseEntryModal - Modal for entering and activating a license key
+ * LicenseEntryModal - Modal showing how to activate a license
  *
- * Flow:
- * 1. Enter license key
- * 2. Validate key - check if device registration needed
- * 3a. If existing devices, show selection (claim or register new)
- * 3b. If no devices, prompt for device name
- * 4. Register device with user-provided name
- * 5. Success!
+ * Shows two options:
+ * 1. Get a license (link to pricing)
+ * 2. Already have one? Add Buoy.init() to your code
  */
 
-import React, { useState, useCallback, useMemo, useRef, useEffect } from "react";
-import { View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator, Linking, Modal, KeyboardAvoidingView, Platform, ScrollView } from "react-native";
+import React, { useCallback } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Linking, Modal, Platform } from "react-native";
 import { macOSColors } from "../ui/gameUI/constants/macOSDesignSystemColors.js";
-import { X, Key, Link, CheckCircle, AlertCircle, Smartphone, Plus } from "../icons/lucide-icons.js";
+import { X, Key, Link, FileCode, Copy } from "../icons/lucide-icons.js";
 
-/**
- * Registered device interface
- */
+// For clipboard functionality
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let Clipboard = null;
+try {
+  Clipboard = require("@react-native-clipboard/clipboard").default;
+} catch {
+  // Clipboard not available
+}
 
-/**
- * License validation result from the license package
- */
+// Keep these for backwards compatibility but they're no longer used
 
-/**
- * Result of device registration
- */
+const CODE_SNIPPET = `import { Buoy } from '@buoy-gg/core';
 
-/**
- * License state interface for prop injection
- */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Lazy load license hooks to avoid circular dependencies
-let _useLicense = null;
-function getUseLicense() {
-  if (!_useLicense) {
-    try {
-      const mod = require("@buoy-gg/license");
-      _useLicense = mod.useLicense;
-    } catch {
-      // License package not available - will use injected license prop
-    }
-  }
-  return _useLicense;
-}
-const LICENSE_KEY_REGEX = /^[A-Z0-9]{6}-[A-Z0-9]{6}-[A-Z0-9]{6}-[A-Z0-9]{6}-[A-Z0-9]{6}-[A-Z0-9]{2,6}$/;
-const MIN_KEY_LENGTH = 37;
-function validateLicenseKeyFormat(key) {
-  const trimmedKey = key.trim().toUpperCase();
-  if (trimmedKey.length === 0) {
-    return {
-      isValid: false,
-      error: null
-    };
-  }
-  if (!/^[A-Z0-9-]+$/.test(trimmedKey)) {
-    return {
-      isValid: false,
-      error: "Invalid characters in key"
-    };
-  }
-  if (LICENSE_KEY_REGEX.test(trimmedKey)) {
-    return {
-      isValid: true,
-      error: null
-    };
-  }
-  if (trimmedKey.length < MIN_KEY_LENGTH) {
-    return {
-      isValid: false,
-      error: "Key is incomplete"
-    };
-  }
-  return {
-    isValid: false,
-    error: "Invalid key format"
-  };
-}
+Buoy.init({
+  licenseKey: 'YOUR_LICENSE_KEY',
+});`;
 export const LicenseEntryModal = ({
   visible,
   onClose,
-  onSuccess,
-  purchaseUrl = "https://buoy.gg/pricing",
-  license: injectedLicense,
-  startAtDeviceRegistration = false,
-  initialExistingDevices = [],
-  initialMaxDevices,
-  initialCurrentDeviceCount
+  purchaseUrl = "https://buoy.gg/pricing"
 }) => {
-  const [licenseKey, setLicenseKey] = useState("");
-  const [deviceName, setDeviceName] = useState("");
-  const [modalState, setModalState] = useState("entry");
-  const [errorMessage, setErrorMessage] = useState(null);
-  const [isFocused, setIsFocused] = useState(false);
-  const [isDeviceNameFocused, setIsDeviceNameFocused] = useState(false);
-  const [existingDevices, setExistingDevices] = useState([]);
-  const [maxDevices, setMaxDevices] = useState();
-  const [currentDeviceCount, setCurrentDeviceCount] = useState();
-  const [hasInitialized, setHasInitialized] = useState(false);
-
-  // Ref to track reset timeout to prevent race condition on quick close/open
-  const resetTimeoutRef = useRef(null);
-
-  // Use injected license if provided, otherwise try to load from @buoy-gg/license
-  const useLicenseHook = getUseLicense();
-  const hookLicense = useLicenseHook?.();
-  const license = injectedLicense ?? hookLicense;
-
-  // Handle initial state when modal becomes visible
-  React.useEffect(() => {
-    if (visible && startAtDeviceRegistration && !hasInitialized) {
-      // Set device count info from props when starting at device registration
-      if (initialMaxDevices !== undefined) {
-        setMaxDevices(initialMaxDevices);
-      }
-      if (initialCurrentDeviceCount !== undefined) {
-        setCurrentDeviceCount(initialCurrentDeviceCount);
-      }
-      if (initialExistingDevices.length > 0) {
-        setExistingDevices(initialExistingDevices);
-        setModalState("device_select");
-      } else {
-        setModalState("device_name");
-      }
-      setHasInitialized(true);
-    }
-    // Reset initialization flag when modal closes
-    if (!visible) {
-      setHasInitialized(false);
-    }
-  }, [visible, startAtDeviceRegistration, initialExistingDevices, initialMaxDevices, initialCurrentDeviceCount, hasInitialized]);
-
-  // Validate key format in real-time
-  const validation = useMemo(() => validateLicenseKeyFormat(licenseKey), [licenseKey]);
-  const canActivate = validation.isValid && licenseKey.trim().length > 0;
-  const canRegister = deviceName.trim().length >= 2;
-  const handleValidate = useCallback(async () => {
-    if (!canActivate) return;
-    if (!license) {
-      setModalState("error");
-      setErrorMessage("License system unavailable.");
-      return;
-    }
-    setModalState("validating");
-    setErrorMessage(null);
-    try {
-      // Check if the new validateLicenseKey method is available
-      if (license.validateLicenseKey) {
-        const result = await license.validateLicenseKey(licenseKey.trim());
-        if (!result.valid) {
-          setModalState("error");
-          setErrorMessage(result.error || "Invalid license key");
-          return;
-        }
-        setMaxDevices(result.maxDevices);
-        setCurrentDeviceCount(result.currentDeviceCount);
-        if (!result.needsDeviceRegistration) {
-          // Already registered or simulator - success!
-          setModalState("success");
-          setTimeout(() => {
-            onSuccess?.();
-            onClose();
-            resetState();
-          }, 1500);
-          return;
-        }
-
-        // Device registration needed
-        if (result.existingDevices.length > 0) {
-          setExistingDevices(result.existingDevices);
-          setModalState("device_select");
-        } else {
-          setModalState("device_name");
-        }
-      } else {
-        // Fallback to legacy setLicenseKey
-        const success = await license.setLicenseKey(licenseKey.trim());
-        if (success) {
-          setModalState("success");
-          setTimeout(() => {
-            onSuccess?.();
-            onClose();
-            resetState();
-          }, 1500);
-        } else {
-          setModalState("error");
-          setErrorMessage(license.error || "Invalid license key");
-        }
-      }
-    } catch (err) {
-      setModalState("error");
-      setErrorMessage(err instanceof Error ? err.message : "Validation failed");
-    }
-  }, [licenseKey, license, onSuccess, onClose, canActivate]);
-  const handleRegisterDevice = useCallback(async () => {
-    if (!canRegister || !license?.registerDevice) {
-      // Fallback if registerDevice not available
-      if (license?.setLicenseKey) {
-        const success = await license.setLicenseKey(licenseKey.trim());
-        if (success) {
-          setModalState("success");
-          setTimeout(() => {
-            onSuccess?.();
-            onClose();
-            resetState();
-          }, 1500);
-        } else {
-          setModalState("error");
-          setErrorMessage(license.error || "Registration failed");
-        }
-      }
-      return;
-    }
-    setModalState("registering");
-    setErrorMessage(null);
-    try {
-      const result = await license.registerDevice(deviceName.trim());
-      if (result.success) {
-        setModalState("success");
-        setTimeout(() => {
-          onSuccess?.();
-          onClose();
-          resetState();
-        }, 1500);
-      } else {
-        setModalState("error");
-        setErrorMessage(result.error || "Device registration failed");
-      }
-    } catch (err) {
-      setModalState("error");
-      setErrorMessage(err instanceof Error ? err.message : "Registration failed");
-    }
-  }, [deviceName, license, licenseKey, onSuccess, onClose, canRegister]);
-  const handleClaimDevice = useCallback(async device => {
-    if (!license?.claimDevice) {
-      setModalState("error");
-      setErrorMessage("Claim device not available");
-      return;
-    }
-    setModalState("registering");
-    setErrorMessage(null);
-    try {
-      const success = await license.claimDevice(device.id, existingDevices);
-      if (success) {
-        setModalState("success");
-        setTimeout(() => {
-          onSuccess?.();
-          onClose();
-          resetState();
-        }, 1500);
-      } else {
-        setModalState("error");
-        setErrorMessage(license.error || "Failed to claim device");
-      }
-    } catch (err) {
-      setModalState("error");
-      setErrorMessage(err instanceof Error ? err.message : "Failed to claim device");
-    }
-  }, [license, existingDevices, onSuccess, onClose]);
-  const handleRegisterNew = useCallback(() => {
-    setModalState("device_name");
-  }, []);
+  const [copied, setCopied] = React.useState(false);
   const handleGetLicense = useCallback(() => {
     Linking.openURL(purchaseUrl);
   }, [purchaseUrl]);
-  const resetState = useCallback(() => {
-    setLicenseKey("");
-    setDeviceName("");
-    setModalState("entry");
-    setErrorMessage(null);
-    setIsFocused(false);
-    setIsDeviceNameFocused(false);
-    setExistingDevices([]);
-    setMaxDevices(undefined);
-    setCurrentDeviceCount(undefined);
-  }, []);
-  const handleClose = useCallback(() => {
-    onClose();
-    // Store the timeout ref so it can be cancelled if modal reopens quickly
-    resetTimeoutRef.current = setTimeout(resetState, 300);
-  }, [onClose, resetState]);
-
-  // Cancel pending reset if modal becomes visible (prevents race condition)
-  useEffect(() => {
-    if (visible && resetTimeoutRef.current) {
-      clearTimeout(resetTimeoutRef.current);
-      resetTimeoutRef.current = null;
+  const handleCopyCode = useCallback(() => {
+    if (Clipboard?.setString) {
+      Clipboard.setString(CODE_SNIPPET);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
     }
-  }, [visible]);
-  const formatLicenseKey = text => {
-    return text.toUpperCase().replace(/[^A-Z0-9-]/g, "");
-  };
-  const renderContent = () => {
-    switch (modalState) {
-      case "validating":
-      case "registering":
-        return /*#__PURE__*/_jsxs(View, {
-          style: styles.stateContainer,
+  }, []);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: onClose,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.overlay,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.backdrop,
+        activeOpacity: 1,
+        onPress: onClose
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.modal,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.closeButton,
+          onPress: onClose,
+          activeOpacity: 0.7,
+          children: /*#__PURE__*/_jsx(X, {
+            size: 18,
+            color: macOSColors.text.muted
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.header,
           children: [/*#__PURE__*/_jsx(View, {
-            style: styles.loaderContainer,
-            children: /*#__PURE__*/_jsx(ActivityIndicator, {
-              size: "large",
+            style: styles.iconContainer,
+            children: /*#__PURE__*/_jsx(Key, {
+              size: 20,
               color: macOSColors.semantic.info
             })
           }), /*#__PURE__*/_jsx(Text, {
-            style: styles.stateText,
-            children: modalState === "validating" ? "Validating license..." : "Registering device..."
+            style: styles.title,
+            children: "Unlock Pro Features"
           }), /*#__PURE__*/_jsx(Text, {
-            style: styles.stateSubtext,
-            children: "Please wait"
+            style: styles.subtitle,
+            children: "Get access to all Buoy DevTools features"
           })]
-        });
-      case "success":
-        return /*#__PURE__*/_jsxs(View, {
-          style: styles.stateContainer,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.statusIconContainer, styles.successIconContainer],
-            children: /*#__PURE__*/_jsx(CheckCircle, {
-              size: 32,
-              color: macOSColors.semantic.success
-            })
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.successText,
-            children: "License Activated!"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.stateSubtext,
-            children: "Pro features are now unlocked"
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.primaryButton,
+          onPress: handleGetLicense,
+          activeOpacity: 0.8,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.primaryButtonText,
+            children: "Get a License"
+          }), /*#__PURE__*/_jsx(Link, {
+            size: 14,
+            color: "#000"
           })]
-        });
-      case "error":
-        return /*#__PURE__*/_jsxs(View, {
-          style: styles.stateContainer,
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.divider,
           children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.statusIconContainer, styles.errorIconContainer],
-            children: /*#__PURE__*/_jsx(AlertCircle, {
-              size: 32,
-              color: macOSColors.semantic.error
-            })
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.errorText,
-            children: "Activation Failed"
+            style: styles.dividerLine
           }), /*#__PURE__*/_jsx(Text, {
-            style: styles.stateSubtext,
-            children: errorMessage
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.secondaryButton,
-            onPress: () => setModalState("entry"),
-            activeOpacity: 0.8,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.secondaryButtonText,
-              children: "Try Again"
-            })
+            style: styles.dividerText,
+            children: "already have one?"
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.dividerLine
           })]
-        });
-      case "device_name":
-        return /*#__PURE__*/_jsxs(_Fragment, {
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.instructionsContainer,
           children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.header,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.iconContainer,
-              children: /*#__PURE__*/_jsx(Smartphone, {
-                size: 20,
-                color: macOSColors.semantic.info
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.title,
-              children: "Name This Device"
+            style: styles.instructionsHeader,
+            children: [/*#__PURE__*/_jsx(FileCode, {
+              size: 14,
+              color: macOSColors.text.secondary
             }), /*#__PURE__*/_jsx(Text, {
-              style: styles.subtitle,
-              children: "Give this device a name so you can identify it later"
+              style: styles.instructionsTitle,
+              children: "Add to your App.tsx"
             })]
           }), /*#__PURE__*/_jsxs(View, {
-            style: styles.inputWrapper,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.inputContainer, isDeviceNameFocused && styles.inputContainerFocused],
-              children: /*#__PURE__*/_jsx(TextInput, {
-                style: [styles.input, {
-                  fontFamily: undefined,
-                  letterSpacing: 0
-                }],
-                value: deviceName,
-                onChangeText: setDeviceName,
-                placeholder: "e.g., My iPhone, Work iPad",
-                placeholderTextColor: macOSColors.text.muted,
-                autoFocus: true,
-                onFocus: () => setIsDeviceNameFocused(true),
-                onBlur: () => setIsDeviceNameFocused(false)
-              })
-            }), maxDevices && /*#__PURE__*/_jsxs(Text, {
-              style: styles.deviceCount,
-              children: [currentDeviceCount ?? 0, " of ", maxDevices, " devices used"]
-            })]
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.activateButton, !canRegister && styles.activateButtonDisabled],
-            onPress: handleRegisterDevice,
-            disabled: !canRegister,
-            activeOpacity: 0.8,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.activateButtonText, !canRegister && styles.activateButtonTextDisabled],
-              children: "Register Device"
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.backButton,
-            onPress: () => setModalState("entry"),
-            activeOpacity: 0.8,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.backButtonText,
-              children: "Back"
-            })
-          })]
-        });
-      case "device_select":
-        return /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.header,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.iconContainer,
-              children: /*#__PURE__*/_jsx(Smartphone, {
-                size: 20,
-                color: macOSColors.semantic.info
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.title,
-              children: "Select Device"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.subtitle,
-              children: "Claim an existing device or register a new one"
-            }), maxDevices && /*#__PURE__*/_jsxs(Text, {
-              style: styles.deviceCountHeader,
-              children: [currentDeviceCount ?? 0, " of ", maxDevices, " devices used"]
-            })]
-          }), /*#__PURE__*/_jsx(ScrollView, {
-            style: styles.deviceList,
-            showsVerticalScrollIndicator: false,
-            children: existingDevices.map(device => /*#__PURE__*/_jsxs(TouchableOpacity, {
-              style: styles.deviceItem,
-              onPress: () => handleClaimDevice(device),
-              activeOpacity: 0.8,
-              children: [/*#__PURE__*/_jsx(View, {
-                style: styles.deviceIcon,
-                children: /*#__PURE__*/_jsx(Smartphone, {
-                  size: 18,
-                  color: macOSColors.text.secondary
-                })
-              }), /*#__PURE__*/_jsxs(View, {
-                style: styles.deviceInfo,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: styles.deviceName,
-                  children: device.name
-                }), /*#__PURE__*/_jsx(Text, {
-                  style: styles.devicePlatform,
-                  children: device.platform
-                })]
+            style: styles.codeBlock,
+            children: [/*#__PURE__*/_jsxs(Text, {
+              style: styles.codeText,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.codeKeyword,
+                children: "import"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.codePunctuation,
+                children: " { "
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.codeVariable,
+                children: "Buoy"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.codePunctuation,
+                children: " } "
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.codeKeyword,
+                children: "from"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.codeString,
+                children: " '@buoy-gg/core'"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.codePunctuation,
+                children: ";"
+              }), "\n\n", /*#__PURE__*/_jsx(Text, {
+                style: styles.codeVariable,
+                children: "Buoy"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.codePunctuation,
+                children: "."
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.codeFunction,
+                children: "init"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.codePunctuation,
+                children: "({"
+              }), "\n", /*#__PURE__*/_jsx(Text, {
+                style: styles.codeProperty,
+                children: "  licenseKey"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.codePunctuation,
+                children: ": "
               }), /*#__PURE__*/_jsx(Text, {
-                style: styles.claimText,
-                children: "Claim"
+                style: styles.codeString,
+                children: "'YOUR_KEY'"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.codePunctuation,
+                children: ","
+              }), "\n", /*#__PURE__*/_jsx(Text, {
+                style: styles.codePunctuation,
+                children: "});"
+              })]
+            }), Clipboard?.setString && /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: styles.copyButton,
+              onPress: handleCopyCode,
+              activeOpacity: 0.7,
+              children: [/*#__PURE__*/_jsx(Copy, {
+                size: 12,
+                color: copied ? macOSColors.semantic.success : macOSColors.text.muted
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.copyText, copied && styles.copyTextSuccess],
+                children: copied ? "Copied!" : "Copy"
               })]
-            }, device.id))
-          }), (!maxDevices || (currentDeviceCount ?? 0) < maxDevices) && /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: styles.registerNewButton,
-            onPress: handleRegisterNew,
-            activeOpacity: 0.8,
-            children: [/*#__PURE__*/_jsx(Plus, {
-              size: 16,
-              color: macOSColors.semantic.info
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.registerNewText,
-              children: "Register New Device"
-            })]
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.backButton,
-            onPress: () => setModalState("entry"),
-            activeOpacity: 0.8,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.backButtonText,
-              children: "Back"
-            })
-          })]
-        });
-      default:
-        // entry
-        return /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.header,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.iconContainer,
-              children: /*#__PURE__*/_jsx(Key, {
-                size: 20,
-                color: macOSColors.semantic.info
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.title,
-              children: "Enter License Key"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.subtitle,
-              children: "Unlock Pro features by entering your license key"
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.inputWrapper,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.inputContainer, isFocused && styles.inputContainerFocused, validation.error && licenseKey.length > 0 && styles.inputContainerError, validation.isValid && licenseKey.length > 0 && styles.inputContainerValid],
-              children: /*#__PURE__*/_jsx(TextInput, {
-                style: styles.input,
-                value: licenseKey,
-                onChangeText: text => setLicenseKey(formatLicenseKey(text)),
-                placeholder: "XXXXXX-XXXXXX-XXXXXX-XXXXXX-XXXXXX-V3",
-                placeholderTextColor: macOSColors.text.muted,
-                autoCapitalize: "characters",
-                autoCorrect: false,
-                autoComplete: "off",
-                onFocus: () => setIsFocused(true),
-                onBlur: () => setIsFocused(false)
-              })
-            }), validation.error && licenseKey.length > 0 && /*#__PURE__*/_jsx(Text, {
-              style: styles.validationError,
-              children: validation.error
-            }), validation.isValid && licenseKey.length > 0 && /*#__PURE__*/_jsx(Text, {
-              style: styles.validationSuccess,
-              children: "Valid format"
-            })]
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.activateButton, !canActivate && styles.activateButtonDisabled],
-            onPress: handleValidate,
-            disabled: !canActivate,
-            activeOpacity: 0.8,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.activateButtonText, !canActivate && styles.activateButtonTextDisabled],
-              children: "Activate License"
-            })
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.divider,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.dividerLine
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.dividerText,
-              children: "or"
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.dividerLine
-            })]
-          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: styles.purchaseButton,
-            onPress: handleGetLicense,
-            activeOpacity: 0.8,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.purchaseButtonText,
-              children: "Get a License"
-            }), /*#__PURE__*/_jsx(Link, {
-              size: 14,
-              color: macOSColors.semantic.info
             })]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.instructionsNote,
+            children: "Replace YOUR_KEY with your license key"
           })]
-        });
-    }
-  };
-  return /*#__PURE__*/_jsx(Modal, {
-    visible: visible,
-    transparent: true,
-    animationType: "fade",
-    onRequestClose: handleClose,
-    children: /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
-      behavior: Platform.OS === "ios" ? "padding" : "height",
-      style: styles.overlay,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.backdrop,
-        activeOpacity: 1,
-        onPress: handleClose
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.modal,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.closeButton,
-          onPress: handleClose,
-          activeOpacity: 0.7,
-          children: /*#__PURE__*/_jsx(X, {
-            size: 18,
-            color: macOSColors.text.muted
-          })
-        }), renderContent()]
+        })]
       })]
     })
   });
@@ -598,7 +203,7 @@ const styles = StyleSheet.create({
     padding: 24,
     width: "90%",
     maxWidth: 380,
-    maxHeight: "80%",
+    maxHeight: "85%",
     borderWidth: 1,
     borderColor: macOSColors.semantic.info + "50",
     shadowColor: macOSColors.semantic.info,
@@ -657,61 +262,14 @@ const styles = StyleSheet.create({
     textAlign: "center",
     lineHeight: 18
   },
-  inputWrapper: {
-    marginBottom: 16
-  },
-  inputContainer: {
-    backgroundColor: macOSColors.background.input,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: macOSColors.border.input,
-    overflow: "hidden"
-  },
-  inputContainerFocused: {
-    borderColor: macOSColors.semantic.info + "60",
-    shadowColor: macOSColors.semantic.info,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 8
-  },
-  inputContainerError: {
-    borderColor: macOSColors.semantic.error + "60",
-    shadowColor: macOSColors.semantic.error,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 8
-  },
-  inputContainerValid: {
-    borderColor: macOSColors.semantic.success + "60",
-    shadowColor: macOSColors.semantic.success,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 8
-  },
-  input: {
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-    fontSize: 12,
-    color: macOSColors.text.primary,
-    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
-    textAlign: "center",
-    letterSpacing: 0.3,
-    width: "100%"
-  },
-  activateButton: {
+  primaryButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
     backgroundColor: macOSColors.semantic.info,
     borderRadius: 8,
-    paddingVertical: 12,
-    alignItems: "center",
+    paddingVertical: 14,
     shadowColor: macOSColors.semantic.info,
     shadowOffset: {
       width: 0,
@@ -720,18 +278,11 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.3,
     shadowRadius: 8
   },
-  activateButtonDisabled: {
-    backgroundColor: macOSColors.background.hover,
-    shadowOpacity: 0
-  },
-  activateButtonText: {
-    fontSize: 14,
+  primaryButtonText: {
+    fontSize: 15,
     fontWeight: "600",
     color: "#000"
   },
-  activateButtonTextDisabled: {
-    color: macOSColors.text.muted
-  },
   divider: {
     flexDirection: "row",
     alignItems: "center",
@@ -749,196 +300,81 @@ const styles = StyleSheet.create({
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
-  purchaseButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-    paddingVertical: 10,
+  instructionsContainer: {
+    backgroundColor: macOSColors.background.hover,
     borderRadius: 8,
+    padding: 16,
     borderWidth: 1,
-    borderColor: macOSColors.semantic.info + "30",
-    backgroundColor: macOSColors.semantic.info + "10"
-  },
-  purchaseButtonText: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: macOSColors.semantic.info
-  },
-  stateContainer: {
-    alignItems: "center",
-    paddingVertical: 24,
-    paddingTop: 16
-  },
-  loaderContainer: {
-    width: 64,
-    height: 64,
-    borderRadius: 16,
-    backgroundColor: macOSColors.semantic.info + "10",
-    borderWidth: 1,
-    borderColor: macOSColors.semantic.info + "20",
-    alignItems: "center",
-    justifyContent: "center",
-    marginBottom: 16
+    borderColor: macOSColors.border.default
   },
-  statusIconContainer: {
-    width: 64,
-    height: 64,
-    borderRadius: 16,
+  instructionsHeader: {
+    flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
-    marginBottom: 16,
-    borderWidth: 1
-  },
-  successIconContainer: {
-    backgroundColor: macOSColors.semantic.success + "15",
-    borderColor: macOSColors.semantic.success + "30",
-    shadowColor: macOSColors.semantic.success,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 12
-  },
-  errorIconContainer: {
-    backgroundColor: macOSColors.semantic.error + "15",
-    borderColor: macOSColors.semantic.error + "30",
-    shadowColor: macOSColors.semantic.error,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 12
-  },
-  stateText: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: macOSColors.text.primary,
-    marginBottom: 4
-  },
-  stateSubtext: {
-    fontSize: 13,
-    color: macOSColors.text.secondary,
-    textAlign: "center",
-    lineHeight: 18,
-    paddingHorizontal: 16
-  },
-  successText: {
-    fontSize: 18,
-    fontWeight: "600",
-    color: macOSColors.semantic.success,
-    marginBottom: 4
+    gap: 8,
+    marginBottom: 12
   },
-  errorText: {
-    fontSize: 18,
+  instructionsTitle: {
+    fontSize: 12,
     fontWeight: "600",
-    color: macOSColors.semantic.error,
-    marginBottom: 4
+    color: macOSColors.text.secondary
   },
-  secondaryButton: {
-    marginTop: 20,
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    borderRadius: 8,
+  codeBlock: {
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 6,
+    padding: 12,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    backgroundColor: macOSColors.background.hover
-  },
-  secondaryButtonText: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: macOSColors.text.primary
+    borderColor: macOSColors.border.input,
+    position: "relative"
   },
-  validationError: {
+  codeText: {
     fontSize: 11,
-    color: macOSColors.semantic.error,
-    marginTop: 6,
-    textAlign: "center"
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    lineHeight: 18,
+    color: macOSColors.text.primary
   },
-  validationSuccess: {
-    fontSize: 11,
-    color: macOSColors.semantic.success,
-    marginTop: 6,
-    textAlign: "center"
+  codeKeyword: {
+    color: "#FF79C6"
   },
-  backButton: {
-    marginTop: 16,
-    alignItems: "center"
+  codeVariable: {
+    color: "#50FA7B"
   },
-  backButtonText: {
-    fontSize: 13,
-    color: macOSColors.text.muted
+  codeFunction: {
+    color: "#8BE9FD"
   },
-  deviceCount: {
-    fontSize: 11,
-    color: macOSColors.text.muted,
-    marginTop: 8,
-    textAlign: "center"
+  codeProperty: {
+    color: "#FFB86C"
   },
-  deviceCountHeader: {
-    fontSize: 12,
-    color: macOSColors.text.secondary,
-    marginTop: 8
+  codeString: {
+    color: "#F1FA8C"
   },
-  deviceList: {
-    maxHeight: 200,
-    marginBottom: 16
+  codePunctuation: {
+    color: macOSColors.text.secondary
   },
-  deviceItem: {
+  copyButton: {
+    position: "absolute",
+    top: 8,
+    right: 8,
     flexDirection: "row",
     alignItems: "center",
-    padding: 12,
-    backgroundColor: macOSColors.background.hover,
-    borderRadius: 8,
-    marginBottom: 8,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default
-  },
-  deviceIcon: {
-    width: 36,
-    height: 36,
-    borderRadius: 8,
-    backgroundColor: macOSColors.background.input,
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 12
+    gap: 4,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+    backgroundColor: macOSColors.background.hover
   },
-  deviceInfo: {
-    flex: 1
+  copyText: {
+    fontSize: 10,
+    color: macOSColors.text.muted,
+    fontWeight: "500"
   },
-  deviceName: {
-    fontSize: 14,
-    fontWeight: "500",
-    color: macOSColors.text.primary,
-    marginBottom: 2
+  copyTextSuccess: {
+    color: macOSColors.semantic.success
   },
-  devicePlatform: {
+  instructionsNote: {
     fontSize: 11,
     color: macOSColors.text.muted,
-    textTransform: "capitalize"
-  },
-  claimText: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: macOSColors.semantic.info
-  },
-  registerNewButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
-    paddingVertical: 12,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: macOSColors.semantic.info + "30",
-    borderStyle: "dashed",
-    marginBottom: 8
-  },
-  registerNewText: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: macOSColors.semantic.info
+    marginTop: 12,
+    textAlign: "center",
+    fontStyle: "italic"
   }
 });