@jmruthers/pace-core 0.6.10 → 0.6.11

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 ===
@@ -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="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);
-                  }}
-                />
-              )}
-            </>
-          )}
-          {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>
       )}
 
-      {/* Page Title and Description */}
-      {title && (
-        <>
-          <h1>{title}</h1>
-          {description && (
-            <p className="text-lg text-sec-600 max-w-3xl mx-auto">
-              {description}
-            </p>
-          )}
-        </>
+      {/* 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);
+            }}
+          />
+        )
+      )}
+
+      {/* 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 */}
@@ -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 (
-      <div className="grid place-items-center text-center size-full">
-        <LoadingSpinner
-          size="lg"/><br />
-        {loadingMessage || 'Loading...'}
-        </div>
-    );
+    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

@@ -83,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) {

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

@@ -1,7 +1,7 @@
 /**
  * @file Integration Tests for Select Component
  * @package @jmruthers/pace-core
- * @module Components/Select/__tests__
+ * @module Components/Select
  * @since 1.0.0
  * 
  * Integration tests for Select component and its sub-components.

package/src/components/Select/Select.tsx

@@ -17,9 +17,9 @@ import { Search, X, ChevronDown, Check } from "lucide-react";
 import { Button } from "../Button/Button";
 import { cn } from "../../utils/core/cn";
 import { SelectContext, useSelectContext } from "./context";
-import { useSelectEvents } from "./hooks/useSelectEvents";
-import { useSelectSearch } from "./hooks/useSelectSearch";
-import { useSelectState } from "./hooks/useSelectState";
+import { useSelectEvents } from "./useSelectEvents";
+import { useSelectSearch } from "./useSelectSearch";
+import { useSelectState } from "./useSelectState";
 import type {
   SelectContentProps,
   SelectContextValue,
@@ -29,7 +29,7 @@ import type {
   SelectValueProps,
   UseSelectStateProps,
 } from "./types";
-import { getTextContent } from "./utils/text";
+import { getTextContent } from "./text";
 
 // ============================================================================
 // ROOT COMPONENT
@@ -66,17 +66,23 @@ export const Select = React.forwardRef<HTMLFieldSetElement, SelectProps & UseSel
     // Map to store item values and their text
     const itemsMapRef = React.useRef<Map<string, string>>(new Map());
     const currentValueRef = React.useRef(state.value);
+    const selectedTextRef = React.useRef(state.selectedText);
 
     // Update ref when value changes
     React.useEffect(() => {
       currentValueRef.current = state.value;
     }, [state.value]);
 
+    // Keep selectedTextRef in sync so we can avoid redundant setSelectedText calls
+    React.useEffect(() => {
+      selectedTextRef.current = state.selectedText;
+    }, [state.selectedText]);
+
     // Helper to update selectedText if needed
     const updateSelectedTextIfNeeded = React.useCallback((value: string) => {
       if (value && value === currentValueRef.current) {
         const registeredText = itemsMapRef.current.get(value);
-        if (registeredText) {
+        if (registeredText && registeredText !== selectedTextRef.current) {
           actions.setSelectedText(registeredText);
           return true;
         }
@@ -99,7 +105,9 @@ export const Select = React.forwardRef<HTMLFieldSetElement, SelectProps & UseSel
     // Since SelectItems are always rendered (hidden when closed), we can always find them in the DOM
     const findAndSetSelectedText = React.useCallback(() => {
       if (!state.value) {
-        actions.setSelectedText('');
+        if (selectedTextRef.current !== '') {
+          actions.setSelectedText('');
+        }
         return;
       }
 
@@ -133,7 +141,9 @@ export const Select = React.forwardRef<HTMLFieldSetElement, SelectProps & UseSel
         textContent = textContent.split('\n').map(line => line.trim()).filter(line => line).join(' ');
 
         if (textContent) {
-          actions.setSelectedText(textContent);
+          if (selectedTextRef.current !== textContent) {
+            actions.setSelectedText(textContent);
+          }
           // Also register it for future use
           itemsMapRef.current.set(state.value, textContent);
           return;
@@ -144,7 +154,7 @@ export const Select = React.forwardRef<HTMLFieldSetElement, SelectProps & UseSel
       // Don't clear selectedText in this case - let the MutationObserver or retry effect handle it
       const hasContentContainer = selectElement.querySelector('[data-testid="select-content-hidden"]') ||
         selectElement.querySelector('[data-testid="select-content"]');
-      if (!hasContentContainer) {
+      if (!hasContentContainer && selectedTextRef.current !== '') {
         // No content container means no items exist - clear selectedText
         actions.setSelectedText('');
       }
@@ -283,10 +293,10 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
       "aria-haspopup": "listbox",
       disabled,
       className: cn(
-        "!justify-between relative w-full",
+        "grid grid-cols-[1fr_auto] items-center gap-2 relative w-full",
         "[&_svg]:pointer-events-none",
-        open && !opensUpward && "!rounded-b-none !border-b-0",
-        open && opensUpward && "!rounded-t-none !border-t-0",
+        open && !opensUpward && "rounded-b-none border-b-0",
+        open && opensUpward && "rounded-t-none border-t-0",
         className
       ),
       style: {
@@ -347,7 +357,7 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
           <ChevronDown
             key="chevron-down"
             className={cn(
-              "size-4 opacity-50 transition-transform pointer-events-none float-right",
+              "size-4 opacity-50 transition-transform pointer-events-none print:hidden",
               open && "rotate-180"
             )}
           />
@@ -366,10 +376,10 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
         variant={variant}
         size={size}
         className={cn(
-          "!justify-between relative w-full",
+          "grid grid-cols-[1fr_auto] items-center gap-2 relative w-full print:bg-transparent",
           "[&_svg]:pointer-events-none",
-          open && !opensUpward && "!rounded-b-none !border-b-0",
-          open && opensUpward && "!rounded-t-none !border-t-0",
+          open && !opensUpward && "rounded-b-none border-b-0",
+          open && opensUpward && "rounded-t-none border-t-0",
           className
         )}
         style={{
@@ -390,7 +400,7 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
         {showChevron === true && (
           <ChevronDown
             className={cn(
-              "size-4 opacity-50 transition-transform pointer-events-none float-right",
+              "size-4 opacity-50 transition-transform pointer-events-none print:hidden",
               open && "rotate-180"
             )}
           />
@@ -422,7 +432,7 @@ export const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(
         ref={ref}
         data-testid="select-value"
         style={{ pointerEvents: 'none' }}
-        className={cn("pointer-events-none", className)}
+        className={cn("pointer-events-none min-w-0 overflow-hidden text-left", className)}
       >
         {children || (selectedText ? selectedText : placeholder)}
       </span>
@@ -696,7 +706,7 @@ export const SelectLabel = React.forwardRef<HTMLLIElement, { children: React.Rea
   ({ children, className }, ref) => {
     return (
       <li ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} data-testid="select-label">
-        {children}
+        <div>{children}</div>
       </li>
     );
   }

package/src/components/Select/{__tests__/context.test.tsx → context.test.tsx}

@@ -1,15 +1,15 @@
 /**
  * @file Unit Tests for Select Context
  * @package @jmruthers/pace-core
- * @module Components/Select/__tests__
+ * @module Components/Select
  * @since 1.0.0
  */
 
 import { describe, it, expect, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import React from 'react';
-import { SelectContext, useSelectContext } from '../context';
-import type { SelectContextValue } from '../types';
+import { SelectContext, useSelectContext } from './context';
+import type { SelectContextValue } from './types';
 
 // Following testing standards: use timeout parameter to prevent hanging
 const TEST_TIMEOUT = 10000; // 10 seconds per test

package/src/components/Select/{utils/__tests__/text.test.tsx → text.test.tsx}

@@ -1,13 +1,13 @@
 /**
  * @file Unit Tests for Text Utils
  * @package @jmruthers/pace-core
- * @module Components/Select/utils/__tests__
+ * @module Components/Select
  * @since 1.0.0
  */
 
 import { describe, it, expect } from 'vitest';
 import React from 'react';
-import { getTextContent } from '../text';
+import { getTextContent } from './text';
 
 // Following testing standards: use timeout parameter to prevent hanging
 const TEST_TIMEOUT = 10000; // 10 seconds per test

package/src/components/Select/{utils/text.ts → text.ts}

@@ -3,7 +3,7 @@ import * as React from "react";
 /**
  * Extracts text content from React children.
  * Recursively extracts all text content from a React node tree.
- * 
+ *
  * @param children - React children to extract text from
  * @returns Extracted text content as a string
  */

package/src/components/Select/{hooks/__tests__/useSelectEvents.test.ts → useSelectEvents.test.ts}

@@ -1,14 +1,14 @@
 /**
  * @file Unit Tests for useSelectEvents Hook
  * @package @jmruthers/pace-core
- * @module Components/Select/hooks/__tests__
+ * @module Components/Select
  * @since 1.0.0
  */
 
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
-import { useSelectEvents } from '../useSelectEvents';
-import type { SelectState, SelectActions } from '../../types';
+import { useSelectEvents } from './useSelectEvents';
+import type { SelectState, SelectActions } from './types';
 
 // Following testing standards: use timeout parameter to prevent hanging
 const TEST_TIMEOUT = 10000; // 10 seconds per test
@@ -170,7 +170,7 @@ describe('[unit] useSelectEvents', () => {
 
     it('resets isSelecting flag after timeout', async () => {
       vi.useFakeTimers();
-      
+
       const state = createMockState({ open: true });
       const actions = createMockActions();
       const selectRef = createMockRef();
@@ -253,7 +253,7 @@ describe('[unit] useSelectEvents', () => {
 
     it('cleans up timeout on unmount', () => {
       vi.useFakeTimers();
-      
+
       const state = createMockState({ open: true });
       const actions = createMockActions();
       const selectRef = createMockRef();

package/src/components/Select/{hooks/useSelectEvents.ts → useSelectEvents.ts}

@@ -1,10 +1,10 @@
 import * as React from "react";
-import type { UseSelectEventsProps } from "../types";
+import type { UseSelectEventsProps } from "./types";
 
 /**
  * Hook for managing Select event handlers.
  * Handles click outside, keyboard navigation, and focus management.
- * 
+ *
  * @param props - Select events configuration
  */
 export const useSelectEvents = ({

package/src/components/Select/{hooks/__tests__/useSelectSearch.test.tsx → useSelectSearch.test.tsx}

@@ -1,16 +1,16 @@
 /**
  * @file Unit Tests for useSelectSearch Hook
  * @package @jmruthers/pace-core
- * @module Components/Select/hooks/__tests__
+ * @module Components/Select
  * @since 1.0.0
  */
 
 import { describe, it, expect, vi } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
 import React from 'react';
-import { useSelectSearch } from '../useSelectSearch';
-import { SelectItem } from '../../Select';
-import { getTextContent } from '../../utils/text';
+import { useSelectSearch } from './useSelectSearch';
+import { SelectItem } from './Select';
+import { getTextContent } from './text';
 
 // Following testing standards: use timeout parameter to prevent hanging
 const TEST_TIMEOUT = 10000; // 10 seconds per test
@@ -72,7 +72,7 @@ describe('[unit] useSelectSearch', () => {
       // Filtered children should only contain Apple
       const filtered = result.current.filteredChildren;
       const filteredArray = React.Children.toArray(filtered).filter(Boolean);
-      
+
       // Should have one item
       expect(filteredArray.length).toBe(1);
       const firstChild = filteredArray[0] as React.ReactElement;
@@ -100,7 +100,7 @@ describe('[unit] useSelectSearch', () => {
 
       const filtered = result.current.filteredChildren;
       const filteredArray = React.Children.toArray(filtered).filter(Boolean);
-      
+
       expect(filteredArray.length).toBe(1);
       const firstChild = filteredArray[0] as React.ReactElement;
       expect(React.isValidElement(firstChild)).toBe(true);
@@ -270,7 +270,7 @@ describe('[unit] useSelectSearch', () => {
 
       const filtered = result.current.filteredChildren as React.ReactElement[];
       const filteredArray = React.Children.toArray(filtered) as React.ReactElement[];
-      
+
       // Should find the nested SelectItem
       expect(filteredArray.length).toBeGreaterThan(0);
     }, TEST_TIMEOUT);

package/src/components/Select/{hooks/useSelectSearch.ts → useSelectSearch.ts}

@@ -1,10 +1,10 @@
 import * as React from "react";
-import type { UseSelectSearchProps } from "../types";
+import type { UseSelectSearchProps } from "./types";
 
 /**
  * Hook for managing Select search functionality.
  * Filters select items based on search term.
- * 
+ *
  * @param props - Select search configuration
  */
 export const useSelectSearch = ({

package/src/components/Select/{hooks/__tests__/useSelectState.test.ts → useSelectState.test.ts}

@@ -1,13 +1,13 @@
 /**
  * @file Unit Tests for useSelectState Hook
  * @package @jmruthers/pace-core
- * @module Components/Select/hooks/__tests__
+ * @module Components/Select
  * @since 1.0.0
  */
 
 import { describe, it, expect, vi } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
-import { useSelectState } from '../useSelectState';
+import { useSelectState } from './useSelectState';
 
 // Following testing standards: use timeout parameter to prevent hanging
 const TEST_TIMEOUT = 10000; // 10 seconds per test
@@ -73,6 +73,20 @@ describe('[unit] useSelectState', () => {
 
       expect(result.current.state.selectedText).toBe('Custom Text');
     }, TEST_TIMEOUT);
+
+    it('does not trigger update when setSelectedText is called with same text (prevents maximum update depth)', () => {
+      const { result } = renderHook(() => useSelectState({}));
+
+      act(() => {
+        result.current.actions.setSelectedText('Same Text');
+      });
+      expect(result.current.state.selectedText).toBe('Same Text');
+
+      act(() => {
+        result.current.actions.setSelectedText('Same Text');
+      });
+      expect(result.current.state.selectedText).toBe('Same Text');
+    }, TEST_TIMEOUT);
   });
 
   describe('Controlled Mode', () => {