@buoy-gg/shared-ui 1.7.2

package/lib/module/license/LicenseEntryModal.js

@@ -0,0 +1,944 @@
+"use strict";
+
+/**
+ * LicenseEntryModal - Modal for entering and activating a license key
+ *
+ * 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!
+ */
+
+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 { macOSColors } from "../ui/gameUI/constants/macOSDesignSystemColors.js";
+import { X, Key, Link, CheckCircle, AlertCircle, Smartphone, Plus } from "../icons/lucide-icons.js";
+
+/**
+ * Registered device interface
+ */
+
+/**
+ * License validation result from the license package
+ */
+
+/**
+ * Result of device registration
+ */
+
+/**
+ * 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"
+  };
+}
+export const LicenseEntryModal = ({
+  visible,
+  onClose,
+  onSuccess,
+  purchaseUrl = "https://buoy.gg/pricing",
+  license: injectedLicense,
+  startAtDeviceRegistration = false,
+  initialExistingDevices = [],
+  initialMaxDevices,
+  initialCurrentDeviceCount
+}) => {
+  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 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;
+    }
+  }, [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,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.loaderContainer,
+            children: /*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "large",
+              color: macOSColors.semantic.info
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.stateText,
+            children: modalState === "validating" ? "Validating license..." : "Registering device..."
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.stateSubtext,
+            children: "Please wait"
+          })]
+        });
+      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"
+          })]
+        });
+      case "error":
+        return /*#__PURE__*/_jsxs(View, {
+          style: styles.stateContainer,
+          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"
+          }), /*#__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"
+            })
+          })]
+        });
+      case "device_name":
+        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: "Name This Device"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.subtitle,
+              children: "Give this device a name so you can identify it later"
+            })]
+          }), /*#__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
+                })]
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.claimText,
+                children: "Claim"
+              })]
+            }, 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
+            })]
+          })]
+        });
+    }
+  };
+  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()]
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.8)"
+  },
+  modal: {
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 12,
+    padding: 24,
+    width: "90%",
+    maxWidth: 380,
+    maxHeight: "80%",
+    borderWidth: 1,
+    borderColor: macOSColors.semantic.info + "50",
+    shadowColor: macOSColors.semantic.info,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.8,
+    shadowRadius: 24,
+    elevation: 24
+  },
+  closeButton: {
+    position: "absolute",
+    top: 12,
+    right: 12,
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.hover,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1
+  },
+  header: {
+    alignItems: "center",
+    marginBottom: 24,
+    paddingTop: 8
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 12,
+    backgroundColor: macOSColors.semantic.info + "15",
+    borderWidth: 1,
+    borderColor: macOSColors.semantic.info + "30",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 16,
+    shadowColor: macOSColors.semantic.info,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 8
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: macOSColors.text.primary,
+    marginBottom: 6
+  },
+  subtitle: {
+    fontSize: 13,
+    color: macOSColors.text.secondary,
+    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: {
+    backgroundColor: macOSColors.semantic.info,
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: "center",
+    shadowColor: macOSColors.semantic.info,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8
+  },
+  activateButtonDisabled: {
+    backgroundColor: macOSColors.background.hover,
+    shadowOpacity: 0
+  },
+  activateButtonText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#000"
+  },
+  activateButtonTextDisabled: {
+    color: macOSColors.text.muted
+  },
+  divider: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginVertical: 20
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: macOSColors.border.default
+  },
+  dividerText: {
+    marginHorizontal: 12,
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  purchaseButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 10,
+    borderRadius: 8,
+    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
+  },
+  statusIconContainer: {
+    width: 64,
+    height: 64,
+    borderRadius: 16,
+    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
+  },
+  errorText: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: macOSColors.semantic.error,
+    marginBottom: 4
+  },
+  secondaryButton: {
+    marginTop: 20,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.hover
+  },
+  secondaryButtonText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: macOSColors.text.primary
+  },
+  validationError: {
+    fontSize: 11,
+    color: macOSColors.semantic.error,
+    marginTop: 6,
+    textAlign: "center"
+  },
+  validationSuccess: {
+    fontSize: 11,
+    color: macOSColors.semantic.success,
+    marginTop: 6,
+    textAlign: "center"
+  },
+  backButton: {
+    marginTop: 16,
+    alignItems: "center"
+  },
+  backButtonText: {
+    fontSize: 13,
+    color: macOSColors.text.muted
+  },
+  deviceCount: {
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    marginTop: 8,
+    textAlign: "center"
+  },
+  deviceCountHeader: {
+    fontSize: 12,
+    color: macOSColors.text.secondary,
+    marginTop: 8
+  },
+  deviceList: {
+    maxHeight: 200,
+    marginBottom: 16
+  },
+  deviceItem: {
+    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
+  },
+  deviceInfo: {
+    flex: 1
+  },
+  deviceName: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: macOSColors.text.primary,
+    marginBottom: 2
+  },
+  devicePlatform: {
+    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
+  }
+});