@moontra/moonui 2.2.7 → 2.3.0

package/dist/index.d.mts

@@ -919,8 +919,9 @@ interface ProComponentWrapperProps {
     componentName?: string;
     className?: string;
     fallback?: React__default.ReactNode;
+    requireCLI?: boolean;
 }
-declare function ProComponentWrapper({ children, componentId, componentName, className, fallback }: ProComponentWrapperProps): react_jsx_runtime.JSX.Element;
+declare function ProComponentWrapper({ children, componentId, componentName, className, fallback, requireCLI }: ProComponentWrapperProps): react_jsx_runtime.JSX.Element;
 declare function ProBadge({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -919,8 +919,9 @@ interface ProComponentWrapperProps {
     componentName?: string;
     className?: string;
     fallback?: React__default.ReactNode;
+    requireCLI?: boolean;
 }
-declare function ProComponentWrapper({ children, componentId, componentName, className, fallback }: ProComponentWrapperProps): react_jsx_runtime.JSX.Element;
+declare function ProComponentWrapper({ children, componentId, componentName, className, fallback, requireCLI }: ProComponentWrapperProps): react_jsx_runtime.JSX.Element;
 declare function ProBadge({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -9654,11 +9654,159 @@ function ProComponentWrapper({
   componentId,
   componentName,
   className,
-  fallback
+  fallback,
+  requireCLI = true
 }) {
-  {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+  const [authState, setAuthState] = t.useState({
+    isAuthenticated: false,
+    deviceValid: false,
+    hasProAccess: false,
+    loading: true
+  });
+  t.useEffect(() => {
+    const isDevelopment2 = () => {
+      const checks = {
+        nodeEnv: process.env.NODE_ENV === "development",
+        nextPublicEnv: process.env.NEXT_PUBLIC_VERCEL_ENV === "development",
+        localhost: typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes(".local")),
+        port: typeof window !== "undefined" && (window.location.port === "3000" || window.location.port === "3001" || window.location.port === "8080"),
+        vercelEnv: !process.env.VERCEL,
+        ciEnv: !process.env.CI,
+        deploymentEnv: !process.env.DEPLOYMENT_ENV
+      };
+      if (process.env.VERCEL || process.env.NETLIFY || process.env.RENDER || process.env.RAILWAY_ENVIRONMENT || process.env.FLY_APP_NAME || process.env.DEPLOYMENT_ENV === "production") {
+        return false;
+      }
+      return checks.nodeEnv && checks.localhost && !checks.vercelEnv && !checks.ciEnv;
+    };
+    if (!isDevelopment2() || !requireCLI) {
+      setAuthState({
+        isAuthenticated: true,
+        deviceValid: true,
+        hasProAccess: true,
+        loading: false
+      });
+      return;
+    }
+    async function checkAuth() {
+      try {
+        const cliToken = localStorage.getItem("moonui_cli_token");
+        const deviceId = localStorage.getItem("moonui_device_id");
+        if (!cliToken || !deviceId) {
+          setAuthState({
+            isAuthenticated: false,
+            deviceValid: false,
+            hasProAccess: false,
+            loading: false
+          });
+          return;
+        }
+        const response = await fetch("/api/device/validate", {
+          method: "POST",
+          headers: {
+            "Authorization": `Bearer ${cliToken}`,
+            "X-Device-ID": deviceId,
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            environment: {
+              nodeEnv: process.env.NODE_ENV,
+              hostname: window.location.hostname,
+              port: window.location.port,
+              protocol: window.location.protocol
+            }
+          })
+        });
+        if (response.ok) {
+          const data = await response.json();
+          setAuthState({
+            isAuthenticated: true,
+            deviceValid: data.valid,
+            hasProAccess: data.hasProAccess,
+            loading: false
+          });
+        } else {
+          setAuthState({
+            isAuthenticated: false,
+            deviceValid: false,
+            hasProAccess: false,
+            loading: false
+          });
+        }
+      } catch (error) {
+        setAuthState({
+          isAuthenticated: false,
+          deviceValid: false,
+          hasProAccess: false,
+          loading: false
+        });
+      }
+    }
+    checkAuth();
+  }, [requireCLI]);
+  if (authState.loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse bg-gray-200 dark:bg-gray-800 rounded-lg h-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: "Loading..." }) }) });
+  }
+  const isDevelopment = () => {
+    const checks = {
+      nodeEnv: process.env.NODE_ENV === "development",
+      localhost: typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes(".local")),
+      port: typeof window !== "undefined" && (window.location.port === "3000" || window.location.port === "3001" || window.location.port === "8080")
+    };
+    if (process.env.VERCEL || process.env.NETLIFY || process.env.RENDER || process.env.RAILWAY_ENVIRONMENT || process.env.FLY_APP_NAME) {
+      return false;
+    }
+    return checks.nodeEnv && checks.localhost;
+  };
+  if (isDevelopment() && requireCLI) {
+    if (!authState.isAuthenticated) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "blur-sm grayscale-[0.3] opacity-60 pointer-events-none", children: fallback || children }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-red-500/10 via-transparent to-orange-500/10 border-2 border-dashed border-red-400/30 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center space-y-3 p-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "destructive", className: "mb-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "w-3 h-3 mr-1" }),
+            "CLI AUTH REQUIRED"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-gray-900 dark:text-gray-100", children: "CLI Authentication Required" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 max-w-xs", children: "Run the following command to authenticate:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("code", { className: "block bg-black/80 text-green-400 p-2 rounded text-xs", children: "npx moonui auth login" })
+        ] }) })
+      ] });
+    }
+    if (!authState.deviceValid) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "blur-sm grayscale-[0.3] opacity-60 pointer-events-none", children: fallback || children }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-yellow-500/10 via-transparent to-orange-500/10 border-2 border-dashed border-yellow-400/30 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center space-y-3 p-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: "bg-yellow-500 text-white mb-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { className: "w-3 h-3 mr-1" }),
+            "DEVICE LIMIT"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-gray-900 dark:text-gray-100", children: "Device Limit Exceeded" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 max-w-xs", children: "This device is not registered or you've reached your device limit" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              size: "sm",
+              className: "bg-gradient-to-r from-yellow-500 to-orange-500",
+              onClick: () => window.open("/dashboard/devices", "_blank"),
+              children: "Manage Devices"
+            }
+          )
+        ] }) })
+      ] });
+    }
+    if (!authState.hasProAccess) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        LockedComponent,
+        {
+          componentName: componentName || componentId,
+          className,
+          children: fallback || children
+        }
+      );
+    }
   }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
 }
 function ProBadge({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(