@almadar/cli 0.3.2 → 1.0.3

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

@@ -0,0 +1,282 @@
+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 {
+    signInWithGoogle,
+    signInWithEmail,
+    signUpWithEmail,
+    signInWithEmailLink,
+    isSignInWithEmailLink,
+    setOnAuthSuccess,
+    loading,
+    error,
+  } = useAuthContext();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  
+  // Set up navigation callback when component mounts
+  useEffect(() => {
+    const returnUrl = searchParams.get('returnUrl');
+    setOnAuthSuccess(() => () => {
+      if (returnUrl) {
+        navigate(returnUrl, { replace: true });
+      } else {
+        navigate('/', { replace: true });
+      }
+    });
+  }, [setOnAuthSuccess, navigate, searchParams]);
+
+  // Check if user is returning from email link
+  useEffect(() => {
+    // Check if this is a sign-in link
+    if (isSignInWithEmailLink(window.location.href)) {
+      // Get the email from localStorage
+      const emailForSignIn = window.localStorage.getItem(EMAIL_FOR_SIGN_IN_KEY);
+      
+      if (emailForSignIn) {
+        // Complete sign-in with email link
+        setCompletingEmailLink(true);
+        signInWithEmailLink(emailForSignIn, window.location.href)
+          .then(() => {
+            // Clear the email from localStorage
+            window.localStorage.removeItem(EMAIL_FOR_SIGN_IN_KEY);
+            // Clean up the URL
+            window.history.replaceState({}, document.title, '/login');
+            setCompletingEmailLink(false);
+          })
+          .catch((error) => {
+            console.error('Error signing in with email link:', error);
+            setCompletingEmailLink(false);
+            // If error, prompt for email
+            setEmailForLinkCompletion(emailForSignIn);
+          });
+      } else {
+        // Email not found - user might be on a different device
+        // Prompt for email to complete sign-in
+        setCompletingEmailLink(true);
+        setEmailForLinkCompletion('');
+      }
+    }
+  }, [signInWithEmailLink, isSignInWithEmailLink]);
+
+  const handleGoogleSignIn = async () => {
+    try {
+      await signInWithGoogle();
+    } catch (error) {
+      console.error('Google sign-in error:', error);
+    }
+  };
+
+  const handleEmailAuth = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    try {
+      if (isSignUp) {
+        await signUpWithEmail(email, password, displayName);
+      } else {
+        await signInWithEmail(email, password);
+      }
+    } catch (error) {
+      console.error('Email authentication error:', error);
+    }
+  };
+
+
+  const handleCompleteEmailLink = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!emailForLinkCompletion.trim()) {
+      return;
+    }
+
+    try {
+      await signInWithEmailLink(emailForLinkCompletion, window.location.href);
+      // Clear the email from localStorage
+      window.localStorage.removeItem(EMAIL_FOR_SIGN_IN_KEY);
+      // Clean up the URL
+      window.history.replaceState({}, document.title, '/login');
+      setCompletingEmailLink(false);
+      setEmailForLinkCompletion('');
+    } catch (error) {
+      console.error('Error completing email link sign-in:', error);
+    }
+  };
+
+  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">
+          {/* Email Link Completion Form (when user clicks link but email not in localStorage) */}
+          {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>
+                <label htmlFor="email-completion" className="sr-only">
+                  Email address
+                </label>
+                <input
+                  id="email-completion"
+                  name="email"
+                  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 focus:z-10 sm:text-sm transition-colors duration-200"
+                  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="group relative w-full flex justify-center items-center gap-2 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 dark:focus:ring-offset-gray-800 disabled:opacity-50 transition-colors duration-200"
+              >
+                {loading ? 'Signing in...' : 'Complete sign-in'}
+              </button>
+            </form>
+          )}
+
+          {/* Regular sign-in flow (if not completing email link) */}
+          {!completingEmailLink && (
+            <>
+              {/* Google Sign In Button */}
+              <div>
+                <button
+                  onClick={handleGoogleSignIn}
+                  disabled={loading}
+                  className="group relative 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 dark:focus:ring-offset-gray-800 disabled:opacity-50 transition-colors duration-200"
+                >
+                  {loading ? 'Signing in...' : 'Sign in with Google'}
+                </button>
+              </div>
+
+              {/* Divider */}
+              <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>
+
+              {/* Email/Password Form */}
+              <div className="mt-6">
+                <form className="mt-6 space-y-4" onSubmit={handleEmailAuth}>
+              {isSignUp && (
+                <div>
+                  <label htmlFor="displayName" className="sr-only">
+                    Display Name
+                  </label>
+                  <input
+                    id="displayName"
+                    name="displayName"
+                    type="text"
+                    required={isSignUp}
+                    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 focus:z-10 sm:text-sm transition-colors duration-200"
+                    placeholder="Display Name"
+                    value={displayName}
+                    onChange={(e) => setDisplayName(e.target.value)}
+                  />
+                </div>
+              )}
+              
+              <div>
+                <label htmlFor="email-address" className="sr-only">
+                  Email address
+                </label>
+                <input
+                  id="email-address"
+                  name="email"
+                  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 focus:z-10 sm:text-sm transition-colors duration-200"
+                  placeholder="Email address"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+              
+              <div>
+                <label htmlFor="password" className="sr-only">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  name="password"
+                  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 focus:z-10 sm:text-sm transition-colors duration-200"
+                  placeholder="Password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </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>
+              )}
+
+              <div>
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="group relative 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 dark:focus:ring-offset-gray-800 disabled:opacity-50 transition-colors duration-200"
+                >
+                  {loading ? 'Processing...' : (isSignUp ? 'Sign Up' : 'Sign In')}
+                </button>
+              </div>
+                </form>
+
+                <div className="text-center mt-4">
+                  <button
+                    onClick={() => setIsSignUp(!isSignUp)}
+                    className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300 transition-colors duration-200 font-medium text-sm"
+                  >
+                    {isSignUp ? 'Already have an account? Sign in' : "Don't have an account? Sign up"}
+                  </button>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuthContext } from '../AuthContext';
+import { Spinner } from '../../../components/atoms';
+
+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 bg-gray-50">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useAuthContext } from '../AuthContext';
+import { LogOut, User } from 'lucide-react';
+
+const UserProfile: React.FC = () => {
+  const { user, signOut, loading } = useAuthContext();
+
+  if (!user) return null;
+
+  const handleSignOut = async () => {
+    try {
+      await signOut();
+    } catch (error) {
+      console.error('Sign out error:', error);
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      {/* User Avatar */}
+      <div className="flex items-center gap-2">
+        {user.photoURL ? (
+          <img
+            className="h-8 w-8 rounded-full ring-2 ring-gray-200 dark:ring-gray-700 shadow-sm"
+            src={user.photoURL}
+            alt={user.displayName || user.email || 'User'}
+          />
+        ) : (
+          <div className="h-8 w-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
+            <User className="h-4 w-4 text-gray-600 dark:text-gray-300" />
+          </div>
+        )}
+        <span className="text-sm text-gray-700 dark:text-gray-300 hidden sm:inline">
+          {user.displayName || user.email}
+        </span>
+      </div>
+
+      {/* Sign Out Button */}
+      <button
+        onClick={handleSignOut}
+        disabled={loading}
+        className="flex items-center gap-1 px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors duration-200 disabled:opacity-50"
+        title="Sign out"
+      >
+        <LogOut className="h-4 w-4" />
+        <span className="hidden sm:inline">Sign out</span>
+      </button>
+    </div>
+  );
+};
+
+export default UserProfile;

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

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

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

@@ -0,0 +1,4 @@
+export { AuthProvider, useAuthContext } from './AuthContext';
+export { authService } from './authService';
+export { Login, ProtectedRoute, UserProfile } from './components';
+export type { AuthState, AuthContextType, LoginCredentials, SignUpCredentials } from './types';

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

@@ -0,0 +1,33 @@
+import { User } from 'firebase/auth';
+
+export interface AuthState {
+  user: User | null;
+  loading: boolean;
+  error: string | null;
+}
+
+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;
+  /** True when running in preview mode without Firebase */
+  isPreviewMode: boolean;
+  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;
+  onAuthSuccess?: () => void;
+  setOnAuthSuccess: (callback: () => void) => void;
+}

