@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/PublicLayout/PublicPageContext.ts

@@ -0,0 +1,28 @@
+/**
+ * @file Public Page Context
+ * @package @jmruthers/pace-core
+ * @module Components/PublicLayout
+ * @since 1.0.0
+ *
+ * Context for public pages.
+ */
+
+import { createContext } from 'react';
+import { createClient } from '@supabase/supabase-js';
+import type { Database } from '../../types/database';
+
+export interface PublicPageContextType {
+  isPublicPage: true;
+  supabase: ReturnType<typeof createClient<Database>> | null;
+  appName: string | null;
+  environment: {
+    supabaseUrl: string | null;
+    supabaseKey: string | null;
+  };
+}
+
+/**
+ * Context for public pages.
+ * Provides isolated context for public pages without authentication requirements.
+ */
+export const PublicPageContext = createContext<PublicPageContextType | undefined>(undefined);

package/src/components/PublicLayout/PublicPageLayout.tsx

@@ -64,7 +64,7 @@
  * - Tailwind CSS - Styling
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { LoadingSpinner } from '../LoadingSpinner';
 import { Button } from '../Button';
@@ -73,6 +73,7 @@ import { FileCategory } from '../../types/file-reference';
 import { useEventTheme } from '../../hooks/useEventTheme';
 import { useAppConfig } from '../../hooks/useAppConfig';
 import { cn } from '../../utils/core/cn';
