@almadar/orb 1.9.4

package/shells/almadar-shell/packages/client/src/features/auth/AuthContext.tsx

@@ -0,0 +1,139 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { User } from 'firebase/auth';
+import { auth, initializeFirebase } from '../../config/firebase';
+import { authService } from './authService';
+import { AuthContextType } from './types';
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const useAuthContext = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuthContext must be used within an AuthProvider');
+  }
+  return context;
+};
+
+interface AuthProviderProps {
+  children: React.ReactNode;
+}
+
+export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let unsubscribe: (() => void) | undefined;
+
+    initializeFirebase().then(() => {
+      unsubscribe = auth.onAuthStateChanged((firebaseUser) => {
+        setUser(firebaseUser);
+        setLoading(false);
+      });
+    });
+
+    return () => unsubscribe?.();
+  }, []);
+
+  const clearError = () => setError(null);
+
+  const signInWithGoogle = async () => {
+    try {
+      setLoading(true);
+      clearError();
+      await authService.signInWithGoogle();
+    } catch (err: unknown) {
+      setLoading(false);
+      const firebaseErr = err as { code?: string; message?: string };
+      const isCancel =
+        firebaseErr.code === 'auth/popup-closed-by-user' ||
+        firebaseErr.code === 'auth/cancelled-popup-request' ||
+        firebaseErr.code === 'auth/popup-blocked';
+      if (!isCancel) {
+        setError(firebaseErr.message ?? 'Google sign-in failed');
+      }
+    }
+  };
+
+  const signInWithEmail = async (email: string, password: string) => {
+    try {
+      setLoading(true);
+      clearError();
+      await authService.signInWithEmail(email, password);
+    } catch (err: unknown) {
+      setLoading(false);
+      setError((err as { message?: string }).message ?? 'Sign-in failed');
+    }
+  };
+
+  const signUpWithEmail = async (email: string, password: string, displayName?: string) => {
+    try {
+      setLoading(true);
+      clearError();
+      await authService.signUpWithEmail(email, password, displayName);
+    } catch (err: unknown) {
+      setLoading(false);
+      setError((err as { message?: string }).message ?? 'Sign-up failed');
+    }
+  };
+
+  const sendSignInLinkToEmail = async (email: string) => {
+    try {
+      setLoading(true);
+      clearError();
+      const actionCodeSettings = {
+        url: `${window.location.origin}/login`,
+        handleCodeInApp: true,
+      };
+      await authService.sendSignInLinkToEmail(email, actionCodeSettings);
+      setLoading(false);
+    } catch (err: unknown) {
+      setLoading(false);
+      setError((err as { message?: string }).message ?? 'Failed to send sign-in link');
+    }
+  };
+
+  const signInWithEmailLink = async (email: string, emailLink: string) => {
+    try {
+      setLoading(true);
+      clearError();
+      await authService.signInWithEmailLink(email, emailLink);
+    } catch (err: unknown) {
+      setLoading(false);
+      setError((err as { message?: string }).message ?? 'Email link sign-in failed');
+    }
+  };
+
+  const isSignInWithEmailLink = (emailLink: string): boolean => {
+    return authService.isSignInWithEmailLink(emailLink);
+  };
+
+  const signOut = async () => {
+    try {
+      setLoading(true);
+      await authService.signOut();
+      setUser(null);
+      setLoading(false);
+    } catch (err: unknown) {
+      setLoading(false);
+      setError((err as { message?: string }).message ?? 'Sign-out failed');
+    }
+  };
+
+  const value: AuthContextType = {
+    user,
+    loading,
+    error,
+    signInWithGoogle,
+    signOut,
+    signInWithEmail,
+    signUpWithEmail,
+    sendSignInLinkToEmail,
+    signInWithEmailLink,
+    isSignInWithEmailLink,
+    clearError,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};

package/shells/almadar-shell/packages/client/src/features/auth/authService.ts