package/shells/typescript-shell/packages/client/src/hooks/event-bus-types.ts

@@ -0,0 +1,70 @@
+/**
+ * Event Bus Types
+ *
+ * Type definitions for the page event bus system.
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * A KFlow event that can be emitted on the event bus.
+ */
+export interface KFlowEvent {
+  /** Event type identifier (e.g., 'TASK_COMPLETED', 'VALIDATION_SUCCESS') */
+  type: string;
+  /** Optional payload data */
+  payload?: Record<string, unknown>;
+  /** Timestamp when the event was emitted */
+  timestamp: number;
+  /** Source trait or component that emitted the event */
+  source?: string;
+}
+
+/**
+ * Event listener callback function.
+ */
+export type EventListener = (event: KFlowEvent) => void;
+
+/**
+ * Function to unsubscribe from events.
+ */
+export type Unsubscribe = () => void;
+
+/**
+ * Event bus context type.
+ */
+export interface EventBusContextType {
+  /**
+   * Emit an event to all listeners.
+   *
+   * @param type - Event type identifier
+   * @param payload - Optional payload data
+   */
+  emit: (type: string, payload?: Record<string, unknown>) => void;
+
+  /**
+   * Subscribe to an event type.
+   *
+   * @param type - Event type to listen for
+   * @param listener - Callback function
+   * @returns Unsubscribe function
+   */
+  on: (type: string, listener: EventListener) => Unsubscribe;
+
+  /**
+   * Subscribe to an event type, but only fire once.
+   *
+   * @param type - Event type to listen for
+   * @param listener - Callback function
+   * @returns Unsubscribe function
+   */
+  once: (type: string, listener: EventListener) => Unsubscribe;
+
+  /**
+   * Check if there are any listeners for an event type.
+   *
+   * @param type - Event type to check
+   * @returns True if there are listeners
+   */
+  hasListeners: (type: string) => boolean;
+}

