@almadar/orb 0.2.0

package/shells/orb-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/orb-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/orb-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/orb-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/orb-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/orb-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/orb-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/orb-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 {};

package/shells/orb-shell/packages/client/tailwind-preset.cjs

@@ -0,0 +1,243 @@
+/**
+ * @almadar/ui Tailwind Preset
+ *
+ * Provides the complete Almadar design token system as a Tailwind preset.
+ * Includes a safelist of all CSS-variable-based arbitrary classes used by
+ * @almadar/ui components so Tailwind generates them without scanning node_modules.
+ *
+ * Usage in tailwind.config.js:
+ *   presets: [require('@almadar/ui/tailwind-preset')]
+ */
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  safelist: [
+  'accent-[var(--color-foreground)]',
+  'accent-[var(--color-primary)]',
+  'active:bg-[var(--color-muted)]',
+  'active:bg-[var(--color-primary)]',
+  'active:scale-[var(--active-scale)]',
+  'active:shadow-[var(--shadow-active)]',
+  'active:text-[var(--color-primary-foreground)]',
+  'bg-[var(--color-accent)]',
+  'bg-[var(--color-background)]',
+  'bg-[var(--color-border)]',
+  'bg-[var(--color-card)]',
+  'bg-[var(--color-error)]',
+  'bg-[var(--color-foreground)]',
+  'bg-[var(--color-info)]',
+  'bg-[var(--color-muted)]',
+  'bg-[var(--color-muted-foreground)]',
+  ':bg-[var(--color-primary)]',
+  'bg-[var(--color-primary)]',
+  'bg-[var(--color-primary-foreground)]',
+  'bg-[var(--color-secondary)]',
+  'bg-[var(--color-success)]',
+  'bg-[var(--color-surface)]',
+  'bg-[var(--color-table-header)]',
+  'bg-[var(--color-warning)]',
+  'border-b-[length:var(--border-width)]',
+  'border-b-[var(--color-foreground)]',
+  'border-b-[var(--color-primary)]',
+  'border-[length:var(--border-width)]',
+  'border-[length:var(--border-width-thin)]',
+  'border-l-[length:var(--border-width)]',
+  'border-l-[var(--color-foreground)]',
+  'border-l-[var(--color-primary)]',
+  'border-r-[length:var(--border-width)]',
+  'border-r-[var(--color-foreground)]',
+  'border-r-[var(--color-primary)]',
+  'border-t-[length:var(--border-width)]',
+  'border-t-[var(--color-foreground)]',
+  'border-t-[var(--color-primary)]',
+  'border-[var(--color-accent)]',
+  ':border-[var(--color-border)]',
+  'border-[var(--color-border)]',
+  'border-[var(--color-card)]',
+  'border-[var(--color-error)]',
+  'border-[var(--color-foreground)]',
+  'border-[var(--color-info)]',
+  ':border-[var(--color-primary)]',
+  'border-[var(--color-primary)]',
+  'border-[var(--color-success)]',
+  'border-[var(--color-table-border)]',
+  'border-[var(--color-warning)]',
+  'border-x-[length:var(--border-width)]',
+  'checked:bg-[var(--color-primary)]',
+  'dark:bg-[var(--color-background)]',
+  'dark:bg-[var(--color-card)]',
+  'dark:bg-[var(--color-foreground)]',
+  'dark:bg-[var(--color-muted)]',
+  'dark:border-[var(--color-border)]',
+  'dark:hover:bg-[var(--color-error)]',
+  'dark:hover:bg-[var(--color-muted)]',
+  'dark:text-[var(--color-error)]',
+  'dark:text-[var(--color-foreground)]',
+  'dark:text-[var(--color-muted-foreground)]',
+  'disabled:bg-[var(--color-muted)]',
+  'disabled:text-[var(--color-muted-foreground)]',
+  'duration-[var(--transition-fast)]',
+  'duration-[var(--transition-normal)]',
+  'fill-[var(--color-warning)]',
+  'focus:bg-[var(--color-card)]',
+  'focus:bg-[var(--color-muted)]',
+  'focus:border-[var(--color-error)]',
+  'focus:border-[var(--color-primary)]',
+  'focus:border-[var(--color-ring)]',
+  'focus:ring-[length:var(--focus-ring-width)]',
+  'focus:ring-offset-[length:var(--focus-ring-offset)]',
+  'focus:ring-[var(--color-error)]',
+  'focus:ring-[var(--color-ring)]',
+  'font-[var(--font-weight-bold)]',
+  'font-[var(--font-weight-medium)]',
+  'from-[var(--color-muted)]',
+  'group-hover:bg-[var(--color-foreground)]',
+  'group-hover:text-[var(--color-foreground)]',
+  'group-hover:text-[var(--color-muted-foreground)]',
+  'hover:bg-[var(--color-error)]',
+  'hover:bg-[var(--color-muted)]',
+  'hover:bg-[var(--color-muted-foreground)]',
+  'hover:bg-[var(--color-primary)]',
+  'hover:bg-[var(--color-primary-hover)]',
+  'hover:bg-[var(--color-secondary-hover)]',
+  'hover:bg-[var(--color-success)]',
+  'hover:bg-[var(--color-surface)]',
+  'hover:bg-[var(--color-surface-hover)]',
+  'hover:bg-[var(--color-table-row-hover)]',
+  'hover:bg-[var(--color-warning)]',
+  'hover:border-[var(--color-border)]',
+  'hover:border-[var(--color-border-hover)]',
+  'hover:border-[var(--color-muted-foreground)]',
+  'hover:border-[var(--color-primary)]',
+  'hover:ring-[var(--color-ring)]',
+  'hover:shadow-[var(--shadow-hover)]',
+  'hover:shadow-[var(--shadow-sm)]',
+  'hover:text-[var(--color-error)]',
+  'hover:text-[var(--color-error-foreground)]',
+  'hover:text-[var(--color-foreground)]',
+  'hover:text-[var(--color-primary)]',
+  'hover:text-[var(--color-success-foreground)]',
+  'hover:text-[var(--color-warning-foreground)]',
+  'peer-focus:ring-[var(--color-error)]',
+  'peer-focus:ring-[var(--color-ring)]',
+  'placeholder:text-[var(--color-muted-foreground)]',
+  'placeholder:text-[var(--color-placeholder)]',
+  'ring-[var(--color-accent)]',
+  'ring-[var(--color-error)]',
+  'ring-[var(--color-info)]',
+  'ring-[var(--color-muted-foreground)]',
+  'ring-[var(--color-primary)]',
+  'ring-[var(--color-success)]',
+  'ring-[var(--color-warning)]',
+  'rounded-l-[var(--radius-sm)]',
+  'rounded-r-[var(--radius-sm)]',
+  'rounded-t-[var(--radius-lg)]',
+  'rounded-t-[var(--radius-sm)]',
+  'rounded-[var(--radius-full)]',
+  'rounded-[var(--radius-lg)]',
+  'rounded-[var(--radius-md)]',
+  'rounded-[var(--radius-sm)]',
+  'rounded-[var(--radius-xl)]',
+  'shadow-[var(--shadow-lg)]',
+  'shadow-[var(--shadow-main)]',
+  'shadow-[var(--shadow-sm)]',
+  'text-[var(--color-accent)]',
+  'text-[var(--color-accent-foreground)]',
+  'text-[var(--color-background)]',
+  'text-[var(--color-card-foreground)]',
+  'text-[var(--color-error)]',
+  'text-[var(--color-error-foreground)]',
+  'text-[var(--color-foreground)]',
+  'text-[var(--color-info)]',
+  'text-[var(--color-info-foreground)]',
+  'text-[var(--color-muted)]',
+  'text-[var(--color-muted-foreground)]',
+  'text-[var(--color-primary)]',
+  ':text-[var(--color-primary-foreground)]',
+  'text-[var(--color-primary-foreground)]',
+  'text-[var(--color-secondary-foreground)]',
+  'text-[var(--color-success)]',
+  'text-[var(--color-warning)]',
+  'text-[var(--color-warning-foreground)]',
+  'to-[var(--color-accent)]',
+  ],
+  theme: {
+    fontFamily: {
+      sans: ['var(--font-family)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+      mono: ['var(--font-family-mono, ui-monospace)', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace'],
+    },
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: 'var(--color-primary)',
+          foreground: 'var(--color-primary-foreground)',
+          hover: 'var(--color-primary-hover)',
+        },
+        secondary: {
+          DEFAULT: 'var(--color-secondary)',
+          foreground: 'var(--color-secondary-foreground)',
+          hover: 'var(--color-secondary-hover)',
+        },
+        muted: {
+          DEFAULT: 'var(--color-muted)',
+          foreground: 'var(--color-muted-foreground)',
+        },
+        accent: {
+          DEFAULT: 'var(--color-accent)',
+          foreground: 'var(--color-accent-foreground)',
+        },
+        background: 'var(--color-background)',
+        foreground: 'var(--color-foreground)',
+        card: {
+          DEFAULT: 'var(--color-card)',
+          foreground: 'var(--color-card-foreground)',
+        },
+        surface: 'var(--color-surface)',
+        border: 'var(--color-border)',
+        input: 'var(--color-input)',
+        ring: 'var(--color-ring)',
+        error: {
+          DEFAULT: 'var(--color-error)',
+          foreground: 'var(--color-error-foreground)',
+        },
+        success: {
+          DEFAULT: 'var(--color-success)',
+          foreground: 'var(--color-success-foreground)',
+        },
+        warning: {
+          DEFAULT: 'var(--color-warning)',
+          foreground: 'var(--color-warning-foreground)',
+        },
+        info: {
+          DEFAULT: 'var(--color-info)',
+          foreground: 'var(--color-info-foreground)',
+        },
+      },
+      borderRadius: {
+        none: 'var(--radius-none, 0)',
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+        full: 'var(--radius-full)',
+      },
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        DEFAULT: 'var(--shadow-main)',
+        lg: 'var(--shadow-lg)',
+        inner: 'var(--shadow-inner)',
+      },
+      fontWeight: {
+        normal: 'var(--font-weight-normal, 400)',
+        medium: 'var(--font-weight-medium, 500)',
+        bold: 'var(--font-weight-bold, 600)',
+      },
+      transitionDuration: {
+        fast: 'var(--transition-fast, 150ms)',
+        normal: 'var(--transition-normal, 250ms)',
+        slow: 'var(--transition-slow, 400ms)',
+      },
+    },
+  },
+};