@@ -0,0 +1,83 @@
+import {
+  signInWithPopup,
+  GoogleAuthProvider,
+  signInWithEmailAndPassword,
+  createUserWithEmailAndPassword,
+  updateProfile,
+  signOut as firebaseSignOut,
+  sendSignInLinkToEmail as firebaseSendSignInLinkToEmail,
+  isSignInWithEmailLink as firebaseIsSignInWithEmailLink,
+  signInWithEmailLink as firebaseSignInWithEmailLink,
+  ActionCodeSettings,
+} from 'firebase/auth';
+import { auth } from '../../config/firebase';
+
+const googleProvider = new GoogleAuthProvider();
+
+export const authService = {
+  // Google Sign In
+  signInWithGoogle: async () => {
+    try {
+      const result = await signInWithPopup(auth, googleProvider);
+      return result.user;
+    } catch (error) {
+      throw error;
+    }
+  },
+
+  // Email/Password Sign In
+  signInWithEmail: async (email: string, password: string) => {
+    try {
+      const result = await signInWithEmailAndPassword(auth, email, password);
+      return result.user;
+    } catch (error) {
+      throw error;
+    }
+  },
+
+  // Email/Password Sign Up
+  signUpWithEmail: async (email: string, password: string, displayName?: string) => {
+    try {
+      const result = await createUserWithEmailAndPassword(auth, email, password);
+
+      if (displayName) {
+        await updateProfile(result.user, { displayName });
+      }
+
+      return result.user;
+    } catch (error) {
+      throw error;
+    }
+  },
+
+  // Sign Out
+  signOut: async () => {
+    try {
+      await firebaseSignOut(auth);
+    } catch (error) {
+      throw error;
+    }
+  },
+
+  // Email Link Authentication
+  sendSignInLinkToEmail: async (email: string, actionCodeSettings: ActionCodeSettings) => {
+    try {
+      await firebaseSendSignInLinkToEmail(auth, email, actionCodeSettings);
+    } catch (error) {
+      throw error;
+    }
+  },
+
+  isSignInWithEmailLink: (emailLink: string): boolean => {
+    return firebaseIsSignInWithEmailLink(auth, emailLink);
+  },
+
+  signInWithEmailLink: async (email: string, emailLink: string) => {
+    try {
+      const result = await firebaseSignInWithEmailLink(auth, email, emailLink);
+      return result.user;
+    } catch (error) {
+      throw error;
+    }
+  },
+};

package/shells/almadar-shell/packages/client/src/features/auth/components/Login.tsx

