feat(sdks): upgrade React UI, fix error parsing, and bump versions

- refactor(@urbackend/react): overhaul UI for UrAuth, UrUserButton, and Toast to a premium, minimalistic design (no animations).
- fix(@urbackend/sdk): correct parseApiError logic to prioritize specific 'message' fields over generic 'error' strings (fixes soft-deletion warning masking).
- chore(react-sdk-demo): replace text-based loading fallback with a modern CSS spinner in App.tsx.
- chore(sdks): bump @urbackend/sdk to 0.4.4 and @urbackend/react to 0.2.3.

Author: yash-pouranik

examples/react-sdk-demo/src/App.tsx

@@ -19,8 +19,22 @@ function App() {
   };
 
   const LoadingFallback = (
-    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', color: '#64748b', background: '#f8fafc' }}>
-      Loading urBackend...
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', background: '#fafafa' }}>
+      <div style={{
+        width: '24px',
+        height: '24px',
+        border: '2px solid #e4e4e7',
+        borderTopColor: '#09090b',
+        borderRadius: '50%',
+        animation: 'spin 1s linear infinite'
+      }} />
+      <style>
+        {`
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        `}
+      </style>
     </div>
   );
 
@@ -74,18 +88,18 @@ function Dashboard() {
         width: '100%', 
         maxWidth: '500px', 
         background: '#ffffff', 
-        borderRadius: '0', 
+        borderRadius: '16px', 
         padding: '40px', 
-        boxShadow: '0 20px 40px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.05)',
-        border: '1px solid #e2e8f0',
-        fontFamily: 'system-ui, -apple-system, sans-serif'
+        boxShadow: '0 1px 3px rgba(0,0,0,0.05), 0 20px 40px -12px rgba(0,0,0,0.1)',
+        border: '1px solid #e4e4e7',
+        fontFamily: 'system-ui, -apple-system, "Helvetica Neue", sans-serif'
       }}>
 
         <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '32px' }}>
           {typeof user?.avatarUrl === 'string' && user?.avatarUrl ? (
-                <img src={user.avatarUrl } alt="Avatar" style={{ width: '64px', height: '64px', borderRadius: '0', objectFit: 'cover' }} />
+                <img src={user.avatarUrl } alt="Avatar" style={{ width: '64px', height: '64px', borderRadius: '12px', objectFit: 'cover', border: '1px solid #e4e4e7' }} />
           ) : (
-            <div style={{ width: '64px', height: '64px', borderRadius: '0', background: 'linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '24px', fontWeight: 600, color: '#64748b' }}>
+            <div style={{ width: '64px', height: '64px', borderRadius: '12px', background: '#f4f4f5', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '24px', fontWeight: 600, color: '#71717a', border: '1px solid #e4e4e7' }}>
               {user?.name?.[0]?.toUpperCase() || user?.email?.[0]?.toUpperCase()}
             </div>
           )}
@@ -95,8 +109,8 @@ function Dashboard() {
           </div>
         </div>
 
-        <div style={{ background: '#f8fafc', borderRadius: '0', padding: '20px', border: '1px solid #e2e8f0', marginBottom: '32px' }}>
-          <h3 style={{ margin: '0 0 16px', fontSize: '13px', textTransform: 'uppercase', letterSpacing: '1px', color: '#94a3b8', fontWeight: 600 }}>Your Profile</h3>
+        <div style={{ background: '#fafafa', borderRadius: '12px', padding: '20px', border: '1px solid #e4e4e7', marginBottom: '32px' }}>
+          <h3 style={{ margin: '0 0 16px', fontSize: '13px', textTransform: 'uppercase', letterSpacing: '1px', color: '#a1a1aa', fontWeight: 600 }}>Your Profile</h3>
 
           <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px', fontSize: '14px' }}>
             <span style={{ color: '#64748b' }}>Email</span>
@@ -118,20 +132,16 @@ function Dashboard() {
           onClick={logout}
           style={{ 
             width: '100%', 
-            padding: '14px', 
-            borderRadius: '0', 
-            background: 'linear-gradient(180deg, #2a2a2a 0%, #111111 100%)', 
+            padding: '12px 14px', 
+            borderRadius: '8px', 
+            background: '#09090b', 
             color: '#ffffff', 
-            fontSize: '15px', 
-            fontWeight: 600, 
+            fontSize: '14px', 
+            fontWeight: 500, 
             border: 'none', 
-            boxShadow: '0 4px 12px rgba(0,0,0,0.15)', 
-            cursor: 'pointer',
-            transition: 'transform 0.1s ease'
+            boxShadow: '0 1px 2px rgba(0,0,0,0.05)', 
+            cursor: 'pointer'
           }}
-          onMouseDown={e => e.currentTarget.style.transform = 'scale(0.98)'}
-          onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
-          onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
         >
           Sign Out
         </button>