@almadar/orb 16.9.0 → 17.0.0

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/PersonaSwitcher.tsx

@@ -0,0 +1,50 @@
+/**
+ * Dev persona switch — view the app as each identity its domain implies.
+ *
+ * Renders only when auth is mocked (no Firebase credentials), so it cannot appear
+ * in a real deployment. Role gates and ownership-scoped lists are the parts of an
+ * app that look identical whether they work or are simply empty; switching viewer
+ * in one click is how you tell the difference.
+ */
+
+import React from 'react';
+import { HStack, Select, Typography } from '@almadar/ui';
+import { isAuthEnabled } from '../../../config/firebase';
+import { listMockAccounts, onMockRosterChanged } from '../../../config/mockAuth';
+import { authService } from '../authService';
+import { useAuthContext } from '../AuthContext';
+
+export function PersonaSwitcher(): React.ReactElement | null {
+  const { user } = useAuthContext();
+  // The roster arrives over HTTP after first paint. Without this the picker
+  // renders its empty pre-fetch state and never updates, because the signed-out
+  // viewer never changes and so the auth listener never fires.
+  const [accounts, setAccounts] = React.useState(() => listMockAccounts());
+
+  React.useEffect(() => onMockRosterChanged(() => setAccounts(listMockAccounts())), []);
+
+  if (isAuthEnabled()) return null;
+
+  const options = accounts.map((p) => ({
+    value: p.id,
+    label: `${String(p.name ?? p.id)} — ${String(p.role ?? 'no role')}`,
+  }));
+
+  return (
+    <HStack gap="sm" align="center">
+      <Typography variant="caption" color="muted">
+        Viewing as
+      </Typography>
+      <Select
+        options={options}
+        value={user?.uid ?? ''}
+        placeholder="Signed out"
+        onChange={(event) => {
+          void authService.signInAsPersona(event.target.value);
+        }}
+      />
+    </HStack>
+  );
+}
+
+export default PersonaSwitcher;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuthContext } from '../AuthContext';
+import { isAuthEnabled } from '../../../config/firebase';
+
+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>
+    );
+  }
+
+  // Auth-disabled mode (no Firebase config): nothing can sign in, so
+  // gating would strand every route on /login — pass straight through.
+  // Checked after `loading` so a configured-but-initializing Firebase
+  // still shows the spinner instead of flashing protected content.
+  if (!isAuthEnabled()) {
+    return <>{children}</>;
+  }
+
+  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,14 @@
+// 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';
+export { PersonaSwitcher } from './components/PersonaSwitcher';
+
+// Service
+export { authService } from './authService';
+
+// Types
+export type { AuthContextType, AuthViewer, LoginCredentials, SignUpCredentials } from './types';

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

@@ -0,0 +1,40 @@
+/**
+ * The signed-in viewer, as the auth UI reads it. Firebase's `User` and the mocked
+ * `MockUser` are both structurally assignable to this, so the provider carries
+ * either without a cast and without the UI knowing which one is live.
+ *
+ * A type alias, not an interface: only aliases get TS's implicit index signature,
+ * which is what lets this be passed to `normalizeUserContext(claims: RawUserClaims)`
+ * without a cast.
+ */
+export type AuthViewer = {
+  uid: string;
+  email: string | null;
+  displayName: string | null;
+  photoURL: string | null;
+  /** Present only for mocked personas; real Firebase claims carry no role. */
+  role?: string;
+};
+
+export interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+export interface SignUpCredentials extends LoginCredentials {
+  displayName?: string;
+}
+
+export interface AuthContextType {
+  user: AuthViewer | 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,19 @@
+/* Import Almadar theme - @import must precede @tailwind directives */
+@import '@almadar/ui/themes/minimalist.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Main slot fills the viewport edge-to-edge. Variant trees control their
+ * own width and padding via className utilities (max-w-*, mx-auto, px-*).
+ * The shell stays out of the way. */
+
+/* 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,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <App />
+);

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';

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

@@ -0,0 +1,12 @@
+/**
+ * Pages Placeholder
+ *
+ * This directory receives generated page components:
+ * - Route pages from OrbitalSchema
+ * - Layout components
+ *
+ * DO NOT EDIT - Contents are overwritten by compiler
+ */
+
+// {{GENERATED_PAGE_EXPORTS}}
+export {};