@jmruthers/pace-core 0.6.1 → 0.6.2

package/CHANGELOG.md

@@ -7,6 +7,34 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Removed
+- **DataTable Debug Tools Exports**: Removed all public exports from `packages/core/src/components/DataTable/utils/debugTools.ts` as they were unused. The debug tools functionality remains available internally for development but is no longer exported. Removed exports include:
+  - `DebugLevel` enum
+  - `DebugConfig` interface
+  - `DEFAULT_DEBUG_CONFIG` constant
+  - `DebugLogEntry` interface
+  - `PerformanceTimelineEntry` interface
+  - `MemorySnapshot` interface
+  - `RenderPerformanceData` interface
+  - `DataTableDebugger` class
+  - `dataTableDebugger` instance
+  - `profile` decorator function
+  - `MemoryMonitor` class
+  - `usePerformanceDebugger` hook
+  - `setupDevTools` function
+- **DataTable Type Exports**: Removed duplicative type exports from `packages/core/src/components/DataTable/types.ts`:
+  - `PartialDataRecord<TData>` - Use `Partial<TData>` instead
+  - `CompleteDataRecord<TData>` - Use `TData` directly instead
+- **Flexible Import Helper Functions**: Removed unused helper functions from `packages/core/src/components/DataTable/utils/flexibleImport.ts`:
+  - `createImportOptions()` - Not used anywhere in the codebase
+  - `createRegionalImportOptions()` - Not used anywhere in the codebase
+  - `testDateParsing()` - Not used anywhere in the codebase
+
+### Migration Notes
+- If you were using `PartialDataRecord` or `CompleteDataRecord`, replace them with `Partial<TData>` and `TData` respectively
+- If you were using any of the debug tools exports, they are no longer available. The debug tools remain functional internally but are not exposed as public APIs
+- If you were using `createImportOptions()`, `createRegionalImportOptions()`, or `testDateParsing()`, you'll need to implement similar functionality yourself or use the `flexibleImport()` function directly with manual options
+
 ## [0.6.0] - 2025-01-28
 
 ### Changed
@@ -14,25 +42,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **BREAKING**: Updated peer dependencies to require React ^19.0.0
 - **BREAKING**: Updated @types/react to ^19.2.7 and @types/react-dom to ^19.2.3
 - **BREAKING**: Updated @vitejs/plugin-react to ^5.1.2
+- **BREAKING**: Database schema changes (table naming standardization, person-scoped profiles)
 - Fixed TypeScript errors related to React 19's stricter type system in Button and Select components
 - Updated vitest.config.ts to remove duplicate configuration keys
 
 ### Added
 - **React Compiler**: Added `babel-plugin-react-compiler` for automatic component optimizations
 - **React Compiler Configuration**: Configured React Compiler in vite.config.ts and vitest.config.ts
-- **Migration Guide**: Added React 19 migration guide at `docs/migration/REACT_19_MIGRATION.md`
-- Updated documentation to reflect React 19 requirements
-
-### Technical Details
-- React Compiler automatically optimizes components during development and in consuming apps
-- TypeScript types updated to handle React 19's stricter `child.props` typing
-- All error boundaries verified compatible with React 19 error handling changes
-- All tests pass with React 19 and React Compiler enabled
+- **Migration Guides**: Added comprehensive migration documentation
 
 ### Migration Notes
