@stevederico/skateboard-ui 2.9.5 → 2.9.7

package/App.jsx

@@ -159,15 +159,16 @@ export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRo
       <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
         <Toaster position="top-right" richColors closeButton />
         <ContextProvider constants={constants}>
-          <AuthOverlay />
           {Wrapper ? (
             <Wrapper>
               <Router>
+                <AuthOverlay />
                 <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} landingPage={landingPage} overrides={overrides} />
               </Router>
             </Wrapper>
           ) : (
             <Router>
+              <AuthOverlay />
               <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} landingPage={landingPage} overrides={overrides} />
             </Router>
           )}

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+2.9.7
+
+  Add useSafeNavigate hook
+  Fix Router context error in auth views
+
+2.9.6
+
+  Move AuthOverlay inside Router
+
 2.9.5
 
   Reuse SignInView in AuthOverlay

package/core/Utilities.js

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useContext } from 'react';
+import { UNSAFE_NavigationContext } from 'react-router-dom';
 import { getDispatch } from './Context.jsx';
 
 // Constants will be initialized by the app shell
@@ -985,3 +986,33 @@ export function setUIVisibility({ sidebar, tabBar }) {
         console.warn('setUIVisibility: Context not initialized');
     }
 }
+
+/**
+ * Safe navigation hook that works with or without Router context.
+ *
+ * Uses UNSAFE_NavigationContext directly instead of useNavigate() to avoid
+ * throwing when rendered outside Router (e.g., in Portals or module duplication).
+ * Falls back to window.location.href if no Router context is available.
+ *
+ * @returns {function} Navigate function (path, options?) => void
+ *
+ * @example
+ * const navigate = useSafeNavigate();
+ * navigate('/app');
+ * navigate('/app', { replace: true });
+ */
+export function useSafeNavigate() {
+    const ctx = useContext(UNSAFE_NavigationContext);
+
+    if (!ctx) {
+        return (path) => { window.location.href = path; };
+    }
+
+    return (path, options = {}) => {
+        if (options.replace) {
+            ctx.navigator.replace(path, options.state);
+        } else {
+            ctx.navigator.push(path, options.state);
+        }
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "2.9.5",
+  "version": "2.9.7",
   "type": "module",
   "exports": {
     "./Sidebar": {

package/views/SignInView.jsx

@@ -6,9 +6,8 @@ import { Label } from "../shadcn/ui/label"
 import { Card, CardContent, CardHeader } from "../shadcn/ui/card"
 import { Alert, AlertDescription } from "../shadcn/ui/alert"
 import DynamicIcon from '../core/DynamicIcon';
-import { useNavigate } from 'react-router-dom';
 import { getState } from "../core/Context.jsx";
-import { getBackendURL } from '../core/Utilities'
+import { getBackendURL, useSafeNavigate } from '../core/Utilities'
 
 /**
  * Sign-in form component.
@@ -43,7 +42,7 @@ export default function LoginForm({
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const navigate = useNavigate();
+  const navigate = useSafeNavigate();
   const emailInputRef = useRef(null);
 
   const [errorMessage, setErrorMessage] = useState('')

package/views/SignUpView.jsx

@@ -6,9 +6,8 @@ import { Label } from "../shadcn/ui/label"
 import { Card, CardContent, CardHeader } from "../shadcn/ui/card"
 import { Alert, AlertDescription } from "../shadcn/ui/alert"
 import DynamicIcon from '../core/DynamicIcon';
-import { useNavigate } from 'react-router-dom';
 import { getState } from "../core/Context.jsx";
-import { getBackendURL } from '../core/Utilities'
+import { getBackendURL, useSafeNavigate } from '../core/Utilities'
 
 /**
  * Sign-up form component.
@@ -44,8 +43,8 @@ export default function LoginForm({
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [name, setName] = useState('');
-  const navigate = useNavigate();
-  const [errorMessage, setErrorMessage] = useState('')
+  const [errorMessage, setErrorMessage] = useState('');
+  const navigate = useSafeNavigate();
   const nameInputRef = useRef(null);
 
   // Focus the first input on mount