@@ -0,0 +1,218 @@
+import React, { useState, useEffect } from 'react';
+import { useAuthContext } from '../AuthContext';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+const EMAIL_FOR_SIGN_IN_KEY = 'emailForSignIn';
+
+const Login: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isSignUp, setIsSignUp] = useState(false);
+  const [displayName, setDisplayName] = useState('');
+  const [completingEmailLink, setCompletingEmailLink] = useState(false);
+  const [emailForLinkCompletion, setEmailForLinkCompletion] = useState('');
+
+  const {
+    loading,
+    error,
+    signInWithGoogle,
+    signInWithEmail,
+    signUpWithEmail,
+    signInWithEmailLink,
+    isSignInWithEmailLink,
+    clearError,
+  } = useAuthContext();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  // Redirect on successful auth
+  const { user } = useAuthContext();
+  useEffect(() => {
+    if (user) {
+      const returnUrl = searchParams.get('returnUrl') || '/';
+      navigate(returnUrl, { replace: true });
+    }
+  }, [user, navigate, searchParams]);
+
+  // Check if user is returning from email link
+  useEffect(() => {
+    if (isSignInWithEmailLink(window.location.href)) {
+      const emailForSignIn = window.localStorage.getItem(EMAIL_FOR_SIGN_IN_KEY);
+
+      if (emailForSignIn) {
+        setCompletingEmailLink(true);
+        signInWithEmailLink(emailForSignIn, window.location.href)
+          .then(() => {
+            window.localStorage.removeItem(EMAIL_FOR_SIGN_IN_KEY);
+            window.history.replaceState({}, document.title, '/login');
+            setCompletingEmailLink(false);
+          })
+          .catch(() => {
+            setCompletingEmailLink(false);
+            setEmailForLinkCompletion(emailForSignIn);
+          });
+      } else {
+        setCompletingEmailLink(true);
+        setEmailForLinkCompletion('');
+      }
+    }
+  }, [signInWithEmailLink, isSignInWithEmailLink]);
+
+  const handleGoogleSignIn = async () => {
+    clearError();
+    await signInWithGoogle();
+  };
+
+  const handleEmailAuth = async (e: React.FormEvent) => {
+    e.preventDefault();
+    clearError();
+    if (isSignUp) {
+      await signUpWithEmail(email, password, displayName);
+    } else {
+      await signInWithEmail(email, password);
+    }
+  };
+
+  const handleCompleteEmailLink = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!emailForLinkCompletion.trim()) return;
+
+    await signInWithEmailLink(emailForLinkCompletion, window.location.href);
+    window.localStorage.removeItem(EMAIL_FOR_SIGN_IN_KEY);
+    window.history.replaceState({}, document.title, '/login');
+    setCompletingEmailLink(false);
+    setEmailForLinkCompletion('');
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-8 shadow-lg">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">
+            {completingEmailLink
+              ? 'Complete sign-in'
+              : isSignUp
+                ? 'Create your account'
+                : 'Sign in to your account'}
+          </h2>
+        </div>
+
+        <div className="mt-8 space-y-6">
+          {completingEmailLink && (
+            <form onSubmit={handleCompleteEmailLink} className="space-y-4">
+              <div>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
+                  Please enter your email address to complete sign-in.
+                </p>
+                <input
+                  type="email"
+                  autoComplete="email"
+                  required
+                  value={emailForLinkCompletion}
+                  onChange={(e) => setEmailForLinkCompletion(e.target.value)}
+                  className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                  placeholder="Enter your email"
+                />
+              </div>
+
+              {error && (
+                <div className="text-red-600 dark:text-red-300 text-sm text-center bg-red-50 dark:bg-red-900/20 p-3 rounded-md border border-red-200 dark:border-red-800">
+                  {error}
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={loading || !emailForLinkCompletion.trim()}
+                className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+              >
+                {loading ? 'Signing in...' : 'Complete sign-in'}
+              </button>
+            </form>
+          )}
+
+          {!completingEmailLink && (
+            <>
+              <button
+                onClick={handleGoogleSignIn}
+                disabled={loading}
+                className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+              >
+                {loading ? 'Signing in...' : 'Sign in with Google'}
+              </button>
+
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-gray-300 dark:border-gray-700" />
+                </div>
+                <div className="relative flex justify-center text-sm">
+                  <span className="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
+                    Or sign in with email
+                  </span>
+                </div>
+              </div>
+
+              <form className="space-y-4" onSubmit={handleEmailAuth}>
+                {isSignUp && (
+                  <input
+                    type="text"
+                    required
+                    className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                    placeholder="Display Name"
+                    value={displayName}
+                    onChange={(e) => setDisplayName(e.target.value)}
+                  />
+                )}
+
+                <input
+                  type="email"
+                  autoComplete="email"
+                  required
+                  className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                  placeholder="Email address"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+
+                <input
+                  type="password"
+                  autoComplete={isSignUp ? 'new-password' : 'current-password'}
+                  required
+                  className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                  placeholder="Password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+
+                {error && (
+                  <div className="text-red-600 dark:text-red-300 text-sm text-center bg-red-50 dark:bg-red-900/20 p-3 rounded-md border border-red-200 dark:border-red-800">
+                    {error}
+                  </div>
+                )}
+
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                >
+                  {loading ? 'Processing...' : isSignUp ? 'Sign Up' : 'Sign In'}
+                </button>
+              </form>
+
+              <div className="text-center">
+                <button
+                  onClick={() => setIsSignUp(!isSignUp)}
+                  className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 font-medium text-sm"
+                >
+                  {isSignUp ? 'Already have an account? Sign in' : "Don't have an account? Sign up"}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

package/shells/almadar-shell/packages/client/src/features/auth/components/ProtectedRoute.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuthContext } from '../AuthContext';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
+  const { user, loading } = useAuthContext();
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600" />
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;

package/shells/almadar-shell/packages/client/src/features/auth/components/UserProfile.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useAuthContext } from '../AuthContext';
+
+const UserProfile: React.FC = () => {
+  const { user, loading, signOut } = useAuthContext();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  if (!user) return null;
+
+  const handleSignOut = async () => {
+    setOpen(false);
+    await signOut();
+  };
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center space-x-2 hover:opacity-80 transition-opacity"
+      >
+        {user.photoURL ? (
+          <img
+            className="h-8 w-8 rounded-full ring-2 ring-gray-200 dark:ring-gray-700"
+            src={user.photoURL}
+            alt={user.displayName || 'User'}
+          />
+        ) : (
+          <div className="h-8 w-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-sm font-medium text-gray-600 dark:text-gray-300">
+            {(user.displayName || user.email || 'U')[0].toUpperCase()}
+          </div>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black/5 dark:ring-white/10 z-50">
+          <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700">
+            <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+              {user.displayName || 'User'}
+            </p>
+            <p className="text-sm text-gray-500 dark:text-gray-400 truncate">
+              {user.email}
+            </p>
+          </div>
+          <div className="py-1">
+            <button
+              onClick={handleSignOut}
+              disabled={loading}
+              className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UserProfile;

package/shells/almadar-shell/packages/client/src/features/auth/components/index.ts

@@ -0,0 +1,3 @@
+export { default as Login } from './Login';
+export { default as UserProfile } from './UserProfile';
+export { default as ProtectedRoute } from './ProtectedRoute';

package/shells/almadar-shell/packages/client/src/features/auth/index.ts

@@ -0,0 +1,13 @@
+// Context
+export { AuthProvider, useAuthContext } from './AuthContext';
+
+// Components
+export { default as Login } from './components/Login';
+export { default as UserProfile } from './components/UserProfile';
+export { default as ProtectedRoute } from './components/ProtectedRoute';
+
+// Service
+export { authService } from './authService';
+
+// Types
+export type { AuthContextType, LoginCredentials, SignUpCredentials } from './types';

package/shells/almadar-shell/packages/client/src/features/auth/types.ts

@@ -0,0 +1,24 @@
+import { User } from 'firebase/auth';
+
+export interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+export interface SignUpCredentials extends LoginCredentials {
+  displayName?: string;
+}
+
+export interface AuthContextType {
+  user: User | null;
+  loading: boolean;
+  error: string | null;
+  signInWithGoogle: () => Promise<void>;
+  signOut: () => Promise<void>;
+  signInWithEmail: (email: string, password: string) => Promise<void>;
+  signUpWithEmail: (email: string, password: string, displayName?: string) => Promise<void>;
+  sendSignInLinkToEmail: (email: string) => Promise<void>;
+  signInWithEmailLink: (email: string, emailLink: string) => Promise<void>;
+  isSignInWithEmailLink: (emailLink: string) => boolean;
+  clearError: () => void;
+}

package/shells/almadar-shell/packages/client/src/index.css

@@ -0,0 +1,35 @@
+/* Import Almadar theme - @import must precede @tailwind directives */
+@import '@almadar/ui/themes/almadar.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Page-level layout: padding and max-width for main content area */
+.ui-slot-main {
+  padding: 1.5rem 1rem;
+  max-width: 80rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 768px) {
+  .ui-slot-main {
+    padding: 1.5rem 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ui-slot-main {
+    padding: 2rem 2rem;
+  }
+}
+
+/* Global transition baseline: smooth state changes on interactive elements */
+button,
+a,
+[role="button"],
+[data-entity-row],
+[data-interactive] {
+  transition: all var(--transition-normal, 250ms) var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
+}

package/shells/almadar-shell/packages/client/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/shells/almadar-shell/packages/client/src/navigation/index.ts

@@ -0,0 +1,55 @@
+/**
+ * Navigation Module for Compiled Shells
+ *
+ * Re-exports schema-driven navigation from @almadar/ui/renderer.
+ * This module provides unified navigation that:
+ * - Finds pages by path pattern (supports :id params)
+ * - Switches active page via NavigationContext
+ * - Fires INIT events with merged payload (route params + explicit)
+ * - Optionally updates browser URL via history.pushState
+ *
+ * Usage in generated pages:
+ * ```tsx
+ * import { useNavigateTo, useInitPayload } from '../navigation';
+ *
+ * function InspectionsPage() {
+ *   const navigateTo = useNavigateTo();
+ *   const initPayload = useInitPayload();
+ *
+ *   const handleRowClick = (item) => {
+ *     navigateTo(`/inspection/${item.id}`, { id: item.id });
+ *   };
+ *
+ *   // Use initPayload for INIT event handling
+ * }
+ * ```
+ *
+ * @packageDocumentation
+ */
+
+// Re-export all navigation utilities from @almadar/ui/renderer
+export {
+  // Context and Provider
+  NavigationProvider,
+  useNavigation,
+  useNavigateTo,
+  useNavigationState,
+  useInitPayload,
+  useActivePage,
+  useNavigationId,
+  // Path utilities
+  matchPath,
+  extractRouteParams,
+  pathMatches,
+  // Page finding utilities
+  findPageByPath,
+  findPageByName,
+  getDefaultPage,
+  getAllPages,
+} from '@almadar/ui/renderer';
+
+export type {
+  NavigationState,
+  NavigationContextValue,
+  NavigationProviderProps,
+} from '@almadar/ui/renderer';