+
+**⚠️ CRITICAL**: This version includes major breaking changes. See migration guides for detailed instructions:
+
+- **React 19 Upgrade**: See [React 19 Migration Guide](./docs/migration/V0.6.0_REACT_19_MIGRATION.md)
+- **Complete Migration Guide**: See [v0.5.190 → v0.6.1 Migration Guide](./docs/migration/V0.5.190_TO_V0.6.1_MIGRATION.md)
+- **Database Changes**: See [Database Changes December 2025](./docs/migration/database-changes-december-2025.md)
+- **Table Naming**: See [Database Changes December 2025](./docs/migration/database-changes-december-2025.md#change-1-table-naming-standardization)
+- **Person-Scoped Profiles**: See [Person-Scoped Profiles Migration Guide](./docs/migration/V0.5.190_person-scoped-profiles-migration-guide.md)
+
+**Quick Summary:**
 - Consuming apps must upgrade to React 19.2.3+
-- Consuming apps should install and configure React Compiler for optimal performance
-- See `docs/migration/REACT_19_MIGRATION.md` for complete migration instructions
+- Database migrations required for table naming and person-scoped profiles
+- All table names updated to follow `app_entity` naming convention
+- Profiles are now person-scoped instead of organisation-scoped
 
 ## [Unreleased]
 

package/cursor-rules/00-pace-core-compliance.mdc

@@ -1,9 +1,9 @@
 ---
 description: Enforce pace-core usage patterns and prevent custom solutions when pace-core provides functionality
 globs: ["src/**/*.{ts,tsx,js,jsx}"]
-alwaysApply: true
-paceCoreVersion: "0.5.x"
-rulesVersion: "2025-01-15"
+alwaysApply: false
+paceCoreVersion: "0.6.x"
+rulesVersion: "2025-01-28"
 ---
 # pace-core Compliance Guide
 
@@ -31,16 +31,8 @@ This guide ensures consuming apps use pace-core components, hooks, and utilities
 
 **Example:**
 ```tsx
-// ❌ WRONG - Custom button
-function CustomButton() {
-  return <button className="btn">Click me</button>;
-}
-
-// ✅ CORRECT - Use pace-core
-import { Button } from '@jmruthers/pace-core';
-function MyComponent() {
-  return <Button>Click me</Button>;
-}
+// ❌ WRONG: <button className="btn">Click me</button>
+// ✅ CORRECT: import { Button } from '@jmruthers/pace-core'; <Button>Click me</Button>
 ```
 
 ### Hooks
@@ -59,19 +51,8 @@ function MyComponent() {
 
 **Example:**
 ```tsx
-// ❌ WRONG - Custom debounce hook
-function useCustomDebounce(value: string, delay: number) {
-  const [debounced, setDebounced] = useState(value);
-  useEffect(() => {
-    const timer = setTimeout(() => setDebounced(value), delay);
-    return () => clearTimeout(timer);
-  }, [value, delay]);
-  return debounced;
-}
-
-// ✅ CORRECT - Use pace-core
-import { useDebounce } from '@jmruthers/pace-core';
-const debouncedValue = useDebounce(value, 500);
+// ❌ WRONG: Custom useDebounce hook implementation
+// ✅ CORRECT: import { useDebounce } from '@jmruthers/pace-core'; const debouncedValue = useDebounce(value, 500);
 ```
 
 ### Utilities
@@ -90,14 +71,8 @@ const debouncedValue = useDebounce(value, 500);
 
 **Example:**
 ```tsx
-// ❌ WRONG - Custom date formatting
-function formatDateCustom(date: Date): string {
-  return new Intl.DateTimeFormat('en-US').format(date);
-}
-
-// ✅ CORRECT - Use pace-core
-import { formatDate } from '@jmruthers/pace-core';
-const formatted = formatDate(date);
+// ❌ WRONG: Custom formatDate implementation
+// ✅ CORRECT: import { formatDate } from '@jmruthers/pace-core'; const formatted = formatDate(date);
 ```
 
 ## MUST: Use Secure Supabase Client
@@ -105,15 +80,8 @@ const formatted = formatDate(date);
 **You MUST use `useSecureSupabase()` for all database operations.** Never use the base Supabase client directly.
 
 ```tsx
-// ❌ WRONG - Direct Supabase client
-import { createClient } from '@supabase/supabase-js';
-const supabase = createClient(...);
-await supabase.from('users').select('*');
-
-// ✅ CORRECT - Use secure client
-import { useSecureSupabase } from '@jmruthers/pace-core/rbac';
-const secureSupabase = useSecureSupabase();
-await secureSupabase.from('users').select('*');
+// ❌ WRONG: import { createClient } from '@supabase/supabase-js'; const supabase = createClient(...);
+// ✅ CORRECT: import { useSecureSupabase } from '@jmruthers/pace-core/rbac'; const secureSupabase = useSecureSupabase();
 ```
 
 ## MUST: Setup RBAC Before Use
@@ -124,9 +92,7 @@ await secureSupabase.from('users').select('*');
 // main.tsx - MUST be first
 import { setupRBAC } from '@jmruthers/pace-core/rbac';
 setupRBAC(supabase);
-
 // Then render app
-ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
 ```
 
 ## MUST: Read Documentation Before Using Components
@@ -184,27 +150,13 @@ ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
 
 **❌ WRONG - Guessing props:**
 ```tsx
-// Don't guess - this might not work!
-<DataTable
-  data={data}
-  columns={columns}
-  // Missing required rbac prop - will error!
-/>
+<DataTable data={data} columns={columns} /> // Missing required rbac prop
 ```
 
 **✅ CORRECT - Read documentation first:**
 ```tsx
-// 1. Read DataTable docs in implementation-guides/data-tables.md
-// 2. Understand required props (rbac is mandatory)
-// 3. Use correct props
 import { DataTable } from '@jmruthers/pace-core';
-
-<DataTable
-  data={data}
-  columns={columns}
-  rbac={{ pageName: 'users' }} // Required - found in docs
-  features={{ search: true, pagination: true }}
-/>
+<DataTable data={data} columns={columns} rbac={{ pageName: 'users' }} features={{ search: true }} />
 ```
 
 ### Documentation Checklist
@@ -249,16 +201,9 @@ Before using any pace-core component:
 
 ```tsx
 import { UnifiedAuthProvider, OrganisationProvider } from '@jmruthers/pace-core';
-
-function App() {
-  return (
-    <UnifiedAuthProvider supabaseClient={supabase} appName="Your App">
-      <OrganisationProvider>
-        {/* Your app */}
-      </OrganisationProvider>
-    </UnifiedAuthProvider>
-  );
-}
+<UnifiedAuthProvider supabaseClient={supabase} appName="Your App">
+  <OrganisationProvider>{/* Your app */}</OrganisationProvider>
+</UnifiedAuthProvider>
 ```
 
 ## MUST: Import Core Styles
@@ -296,26 +241,8 @@ import '@jmruthers/pace-core/styles/core.css';
 
 **Example:**
 ```tsx
-// ❌ WRONG - Inline styles
-<div style={{ backgroundColor: 'blue', padding: '10px', color: 'white' }}>
-  Content
-</div>
-
-// ❌ WRONG - Inline styles on pace-core component
-<Button style={{ backgroundColor: 'red' }}>Click me</Button>
-
-// ✅ CORRECT - Use pace-core component with Tailwind classes
-<Card className="bg-main-500 p-4 text-white">
-  <CardContent>Content</CardContent>
-</Card>
-
-// ✅ CORRECT - Use pace-core component as-is (already styled)
-<Button variant="default">Click me</Button>
-
-// ✅ CORRECT - Use Tailwind for layout/spacing only
-<div className="flex items-center gap-4 p-4">
-  <Button>Action</Button>
-</div>
+// ❌ WRONG: <div style={{ backgroundColor: 'blue' }}> or <Button style={{...}}>
+// ✅ CORRECT: <Card className="bg-main-500 p-4"> or <Button variant="default"> or <div className="flex gap-4">
 ```
 
 ### When Tailwind Classes Are Acceptable

package/cursor-rules/01-standards-compliance.mdc

@@ -1,9 +1,9 @@
 ---
 description: Enforce compliance with all pace-core standards across architecture, API, components, code style, security, testing, and RBAC/RLS
 globs: ["src/**/*.{ts,tsx,js,jsx}", "supabase/migrations/**/*.sql"]
-alwaysApply: true
-paceCoreVersion: "0.5.x"
-rulesVersion: "2025-01-15"
+alwaysApply: false
+paceCoreVersion: "0.6.x"
+rulesVersion: "2025-01-28"
 ---
 # Standards Compliance Guide
 
@@ -26,34 +26,16 @@ This guide ensures consuming apps comply with all pace-core standards. Follow th
 **RLS policies MUST use helper functions, NEVER subqueries.**
 
 ```sql
--- ❌ WRONG - Subquery in RLS policy (causes N+1 queries)
-CREATE POLICY rbac_select_users ON users
-  FOR SELECT USING (
-    organisation_id IN (
-      SELECT organisation_id FROM organisation_memberships 
-      WHERE user_id = auth.uid()
-    )
-  );
-
--- ✅ CORRECT - Helper function
-CREATE OR REPLACE FUNCTION get_user_organisation_ids()
-RETURNS uuid[]
-LANGUAGE plpgsql
-STABLE
-SECURITY DEFINER
-SET search_path TO public
-AS $$
-BEGIN
-  RETURN ARRAY(
-    SELECT organisation_id 
-    FROM organisation_memberships 
-    WHERE user_id = get_effective_user_id()
-  );
-END;
+-- ❌ WRONG: Subquery in RLS policy (causes N+1 queries)
+CREATE POLICY rbac_select_users ON users FOR SELECT USING (
+  organisation_id IN (SELECT organisation_id FROM organisation_memberships WHERE user_id = auth.uid())
+);
+
+-- ✅ CORRECT: Helper function with STABLE SECURITY DEFINER
+CREATE OR REPLACE FUNCTION get_user_organisation_ids() RETURNS uuid[] LANGUAGE plpgsql STABLE SECURITY DEFINER SET search_path TO public AS $$
+BEGIN RETURN ARRAY(SELECT organisation_id FROM organisation_memberships WHERE user_id = get_effective_user_id()); END;
 $$;
-
-CREATE POLICY rbac_select_users ON users
-  FOR SELECT USING (organisation_id = ANY(get_user_organisation_ids()));
+CREATE POLICY rbac_select_users ON users FOR SELECT USING (organisation_id = ANY(get_user_organisation_ids()));
 ```
 
 ### MUST: Test Database Migrations
@@ -72,14 +54,8 @@ CREATE POLICY rbac_select_users ON users
 - Bulk operations: `_bulk` suffix (e.g., `app_cake_dish_create_bulk`)
 
 ```sql
--- ✅ CORRECT
-CREATE FUNCTION data_cake_dishes_list(...)
-CREATE FUNCTION app_cake_dish_create(...)
-CREATE FUNCTION app_cake_dish_create_bulk(...)
-
--- ❌ WRONG
-CREATE FUNCTION getDishes(...)
-CREATE FUNCTION create_dish(...)
+-- ✅ CORRECT: data_cake_dishes_list, app_cake_dish_create, app_cake_dish_create_bulk
+-- ❌ WRONG: getDishes, create_dish (wrong naming pattern)
 ```
 
 ### MUST: Use ApiResult Shape
@@ -87,15 +63,8 @@ CREATE FUNCTION create_dish(...)
 **All RPCs MUST return ApiResult shape:**
 
 ```typescript
-type ApiResult<T> =
-  | { ok: true; data: T }
-  | { ok: false; error: ApiError };
-
-type ApiError = {
-  code: string;
-  message: string;
-  details?: object;
-};
+type ApiResult<T> = { ok: true; data: T } | { ok: false; error: ApiError };
+type ApiError = { code: string; message: string; details?: object };
 ```
 
 ### MUST: Enforce RLS in RPCs

package/cursor-rules/02-project-structure.mdc

@@ -1,9 +1,9 @@
 ---
 description: Define standard folder structure and file organization for consuming apps
-globs: ["**/*.{ts,tsx,js,jsx,md}"]
-alwaysApply: true
-paceCoreVersion: "0.5.x"
-rulesVersion: "2025-01-15"
+globs: ["**/*.{ts,tsx,js,jsx,md}", "src/**"]
+alwaysApply: false
+paceCoreVersion: "0.6.x"
+rulesVersion: "2025-01-28"
 ---
 # Project Structure Standard
 

package/cursor-rules/03-solid-principles.mdc

@@ -1,9 +1,9 @@
 ---
 description: Enforce SOLID architecture principles in consuming apps
 globs: ["src/**/*.{ts,tsx}"]
-alwaysApply: true
-paceCoreVersion: "0.5.x"
-rulesVersion: "2025-01-15"
+alwaysApply: false
+paceCoreVersion: "0.6.x"
+rulesVersion: "2025-01-28"
 ---
 # SOLID Principles Guide
 
@@ -18,36 +18,19 @@ This guide enforces SOLID architecture principles to ensure maintainable, extens
 **Each function/component SHOULD do one thing:**
 
 ```tsx
-// ❌ WRONG - Multiple responsibilities
-function UserProfile({ userId }: { userId: string }) {
+// ❌ WRONG: Multiple responsibilities (fetching, formatting, rendering in one component)
+function UserProfile({ userId }) {
   const [user, setUser] = useState(null);
   const [events, setEvents] = useState([]);
-  
-  useEffect(() => {
-    // Fetching user
-    fetchUser(userId).then(setUser);
-    // Fetching events
-    fetchEvents(userId).then(setEvents);
-    // Formatting data
-    const formatted = formatUserData(user);
-    // Rendering UI
-    return <div>...</div>;
-  }, [userId]);
-  
+  useEffect(() => { fetchUser(userId).then(setUser); fetchEvents(userId).then(setEvents); }, [userId]);
   return <div>...</div>;
 }
 
-// ✅ CORRECT - Separated responsibilities
-function UserProfile({ userId }: { userId: string }) {
+// ✅ CORRECT: Separated responsibilities (hooks for data, components for UI)
+function UserProfile({ userId }) {
   const user = useUser(userId);
   const events = useUserEvents(userId);
-  
-  return (
-    <div>
-      <UserInfo user={user} />
-      <UserEvents events={events} />
-    </div>
-  );
+  return <div><UserInfo user={user} /><UserEvents events={events} /></div>;
 }
 ```
 
@@ -56,37 +39,19 @@ function UserProfile({ userId }: { userId: string }) {
 **Complex logic SHOULD be extracted into hooks, services, or utilities:**
 
 ```tsx
-// ❌ WRONG - Business logic in component
+// ❌ WRONG: Business logic in component (filtering, sorting, formatting)
 function EventList() {
   const [events, setEvents] = useState([]);
   const [filtered, setFiltered] = useState([]);
-  
-  useEffect(() => {
-    fetchEvents().then(setEvents);
-  }, []);
-  
-  useEffect(() => {
-    const filtered = events
-      .filter(e => e.status === 'active')
-      .sort((a, b) => a.date - b.date)
-      .map(e => ({ ...e, formattedDate: formatDate(e.date) }));
-    setFiltered(filtered);
-  }, [events]);
-  
+  useEffect(() => { /* complex filtering/sorting logic */ }, [events]);
   return <div>{filtered.map(...)}</div>;
 }
 
-// ✅ CORRECT - Logic in hook
+// ✅ CORRECT: Logic extracted to hook
 function useFilteredEvents() {
   const events = useEvents();
-  return useMemo(() => {
-    return events
-      .filter(e => e.status === 'active')
-      .sort((a, b) => a.date - b.date)
-      .map(e => ({ ...e, formattedDate: formatDate(e.date) }));
-  }, [events]);
+  return useMemo(() => events.filter(...).sort(...).map(...), [events]);
 }
-
 function EventList() {
   const filteredEvents = useFilteredEvents();
   return <div>{filteredEvents.map(...)}</div>;
@@ -102,28 +67,16 @@ function EventList() {
 **Extend functionality through composition, not modification:**
 
 ```tsx
-// ❌ WRONG - Modifying base component
-function BaseButton({ onClick, ...props }) {
-  return <button onClick={onClick} {...props} />;
-}
-
+// ❌ WRONG: Modifying base component behavior
 function SpecialButton({ onClick, ...props }) {
-  // Modifying base behavior
-  const handleClick = (e) => {
-    trackEvent('button-click');
-    onClick?.(e);
-  };
-  return <BaseButton onClick={handleClick} {...props} />;
+  const handleClick = (e) => { trackEvent('button-click'); onClick?.(e); };
+  return <BaseButton onClick={handleClick} {...props} />; // Modifies base
 }
 
-// ✅ CORRECT - Composition with pace-core
+// ✅ CORRECT: Composition with pace-core (extend, don't modify)
 import { Button } from '@jmruthers/pace-core';
-
 function SpecialButton({ onClick, ...props }) {
-  const handleClick = (e) => {
-    trackEvent('button-click');
-    onClick?.(e);
-  };
+  const handleClick = (e) => { trackEvent('button-click'); onClick?.(e); };
   return <Button onClick={handleClick} {...props} />;
 }
 ```
@@ -133,13 +86,8 @@ function SpecialButton({ onClick, ...props }) {
 **Extend behavior through configuration:**
 
 ```tsx
-// ✅ CORRECT - Configurable behavior
-interface DataTableConfig {
-  columns: Column[];
-  features: FeatureConfig;
-  rbac: RBACConfig;
-}
-
+// ✅ CORRECT: Extend through configuration, not code changes
+interface DataTableConfig { columns: Column[]; features: FeatureConfig; rbac: RBACConfig; }
 function MyDataTable({ config }: { config: DataTableConfig }) {
   return <DataTable {...config} />;
 }
@@ -154,22 +102,12 @@ function MyDataTable({ config }: { config: DataTableConfig }) {
 **Derived components/hooks MUST maintain the same interface:**
 
 ```tsx
-// ✅ CORRECT - Maintains interface
-interface BaseHook {
-  data: Data | null;
-  isLoading: boolean;
-  error: Error | null;
-}
-
+// ✅ CORRECT: Derived hooks maintain same interface (substitutable)
+interface BaseHook { data: Data | null; isLoading: boolean; error: Error | null; }
 function useBaseData(): BaseHook { ... }
-
 function useExtendedData(): BaseHook {
   const base = useBaseData();
-  // Extends but maintains same interface
-  return {
-    ...base,
-    // Additional properties are optional
-  };
+  return { ...base }; // Maintains interface, extends behavior
 }
 ```
 
@@ -182,7 +120,7 @@ function useExtendedData(): BaseHook {
 **Interfaces SHOULD be small and focused:**
 
 ```tsx
-// ❌ WRONG - Large interface
+// ❌ WRONG: Large interface with many responsibilities
 interface UserService {
   getUser(id: string): Promise<User>;
   createUser(data: UserData): Promise<User>;
@@ -190,24 +128,12 @@ interface UserService {
   deleteUser(id: string): Promise<void>;
   getUserEvents(id: string): Promise<Event[]>;
   getUserOrganisations(id: string): Promise<Organisation[]>;
-  // ... many more methods
-}
-
-// ✅ CORRECT - Segregated interfaces
-interface UserReader {
-  getUser(id: string): Promise<User>;
-  getUserEvents(id: string): Promise<Event[]>;
 }
 
-interface UserWriter {
-  createUser(data: UserData): Promise<User>;
-  updateUser(id: string, data: Partial<User>): Promise<User>;
-  deleteUser(id: string): Promise<void>;
-}
-
-interface UserOrganisationService {
-  getUserOrganisations(id: string): Promise<Organisation[]>;
-}
+// ✅ CORRECT: Segregated interfaces (focused, specific)
+interface UserReader { getUser(id: string): Promise<User>; getUserEvents(id: string): Promise<Event[]>; }
+interface UserWriter { createUser(data: UserData): Promise<User>; updateUser(id: string, data: Partial<User>): Promise<User>; deleteUser(id: string): Promise<void>; }
+interface UserOrganisationService { getUserOrganisations(id: string): Promise<Organisation[]>; }
 ```
 
 ### SHOULD: Use Specific Props
@@ -215,22 +141,12 @@ interface UserOrganisationService {
 **Component props SHOULD be specific, not generic:**
 
 ```tsx
-// ❌ WRONG - Generic props object
-function UserCard({ user, config }: { user: User; config: any }) {
-  // ...
-}
-
-// ✅ CORRECT - Specific props
-interface UserCardProps {
-  user: User;
-  showEmail?: boolean;
-  showAvatar?: boolean;
-  onEdit?: (user: User) => void;
-}
+// ❌ WRONG: Generic props object (config: any)
+function UserCard({ user, config }: { user: User; config: any }) { ... }
 
-function UserCard({ user, showEmail, showAvatar, onEdit }: UserCardProps) {
-  // ...
-}
+// ✅ CORRECT: Specific, focused props interface
+interface UserCardProps { user: User; showEmail?: boolean; showAvatar?: boolean; onEdit?: (user: User) => void; }
+function UserCard({ user, showEmail, showAvatar, onEdit }: UserCardProps) { ... }
 ```
 
 ## Dependency Inversion Principle (DIP)
@@ -242,50 +158,25 @@ function UserCard({ user, showEmail, showAvatar, onEdit }: UserCardProps) {
 **Depend on interfaces/types, not concrete implementations:**
 
 ```tsx
-// ❌ WRONG - Direct dependency on implementation
+// ❌ WRONG: Direct dependency on implementation (tight coupling)
 function UserService() {
   const supabase = useSecureSupabase();
-  
   async function getUser(id: string) {
-    const { data } = await supabase
-      .from('users')
-      .select('*')
-      .eq('id', id)
-      .single();
+    const { data } = await supabase.from('users').select('*').eq('id', id).single();
     return data;
   }
-  
   return { getUser };
 }
 
-// ✅ CORRECT - Abstracted interface
-interface UserRepository {
-  getUser(id: string): Promise<User | null>;
-}
-
+// ✅ CORRECT: Abstracted interface (depend on abstraction)
+interface UserRepository { getUser(id: string): Promise<User | null>; }
 function createUserRepository(supabase: SupabaseClient): UserRepository {
-  return {
-    async getUser(id: string) {
-      const { data } = await supabase
-        .from('users')
-        .select('*')
-        .eq('id', id)
-        .single();
-      return data;
-    }
-  };
+  return { async getUser(id: string) { /* implementation */ } };
 }
-
 function useUserService() {
   const supabase = useSecureSupabase();
-  const repository = useMemo(
-    () => createUserRepository(supabase),
-    [supabase]
-  );
-  
-  return {
-    getUser: repository.getUser,
-  };
+  const repository = useMemo(() => createUserRepository(supabase), [supabase]);
+  return { getUser: repository.getUser };
 }
 ```
 
@@ -294,22 +185,12 @@ function useUserService() {
 **Inject dependencies rather than creating them:**
 
 ```tsx
-// ❌ WRONG - Hard-coded dependency
-function EventService() {
-  const api = new ApiClient('https://api.example.com');
-  // ...
-}
+// ❌ WRONG: Hard-coded dependency
+function EventService() { const api = new ApiClient('https://api.example.com'); }
 
-// ✅ CORRECT - Injected dependency
-function EventService(api: ApiClient) {
-  // ...
-}
-
-// Or with React context
-function useEventService() {
-  const api = useApiClient(); // From context
-  return useMemo(() => new EventService(api), [api]);
-}
+// ✅ CORRECT: Injected dependency (dependency injection)
+function EventService(api: ApiClient) { ... }
+// Or with React context: const api = useApiClient(); useMemo(() => new EventService(api), [api]);
 ```
 
 ## SOLID Checklist