+import { setupPrintDateTime } from '../../theming/runtime';
 import type { Event } from '../../types/event';
 
 export interface PublicPageLayoutProps {
@@ -102,6 +103,9 @@ export interface PublicPageLayoutProps {
   showValidationErrors?: boolean;
   /** Custom loading message */
   loadingMessage?: string;
+  
+  /** Print page orientation for this page (default: 'portrait') */
+  printPageOrientation?: 'portrait' | 'landscape';
 }
 
 // === HEADER COMPONENT ===
@@ -129,7 +133,7 @@ export interface PublicPageHeaderProps {
 
 export function PublicPageHeader({
   event,
-  eventCode,
+  eventCode: _eventCode,
   title,
   description,
   showEventLogo = true,
@@ -142,7 +146,7 @@ export function PublicPageHeader({
 
   return (
     <header className={cn(
-      "w-full px-[max(0rem,calc((100vw-var(--app-width))/2-0.5rem))] grid grid-cols-[auto_1fr_auto] place-items-center gap-2",
+      "w-full px-app-header-inset grid grid-cols-[auto_1fr_auto] place-items-center gap-2",
       className
     )}>
       {/* App Logo */}
@@ -154,51 +158,50 @@ export function PublicPageHeader({
         />
       )}
 
-      {/* Event Information */}
-      {event && (
-        <>
-          <h1>{event.event_name}</h1>
-          {/* Event Logo */}
-          {showEventLogo && event && (
-            <>
-              {customEventLogo || (
-                <FileDisplay
-                  table_name="event"
-                  record_id={event.event_id}
-                  organisation_id={event.organisation_id}
-                  category={FileCategory.EVENT_LOGOS}
-                  displayOnly={true}
-                  showFallback={true}
-                  fallbackSize="md"
-                  className="mr-4 max-w-36 row-span-2"
-                  generateFallbackText={(fileName) => {
-                    if (!event.event_name) return 'EV';
-                    return event.event_name
-                      .split(/[\s\-_]+/)
-                      .map(word => word.charAt(0).toUpperCase())
-                      .join('')
-                      .substring(0, 3);
-                  }}
-                />
-              )}
-            </>
-          )}
-          {event.event_venue && (
-            <h4>{event.event_venue}</h4>
-          )}
-        </>
+      {/* Single h1: title takes precedence over event name for document outline */}
+      {(title != null || event != null) && (
+        <h1>{title ?? event?.event_name ?? ''}</h1>
+      )}
+
+      {/* Event name as supporting text when title is the main heading */}
+      {event && title && event.event_name && (
+        <p className="max-w-3xl mx-auto">{event.event_name}</p>
+      )}
+
+      {/* Event Logo */}
+      {event && showEventLogo && (
+        customEventLogo || (
+          <FileDisplay
+            table_name="core_events"
+            record_id={event.event_id}
+            organisation_id={event.organisation_id}
+            category={FileCategory.EVENT_LOGOS}
+            displayOnly={true}
+            showFallback={true}
+            fallbackSize="md"
+            className="mr-4 max-w-36 row-span-2"
+            generateFallbackText={(_fileName) => {
+              if (!event.event_name) return 'EV';
+              return event.event_name
+                .split(/[\s\-_]+/)
+                .map(word => word.charAt(0).toUpperCase())
+                .join('')
+                .substring(0, 3);
+            }}
+          />
+        )
       )}
 
-      {/* Page Title and Description */}
-      {title && (
-        <>
-          <h1>{title}</h1>
-          {description && (
-            <p className="text-lg text-sec-600 max-w-3xl mx-auto">
-              {description}
-            </p>
-          )}
-        </>
+      {/* Event venue */}
+      {event?.event_venue && (
+        <h4>{event.event_venue}</h4>
+      )}
+
+      {/* Page Description (only when title is provided) */}
+      {title && description && (
+        <p className="max-w-3xl mx-auto">
+          {description}
+        </p>
       )}
 
       {/* Custom Content */}
@@ -232,7 +235,7 @@ export interface PublicPageFooterProps {
 }
 
 export function PublicPageFooter({
-  event,
+  event: _event,
   companyName = 'Solvera Solutions Pty Ltd',
   year = new Date().getFullYear(),
   links,
@@ -245,7 +248,7 @@ export function PublicPageFooter({
 
   return (
     <footer className={cn('mt-8 py-6 flex justify-center', className)}>
-      <section className='px-4 w-[min(var(--app-width),100%)] mx-auto text-center'>
+      <section className='px-4 w-full max-w-app-content-max mx-auto text-center'>
         {logo && (
           <img src={logo} alt="Logo" className="h-8 w-auto" />
         )}
@@ -272,6 +275,66 @@ export function PublicPageFooter({
   );
 }
 
+// === DEFAULT STATE VIEWS (presentational) ===
+
+function PublicPageLayoutLoading({ loadingMessage }: { loadingMessage?: string }) {
+  return (
+    <main
+      className="grid place-items-center text-center size-full gap-2"
+      role="status"
+      aria-busy="true"
+      aria-live="polite"
+    >
+      <LoadingSpinner size="lg" />
+      <span className="sr-only">Loading</span>
+      {loadingMessage || 'Loading...'}
+    </main>
+  );
+}
+
+interface PublicPageLayoutErrorProps {
+  eventCode: string;
+  onRetry: () => void;
+  printPageOrientation?: 'portrait' | 'landscape';
+}
+
+function PublicPageLayoutError({ eventCode, onRetry, printPageOrientation = 'portrait' }: PublicPageLayoutErrorProps) {
+  return (
+    <main className={cn(
+      "flex flex-col items-center justify-center px-4 w-full max-w-app-content-max mx-auto py-8",
+      printPageOrientation === 'landscape' && 'print-page-landscape',
+      printPageOrientation === 'portrait' && 'print-page-portrait'
+    )}>
+      <h1>Event Not Found</h1>
+      <p>
+        The event code "{eventCode}" is invalid or the event is not available for public viewing.
+      </p>
+      <Button onClick={onRetry}>Try Again</Button>
+    </main>
+  );
+}
+
+interface PublicPageLayoutMissingEventProps {
+  onRetry: (() => void) | undefined;
+  printPageOrientation?: 'portrait' | 'landscape';
+}
+
+function PublicPageLayoutMissingEvent({ onRetry, printPageOrientation = 'portrait' }: PublicPageLayoutMissingEventProps) {
+  return (
+    <main className={cn(
+      "flex flex-col items-center justify-center px-4 w-full max-w-app-content-max mx-auto py-8",
+      printPageOrientation === 'landscape' && 'print-page-landscape',
+      printPageOrientation === 'portrait' && 'print-page-portrait'
+    )}>
+      <h1>Event Not Available</h1>
+      <p>
+        This event is not available for public viewing.
+      </p>
+      {onRetry && <Button onClick={onRetry}>Try Again</Button>}
+    </main>
+  );
+}
+
 /**
  * Layout component for public pages that don't require authentication
  * 
@@ -297,12 +360,19 @@ export function PublicPageLayout({
   customHeader,
   customFooter,
   showValidationErrors = true,
-  loadingMessage
+  loadingMessage,
+  printPageOrientation = 'portrait'
 }: PublicPageLayoutProps) {
   // Apply event theme colors automatically when event is available
   // This works in public page context without requiring EventProvider
   useEventTheme(event);
 
+  // Update --print-date-time when user prints (e.g. Ctrl+P) so printed pages show current date/time
+  useEffect(() => {
+    const teardown = setupPrintDateTime();
+    return teardown;
+  }, []);
+
   // Default refetch function
   const handleRefetch = refetch || (async () => {});
 
@@ -311,13 +381,7 @@ export function PublicPageLayout({
     if (LoadingFallback) {
       return <LoadingFallback />;
     }
-    return (
-      <p className="grid place-items-center text-center size-full">
-        <LoadingSpinner
-          size="lg"/><br />
-        {loadingMessage || 'Loading...'}
-        </p>
-    );
+    return <PublicPageLayoutLoading loadingMessage={loadingMessage} />;
   }
 
   // Handle error state
@@ -326,30 +390,21 @@ export function PublicPageLayout({
       return <ErrorFallback error={error} retry={handleRefetch} />;
     }
     return (
-      <main className="flex flex-col items-center justify-center px-4 w-[min(var(--app-width),100%)] mx-auto py-8">
-
-          <h1>Event Not Found</h1>
-          <p>
-            The event code "{eventCode}" is invalid or the event is not available for public viewing.
-          </p>
-          <Button onClick={handleRefetch}>Try Again</Button>
-
-      </main>
+      <PublicPageLayoutError
+        eventCode={eventCode}
+        onRetry={handleRefetch}
+        printPageOrientation={printPageOrientation}
+      />
     );
   }
 
   // Handle missing event
   if (!event && showValidationErrors) {
     return (
-      <main className="flex flex-col items-center justify-center px-4 w-[min(var(--app-width),100%)] mx-auto py-8">
-
-          <h1>Event Not Available</h1>
-          <p>
-            This event is not available for public viewing.
-          </p>
-          {handleRefetch && <Button onClick={handleRefetch}>Try Again</Button>}
-
-      </main>
+      <PublicPageLayoutMissingEvent
+        onRetry={handleRefetch}
+        printPageOrientation={printPageOrientation}
+      />
     );
   }
 
@@ -368,7 +423,11 @@ export function PublicPageLayout({
         )}
 
         {/* Main Content */}
-        <main className="px-4 w-[min(var(--app-width),100%)] mx-auto py-8">
+        <main className={cn(
+          "px-4 w-full max-w-app-content-max mx-auto py-8 print:px-0",
+          printPageOrientation === 'landscape' && 'print-page-landscape',
+          printPageOrientation === 'portrait' && 'print-page-portrait'
+        )}>
           {children}
         </main>
 

package/src/components/PublicLayout/PublicPageProvider.tsx

@@ -34,27 +34,12 @@
  * ```
  */
 
-import React, { createContext, useContext, ReactNode, useMemo } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { createClient } from '@supabase/supabase-js';
 import type { Database } from '../../types/database';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { logger } from '../../utils/core/logger';
-
-interface PublicPageContextType {
-  isPublicPage: true;
-  supabase: ReturnType<typeof createClient<Database>> | null;
-  appName: string | null;
-  environment: {
-    supabaseUrl: string | null;
-    supabaseKey: string | null;
-  };
-}
-
-/**
- * Context for public pages.
- * Provides isolated context for public pages without authentication requirements.
- */
-export const PublicPageContext = createContext<PublicPageContextType | undefined>(undefined);
+import { PublicPageContext, type PublicPageContextType } from './PublicPageContext';
 
 export interface PublicPageProviderProps {
   children: ReactNode;
@@ -98,7 +83,11 @@ export function PublicPageProvider({ children, appName }: PublicPageProviderProp
                      getEnvVar('NEXT_PUBLIC_SUPABASE_ANON_KEY') || 
                      null;
 
-  // Create Supabase client if environment variables are available
+  // Create Supabase client if environment variables are available.
+  // Allowed exception: PublicPageProvider creates an unauthenticated client for public pages only.
+  // This context is isolated from the main app auth/RLS; the client must not be used for authenticated
+  // or organisation-scoped data. The only other allowed createClient() use is the base client for
+  // UnifiedAuthProvider in main.tsx / App.tsx / lib/supabase.ts (see pace-core compliance standard).
   // Note: VITE_SUPABASE_PUBLISHABLE_KEY should be your publishable key (sb_publishable_...)
   const supabase = useMemo(() => {
     if (!supabaseUrl || !supabaseKey) {
@@ -128,27 +117,3 @@ export function PublicPageProvider({ children, appName }: PublicPageProviderProp
   );
 }
 
-/**
- * Hook to access public page context
- * 
- * @returns Public page context with environment variables
- */
-export function usePublicPageContext(): PublicPageContextType {
-  const context = useContext(PublicPageContext);
-  
-  if (!context) {
-    throw new Error('usePublicPageContext must be used within a PublicPageProvider');
-  }
-  
-  return context;
-}
-
-/**
- * Hook to check if we're in a public page context
- * 
- * @returns True if we're in a public page context
- */
-export function useIsPublicPage(): boolean {
-  const context = useContext(PublicPageContext);
-  return context !== undefined;
-}

package/src/components/PublicLayout/usePublicPageContext.ts

@@ -0,0 +1,36 @@
+/**
+ * @file usePublicPageContext Hook
+ * @package @jmruthers/pace-core
+ * @module Components/PublicLayout
+ * @since 1.0.0
+ *
+ * Hooks for accessing public page context.
+ */
+
+import { useContext } from 'react';
+import { PublicPageContext, type PublicPageContextType } from './PublicPageContext';
+
+/**
+ * Hook to access public page context
+ * 
+ * @returns Public page context with environment variables
+ */
+export function usePublicPageContext(): PublicPageContextType {
+  const context = useContext(PublicPageContext);
+  
+  if (!context) {
+    throw new Error('usePublicPageContext must be used within a PublicPageProvider');
+  }
+  
+  return context;
+}
+
+/**
+ * Hook to check if we're in a public page context
+ * 
+ * @returns True if we're in a public page context
+ */
+export function useIsPublicPage(): boolean {
+  const context = useContext(PublicPageContext);
+  return context !== undefined;
+}

package/src/components/Select/Select.test.tsx

@@ -1,11 +1,11 @@
 /**
- * @file Select Component Tests
- * @description Comprehensive test suite for Select component and its sub-components
+ * @file Integration Tests for Select Component
  * @package @jmruthers/pace-core
  * @module Components/Select
+ * @since 1.0.0
  * 
- * This test suite follows the testing guidelines in TEST_STANDARD.md
- * and focuses on observable behavior, accessibility, and user interactions.
+ * Integration tests for Select component and its sub-components.
+ * Focuses on observable behavior, accessibility, and user interactions.
  */
 
 import React from 'react';
@@ -24,6 +24,9 @@ import {
 } from './Select';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
+// Following testing standards: use timeout parameter to prevent hanging
+// Note: TEST_TIMEOUT removed - individual tests specify timeouts inline
+
 // Mock lucide-react icons
 vi.mock('lucide-react', () => ({
   Search: ({ className, ...props }: React.ComponentProps<'div'>) => <div data-testid="search-icon" className={className} {...props} />,
@@ -46,7 +49,7 @@ vi.mock('../../utils/core/cn', () => ({
   cn: (...classes: (string | undefined | null | false)[]) => classes.filter(Boolean).join(' '),
 }));
 
-describe('Select Component', () => {
+describe('[integration] Select Component', () => {
   const defaultOptions = [
     { value: 'option1', label: 'Option 1' },
     { value: 'option2', label: 'Option 2' },
@@ -157,6 +160,43 @@ describe('Select Component', () => {
       expect(screen.getByText('Custom Trigger')).toBeInTheDocument();
       expect(screen.getByTestId('chevron-down')).toBeInTheDocument();
     });
+
+    it('shows chevron by default when showChevron is not specified', () => {
+      renderSelect();
+      
+      expect(screen.getByTestId('chevron-down')).toBeInTheDocument();
+    });
+
+    it('hides chevron when showChevron is false', () => {
+      renderWithProviders(
+        <Select>
+          <SelectTrigger showChevron={false}>
+            <SelectValue placeholder="Select..." />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="option1">Option 1</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      expect(screen.queryByTestId('chevron-down')).not.toBeInTheDocument();
+    });
+
+    it('hides chevron when showChevron is false with asChild', () => {
+      renderWithProviders(
+        <Select>
+          <SelectTrigger asChild showChevron={false}>
+            <button>Custom Trigger</button>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      expect(screen.getByText('Custom Trigger')).toBeInTheDocument();
+      expect(screen.queryByTestId('chevron-down')).not.toBeInTheDocument();
+    });
   });
 
   describe('Value Component', () => {
@@ -608,8 +648,6 @@ describe('Select Component', () => {
         </Select>
       );
       
-      const trigger = screen.getByTestId('select-trigger');
-      
       // Get search input - should be visible once dropdown opens
       expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
       
@@ -1055,7 +1093,6 @@ describe('Select Component', () => {
       };
       
       const { rerender } = renderSelect(stableProps);
-      const initialRoot = screen.getByTestId('select-root');
       
       // Re-render with same props
       rerender(