package/shells/orb-shell/packages/client/tailwind.config.js

@@ -0,0 +1,15 @@
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [require('./tailwind-preset.cjs')],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/shells/orb-shell/packages/client/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@generated/*": ["./src/generated/*"],
+      "@pages/*": ["./src/pages/*"],
+      "@app/shared": ["../shared/src/index.ts"],
+      "@app/shared/*": ["../shared/src/*"],
+      "@shared/*": ["../shared/src/*"],
+      "@design-system": ["../../../design-system/index.ts"],
+      "@design-system/*": ["../../../design-system/*"]
+    }
+  },
+  "include": ["src", "../../../design-system/types"],
+  "exclude": ["node_modules", "dist", "src/**/__tests__", "src/**/*.stories.ts", "src/**/*.stories.tsx"]
+}

package/shells/orb-shell/packages/client/vite.config.ts

@@ -0,0 +1,49 @@
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  const backendUrl = env.VITE_API_URL || 'http://localhost:3030';
+  const wsUrl = backendUrl.replace('http://', 'ws://').replace('https://', 'wss://');
+
+  return {
+    plugins: [react()],
+
+    resolve: {
+      alias: {
+        '@design-system': path.resolve(__dirname, '../../../design-system'),
+        '@': path.resolve(__dirname, './src'),
+        '@generated': path.resolve(__dirname, './src/generated'),
+        '@pages': path.resolve(__dirname, './src/pages'),
+        '@app/shared': path.resolve(__dirname, '../shared/src'),
+        '@shared': path.resolve(__dirname, '../shared/src'),
+      },
+    },
+
+    server: {
+      host: true,
+      port: 5173,
+      proxy: {
+        '/api': {
+          target: backendUrl,
+          changeOrigin: true,
+        },
+        '/ws': {
+          target: wsUrl,
+          ws: true,
+        },
+      },
+    },
+
+    build: {
+      outDir: 'dist',
+      sourcemap: true,
+    },
+
+    test: {
+      environment: 'jsdom',
+      globals: true,
+    },
+  };
+});

package/shells/orb-shell/packages/server/eslint.config.cjs

@@ -0,0 +1,19 @@
+"use strict";
+const tsParser = require("@typescript-eslint/parser");
+const almadarPlugin = require("@almadar/eslint-plugin");
+
+module.exports = [
+  { ignores: ["dist/**", "node_modules/**", "**/*.test.ts"] },
+  {
+    files: ["src/**/*.ts"],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+    },
+    plugins: { almadar: almadarPlugin },
+    rules: {
+      "almadar/no-as-any": "error",
+      "almadar/no-import-generated": "error",
+    },
+  },
+];