@moontra/moonui-pro 2.0.23 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.0.23",
+  "version": "2.1.1",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/scripts/postinstall.js

@@ -4,6 +4,7 @@ import https from 'https';
 import fs from 'fs';
 import path from 'path';
 import os from 'os';
+import crypto from 'crypto';
 import { fileURLToPath } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -25,41 +26,97 @@ const log = (message, color = '') => {
   console.log(`${color}${message}${colors.reset}`);
 };
 
-const getLicenseConfig = () => {
+const getDeviceFingerprint = () => {
+  // Create a unique device fingerprint using multiple system attributes
+  const hostname = os.hostname();
+  const username = os.userInfo().username;
+  const platform = os.platform();
+  const arch = os.arch();
+  const cpus = os.cpus();
+  const cpuModel = cpus[0]?.model || 'unknown';
+  const cpuCount = cpus.length;
+  const homeDir = os.homedir();
+  
+  // Combine all attributes for a unique device ID
+  const deviceString = `${hostname}|${username}|${platform}|${arch}|${cpuModel}|${cpuCount}|${homeDir}`;
+  return crypto.createHash('sha256').update(deviceString).digest('hex');
+};
+
+const getAuthConfig = () => {
   try {
-    const configPath = path.join(os.homedir(), '.moonui', 'license.json');
+    const authPath = path.join(os.homedir(), '.moonui', 'auth.encrypted');
     
-    if (fs.existsSync(configPath)) {
-      const configData = fs.readFileSync(configPath, 'utf-8');
-      return JSON.parse(configData);
+    if (!fs.existsSync(authPath)) {
+      return null;
     }
     
-    return null;
+    // Read encrypted auth
+    const encryptedData = fs.readFileSync(authPath, 'utf-8');
+    const parts = encryptedData.split('.');
+    
+    if (parts.length !== 3) {
+      // Encrypted format: iv.encrypted.signature
+      return null;
+    }
+    
+    const [ivHex, encrypted, signature] = parts;
+    const iv = Buffer.from(ivHex, 'hex');
+    
+    // Get device-specific key using same fingerprint method
+    const deviceFingerprint = getDeviceFingerprint();
+    const key = crypto.createHash('sha256').update(deviceFingerprint).digest();
+    
+    // Verify signature
+    const hmac = crypto.createHmac('sha256', key);
+    hmac.update(encrypted);
+    const computedSignature = hmac.digest('hex');
+    
+    if (computedSignature !== signature) {
+      return null;
+    }
+    
+    // Decrypt
+    const decipher = crypto.createDecipheriv('aes-256-cbc', key, iv);
+    let decrypted = decipher.update(encrypted, 'hex', 'utf8');
+    decrypted += decipher.final('utf8');
+    
+    const cache = JSON.parse(decrypted);
+    
+    // Verify device matches
+    if (cache.deviceId && cache.deviceId !== deviceFingerprint) {
+      log('❌ Device mismatch detected!', colors.red + colors.bright);
+      log('   This license is registered to a different device', colors.red);
+      log('   MoonUI Pro licenses are single-device only', colors.yellow);
+      return null;
+    }
+    
+    // Extract token from cache
+    const auth = cache.token || cache;
+    
+    // Check if expired
+    if (new Date(auth.expiresAt) < new Date()) {
+      return null;
+    }
+    
+    return auth;
   } catch (error) {
+    // Silent fail - will show auth required message
     return null;
   }
 };
 
-const validateLicense = async (licenseKey) => {
+const validateAuth = async (token) => {
   return new Promise((resolve) => {
     const API_BASE = process.env.MOONUI_API_BASE || 'moonui.dev';
     
-    const postData = JSON.stringify({
-      licenseKey,
-      packageName: '@moontra/moonui-pro',
-      version: '1.0.0',
-      userId: 'npm-install'
-    });
-
     const options = {
       hostname: API_BASE.replace('https://', '').replace('http://', ''),
       port: 443,
-      path: '/api/license/validate',
-      method: 'POST',
+      path: '/api/auth/validate',
+      method: 'GET',
       headers: {
-        'Content-Type': 'application/json',
-        'Content-Length': Buffer.byteLength(postData),
-        'User-Agent': 'moonui-pro-postinstall/1.0.0'
+        'Authorization': `Bearer ${token}`,
+        'User-Agent': 'moonui-pro-postinstall/2.0.0'
       },
       timeout: 10000
     };
@@ -73,8 +130,12 @@ const validateLicense = async (licenseKey) => {
       
       res.on('end', () => {
         try {
-          const result = JSON.parse(data);
-          resolve(result);
+          if (res.statusCode === 200) {
+            const result = JSON.parse(data);
+            resolve({ valid: true, ...result });
+          } else {
+            resolve({ valid: false, error: 'INVALID_TOKEN', message: 'Authentication token is invalid' });
+          }
         } catch (error) {
           resolve({ valid: false, error: 'PARSE_ERROR', message: 'Invalid response from server' });
         }
@@ -82,25 +143,24 @@ const validateLicense = async (licenseKey) => {
     });
 
     req.on('error', (error) => {
-      resolve({ valid: false, error: 'NETWORK_ERROR', message: 'Could not connect to license server' });
+      resolve({ valid: false, error: 'NETWORK_ERROR', message: 'Could not connect to auth server' });
     });
 
     req.on('timeout', () => {
-      resolve({ valid: false, error: 'TIMEOUT', message: 'License validation timeout' });
+      resolve({ valid: false, error: 'TIMEOUT', message: 'Auth validation timeout' });
     });
 
-    req.write(postData);
     req.end();
   });
 };
 
-const checkEnvironmentLicense = () => {
-  // Check for license in environment variables
-  const envLicense = process.env.MOONUI_PRO_LICENSE || process.env.MOONUI_LICENSE_KEY;
+const checkEnvironmentAuth = () => {
+  // Check for auth token in environment variables
+  const envToken = process.env.MOONUI_AUTH_TOKEN || process.env.MOONUI_ACCESS_TOKEN;
   
-  if (envLicense) {
-    log('🔑 Found license in environment variables', colors.blue);
-    return envLicense;
+  if (envToken) {
+    log('🔑 Found auth token in environment variables', colors.blue);
+    return envToken;
   }
   
   return null;
@@ -117,57 +177,75 @@ const main = async () => {
   if (isCI) {
     log('🤖 CI Environment detected', colors.blue);
     
-    const envLicense = checkEnvironmentLicense();
-    if (!envLicense) {
-      log('⚠️  No license found in CI environment', colors.yellow);
-      log('   Set MOONUI_PRO_LICENSE environment variable for CI builds', colors.gray);
-      log('   Example: MOONUI_PRO_LICENSE=moonui_your_license_key_here', colors.gray);
+    const envToken = checkEnvironmentAuth();
+    if (!envToken) {
+      log('⚠️  No auth token found in CI environment', colors.yellow);
+      log('   Set MOONUI_AUTH_TOKEN environment variable for CI builds', colors.gray);
+      log('   Get your token by running: moonui whoami --token', colors.gray);
       return;
     }
     
-    // Validate CI license
-    log('🔍 Validating CI license...', colors.blue);
-    const validation = await validateLicense(envLicense);
+    // Validate CI auth
+    log('🔍 Validating CI authentication...', colors.blue);
+    const validation = await validateAuth(envToken);
     
     if (validation.valid) {
-      log('✅ CI License validation successful!', colors.green);
-      log(`   Plan: ${validation.planType}`, colors.blue);
+      log('✅ CI Authentication successful!', colors.green);
+      log(`   Plan: ${validation.user?.plan || 'N/A'}`, colors.blue);
       return;
     } else {
-      log('❌ CI License validation failed!', colors.red);
+      log('❌ CI Authentication failed!', colors.red);
       log(`   Error: ${validation.message}`, colors.red);
       process.exit(1);
     }
   }
   
-  // Regular installation - check for existing license
-  const licenseConfig = getLicenseConfig();
+  // Regular installation - check for existing auth
+  const authConfig = getAuthConfig();
   
-  if (!licenseConfig || !licenseConfig.licenseKey) {
-    log('🔐 MoonUI Pro License Required', colors.yellow + colors.bright);
+  if (!authConfig || !authConfig.accessToken) {
+    log('🔐 MoonUI Pro Authentication Required', colors.yellow + colors.bright);
     log('', '');
-    log('This package requires a valid MoonUI Pro license.', colors.yellow);
+    log('This package requires authentication with a MoonUI Pro account.', colors.yellow);
     log('', '');
     log('📋 Next Steps:', colors.blue + colors.bright);
-    log('  1. Get a license: https://moonui.dev/pricing', colors.blue);
-    log('  2. Configure license: moonui license set <your-license-key>', colors.blue);
-    log('  3. Or set environment variable: MOONUI_PRO_LICENSE=<your-key>', colors.blue);
+    log('  1. Install MoonUI CLI: npm install -g @moontra/moonui-cli', colors.blue);
+    log('  2. Login to your account: moonui login', colors.blue);
+    log('  3. Or set environment variable: MOONUI_AUTH_TOKEN=<your-token>', colors.blue);
+    log('', '');
+    log('📖 Documentation: https://moonui.dev/docs/authentication', colors.gray);
+    log('🔧 Get your account: https://moonui.dev/pricing', colors.gray);
+    log('', '');
+    process.exit(1);
+  }
+  
+  // Check if Pro access
+  const hasPro = authConfig.user?.plan === 'pro_monthly' || 
+                 authConfig.user?.plan === 'pro_annual' || 
+                 authConfig.user?.plan === 'pro_lifetime' ||
+                 authConfig.user?.features?.includes('pro_components');
+  
+  if (!hasPro) {
+    log('❌ MoonUI Pro Access Required', colors.red + colors.bright);
+    log('', '');
+    log('Your account does not have access to Pro components.', colors.red);
+    log(`Current plan: ${authConfig.user?.plan || 'free'}`, colors.yellow);
     log('', '');
-    log('📖 Documentation: https://moonui.dev/docs/license', colors.gray);
-    log('🔧 CLI Help: moonui license --help', colors.gray);
+    log('📋 Upgrade your account:', colors.blue + colors.bright);
+    log('  Visit: https://moonui.dev/pricing', colors.blue);
     log('', '');
-    return;
+    process.exit(1);
   }
   
-  // Validate existing license
-  log('🔍 Validating license...', colors.blue);
+  // Validate existing auth
+  log('🔍 Validating authentication...', colors.blue);
   
-  const validation = await validateLicense(licenseConfig.licenseKey);
+  const validation = await validateAuth(authConfig.accessToken);
   
   if (validation.valid) {
-    log('✅ License validation successful!', colors.green + colors.bright);
-    log(`   Plan: ${validation.planType}`, colors.blue);
-    log(`   Licensed to: ${licenseConfig.email || 'N/A'}`, colors.blue);
+    log('✅ Authentication successful!', colors.green + colors.bright);
+    log(`   Plan: ${validation.user?.plan || authConfig.user?.plan}`, colors.blue);
+    log(`   Account: ${authConfig.user?.email || 'N/A'}`, colors.blue);
     
     if (validation.expiresAt) {
       const expiryDate = new Date(validation.expiresAt);
@@ -194,27 +272,27 @@ const main = async () => {
     log('   Documentation: https://moonui.dev/docs/components', colors.gray);
     
   } else {
-    log('❌ License validation failed!', colors.red + colors.bright);
+    log('❌ Authentication failed!', colors.red + colors.bright);
     log(`   Error: ${validation.message}`, colors.red);
     log('', '');
     
-    if (validation.error === 'INVALID_LICENSE') {
+    if (validation.error === 'INVALID_TOKEN') {
       log('🔧 Troubleshooting:', colors.yellow + colors.bright);
-      log('  • Check your license key is correct', colors.yellow);
-      log('  • Ensure your subscription is active', colors.yellow);
+      log('  • Your session may have expired', colors.yellow);
+      log('  • Run: moonui login', colors.yellow);
       log('  • Contact support: support@moonui.dev', colors.yellow);
     } else if (validation.error === 'NETWORK_ERROR') {
       log('🌐 Network Issue:', colors.yellow + colors.bright);
-      log('  • License validation requires internet connection', colors.yellow);
+      log('  • Auth validation requires internet connection', colors.yellow);
       log('  • Components will work offline after initial validation', colors.yellow);
       log('  • Retry: npm install --force', colors.yellow);
     }
     
     log('', '');
-    log('📖 License Guide: https://moonui.dev/docs/license', colors.gray);
+    log('📖 Auth Guide: https://moonui.dev/docs/authentication', colors.gray);
     
-    // Don't fail installation for network issues, only for invalid licenses
-    if (validation.error === 'INVALID_LICENSE') {
+    // Don't fail installation for network issues, only for invalid auth
+    if (validation.error === 'INVALID_TOKEN') {
       process.exit(1);
     }
   }

package/src/components/advanced-chart/index.tsx

@@ -40,11 +40,11 @@ import { cn } from '@moontra/moonui'
 
 export type ChartType = 'line' | 'bar' | 'area' | 'pie' | 'scatter'
 
-export interface ChartDataPoint {
+interface ChartDataPoint {
   [key: string]: string | number | null
 }
 
-export interface ChartSeries {
+interface ChartSeries {
   dataKey: string
   name: string
   color: string
@@ -54,7 +54,7 @@ export interface ChartSeries {
   hide?: boolean
 }
 
-export interface AdvancedChartProps {
+interface AdvancedChartProps {
   data: ChartDataPoint[]
   type: ChartType
   series: ChartSeries[]

package/src/components/advanced-forms/index.tsx

@@ -16,7 +16,7 @@ import { cn } from "../../lib/utils"
 import { Lock, Sparkles, CheckCircle, AlertCircle, Eye, EyeOff, Upload, X } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
 
-export interface AdvancedFormField {
+interface AdvancedFormField {
   name: string
   label: string
   type: "text" | "email" | "password" | "textarea" | "select" | "checkbox" | "switch" | "file" | "number" | "url" | "tel"
@@ -33,7 +33,7 @@ export interface AdvancedFormField {
   defaultValue?: any
 }
 
-export interface AdvancedFormsProps {
+interface AdvancedFormsProps {
   fields: AdvancedFormField[]
   onSubmit: (data: any) => void | Promise<void>
   title?: string
@@ -391,15 +391,10 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
 }
 
 export const AdvancedForms: React.FC<AdvancedFormsProps> = ({ className, ...props }) => {
-  // Check if we're in docs mode or have pro access
-  const docsProAccess = { hasAccess: true } // Pro access assumed in package
   const { hasProAccess, isLoading } = useSubscription()
   
-  // In docs mode, always show the component
-  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
-  
-  // If not in docs mode and no pro access, show upgrade prompt
-  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+  // If no pro access, show upgrade prompt
+  if (!isLoading && !hasProAccess) {
     return (
       <Card className={cn("w-fit", className)}>
         <CardContent className="py-6 text-center">

package/src/components/animated-button/index.tsx

@@ -34,7 +34,7 @@ const animatedButtonVariants = cva(
   }
 )
 
-export interface AnimatedButtonProps
+interface AnimatedButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof animatedButtonVariants> {
   state?: "idle" | "loading" | "success" | "error"
@@ -158,15 +158,11 @@ AnimatedButtonInternal.displayName = "AnimatedButtonInternal"
 
 export const AnimatedButton = React.forwardRef<HTMLButtonElement, AnimatedButtonProps>(
   ({ className, ...props }, ref) => {
-    // Check if we're in docs mode or have pro access
-    const docsProAccess = { hasAccess: true } // Pro access assumed in package
+    // Pro package - always show component
     const { hasProAccess, isLoading } = useSubscription()
     
-    // In docs mode, always show the component
-    const canShowComponent = docsProAccess.isDocsMode || hasProAccess
-    
-    // If not in docs mode and no pro access, show upgrade prompt
-    if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+    // Show upgrade prompt if no pro access
+    if (!isLoading && !hasProAccess) {
       return (
         <Card className={cn("w-fit", className)}>
           <CardContent className="py-6 text-center">

package/src/components/calendar/index.tsx

@@ -33,7 +33,7 @@ export interface CalendarEvent {
   type?: 'meeting' | 'task' | 'reminder' | 'event'
 }
 
-export interface CalendarProps {
+interface CalendarProps {
   events?: CalendarEvent[]
   onEventClick?: (event: CalendarEvent) => void
   onEventAdd?: (eventData: Omit<CalendarEvent, 'id'> & { id?: string }) => void

package/src/components/color-picker/index.tsx

@@ -12,7 +12,7 @@ import { cn } from "../../lib/utils"
 import { Lock, Sparkles, Palette, Copy, Check, RotateCcw } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
 
-export interface ColorPickerProps {
+interface ColorPickerProps {
   value?: string
   onChange?: (color: string) => void
   disabled?: boolean
@@ -395,14 +395,12 @@ const ColorPickerInternal: React.FC<ColorPickerProps> = ({
 
 export const ColorPicker: React.FC<ColorPickerProps> = ({ className, ...props }) => {
   // Check if we're in docs mode or have pro access
-  const docsProAccess = { hasAccess: true } // Pro access assumed in package
   const { hasProAccess, isLoading } = useSubscription()
   
   // In docs mode, always show the component
-  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
   
   // If not in docs mode and no pro access, show upgrade prompt
-  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+  if (!isLoading && !hasProAccess) {
     return (
       <Card className={cn("w-fit", className)}>
         <CardContent className="py-6 text-center">

package/src/components/dashboard/index.tsx

@@ -24,7 +24,7 @@ import {
 } from 'lucide-react'
 import { cn } from '@moontra/moonui'
 
-export interface DashboardMetric {
+interface DashboardMetric {
   id: string
   title: string
   value: string | number
@@ -39,7 +39,7 @@ export interface DashboardMetric {
   trend?: number[]
 }
 
-export interface DashboardWidget {
+interface DashboardWidget {
   id: string
   title: string
   description?: string
@@ -49,7 +49,7 @@ export interface DashboardWidget {
   error?: string
 }
 
-export interface DashboardProps {
+interface DashboardProps {
   metrics?: DashboardMetric[]
   widgets?: DashboardWidget[]
   onMetricClick?: (metric: DashboardMetric) => void

package/src/components/data-table/index.tsx

@@ -13,9 +13,9 @@ import {
   ColumnFiltersState,
   VisibilityState,
 } from '@tanstack/react-table'
-import { Button } from './button'
-import { Input } from './input'
-import { Card, CardContent } from './card'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Card, CardContent } from '../ui/card'
 import { 
   ChevronLeft, 
   ChevronRight, 
@@ -32,10 +32,9 @@ import {
   Sparkles
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
-import { useDocsProAccess } from '@/components/docs/docs-pro-provider'
 import { useSubscription } from '../../hooks/use-subscription'
 
-export interface DataTableProps<TData, TValue> {
+interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
   searchable?: boolean
@@ -95,14 +94,12 @@ export function DataTable<TData, TValue>({
   texts = {},
 }: DataTableProps<TData, TValue>) {
   // Check if we're in docs mode or have pro access
-  const docsProAccess = useDocsProAccess()
   const { hasProAccess, isLoading } = useSubscription()
   
   // In docs mode, always show the component
-  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
   
   // If not in docs mode and no pro access, show upgrade prompt
-  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+  if (!isLoading && !hasProAccess) {
     return (
       <Card className={cn("w-full", className)}>
         <CardContent className="py-12 text-center">