package/shells/typescript-shell/packages/client/src/hooks/index.ts

@@ -0,0 +1,84 @@
+/**
+ * Hooks barrel export
+ */
+
+// EventBus hooks for trait communication
+export { useEventBus, useEventListener, useEmitEvent } from './useEventBus';
+export type { KFlowEvent, EventListener, Unsubscribe, EventBusContextType } from './event-bus-types';
+
+// UI Slot hooks for trait-driven UI rendering
+export {
+  useUISlotManager,
+  DEFAULT_SLOTS,
+  type UISlot,
+  type SlotAnimation,
+  type SlotContent,
+  type RenderUIConfig,
+  type SlotChangeCallback,
+  type UISlotManager,
+} from './useUISlots';
+
+// UI Events hook for bridging UI events to state machines
+export { useUIEvents, useSelectedEntity } from './useUIEvents';
+
+// Entity data hooks for schema-driven components
+export {
+  useEntityList,
+  useEntityDetail,
+  useEntity,
+  entityDataKeys,
+  type EntityDataRecord,
+  type UseEntityListOptions,
+  type UseEntityListResult,
+  type UseEntityDetailResult,
+} from './useEntityData';
+
+// Query singleton hook for filter/search state management
+export {
+  useQuerySingleton,
+  parseQueryBinding,
+  type QueryState,
+  type QuerySingletonEntity,
+  type QuerySingletonResult,
+  type QuerySingletonState,
+} from './useQuerySingleton';
+
+// Entity mutations (legacy direct CRUD)
+export {
+  useEntityMutations,
+  useCreateEntity,
+  useUpdateEntity,
+  useDeleteEntity,
+  type EntityMutationResult,
+  type UseEntityMutationsOptions,
+} from './useEntityMutations';
+
+// Almadar mutations (event-based, recommended)
+export {
+  useOrbitalMutations,
+  useSendOrbitalEvent,
+  ENTITY_EVENTS,
+  type OrbitalEventPayload,
+  type OrbitalEventResponse,
+} from './useOrbitalMutations';
+
+// Entity store hooks (for game/runtime entities)
+export {
+  useEntities,
+  useEntity as useEntityById,
+  useEntitiesByType,
+  useSingletonEntity,
+  usePlayer,
+  usePhysics,
+  useInput,
+  spawnEntity,
+  updateEntity,
+  updateSingleton,
+  removeEntity,
+  clearEntities,
+  getEntity,
+  getByType,
+  getAllEntities,
+  getSingleton,
+  type Entity,
+} from './useEntities';

package/shells/typescript-shell/packages/client/src/hooks/useEntities.ts

@@ -0,0 +1,118 @@
+/**
+ * useEntities Hook
+ *
+ * React hook to access the entity store.
+ * Uses useSyncExternalStore for efficient updates.
+ */
+
+import { useSyncExternalStore, useCallback } from 'react';
+import {
+  subscribe,
+  getSnapshot,
+  getEntity,
+  getByType,
+  getAllEntities,
+  getSingleton,
+  spawnEntity,
+  updateEntity,
+  updateSingleton,
+  removeEntity,
+  clearEntities,
+} from '../stores/entityStore';
+import type { Entity } from '../stores/entityStore';
+
+// Re-export Entity type
+export type { Entity };
+
+/**
+ * Hook to access all entities
+ */
+export function useEntities() {
+  const entities = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  return {
+    entities,
+    getEntity,
+    getByType,
+    getAllEntities,
+    getSingleton,
+    spawnEntity,
+    updateEntity,
+    updateSingleton,
+    removeEntity,
+    clearEntities,
+  };
+}
+
+/**
+ * Hook to access a specific entity by ID
+ */
+export function useEntity(id: string): Entity | undefined {
+  const entities = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return entities.get(id);
+}
+
+/**
+ * Hook to access entities of a specific type
+ */
+export function useEntitiesByType(type: string): Entity[] {
+  const entities = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return [...entities.values()].filter(e => e.type === type);
+}
+
+/**
+ * Hook to access a singleton entity by type
+ */
+export function useSingletonEntity<T extends Entity = Entity>(type: string): T | undefined {
+  const entities = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return [...entities.values()].find(e => e.type === type) as T | undefined;
+}
+
+/**
+ * Hook for Player entity (convenience)
+ */
+export function usePlayer() {
+  const player = useSingletonEntity('Player');
+  const update = useCallback((updates: Partial<Entity>) => {
+    if (player) updateEntity(player.id, updates);
+  }, [player?.id]);
+
+  return { player, updatePlayer: update };
+}
+
+/**
+ * Hook for Physics entity (convenience)
+ */
+export function usePhysics() {
+  const physics = useSingletonEntity('Physics');
+  const update = useCallback((updates: Partial<Entity>) => {
+    if (physics) updateEntity(physics.id, updates);
+  }, [physics?.id]);
+
+  return { physics, updatePhysics: update };
+}
+
+/**
+ * Hook for Input entity (convenience)
+ */
+export function useInput() {
+  const input = useSingletonEntity('Input');
+  const update = useCallback((updates: Partial<Entity>) => {
+    if (input) updateEntity(input.id, updates);
+  }, [input?.id]);
+
+  return { input, updateInput: update };
+}
+
+// Re-export store functions for direct use
+export {
+  spawnEntity,
+  updateEntity,
+  updateSingleton,
+  removeEntity,
+  clearEntities,
+  getEntity,
+  getByType,
+  getAllEntities,
+  getSingleton,
+};