@jmruthers/pace-core 0.5.101 → 0.5.103

package/dist/{DataTable-DXELRJIX.js → DataTable-EEDFYMJP.js}

@@ -54,7 +54,7 @@ import {
   sortHierarchicalDataWithSorting,
   validateHierarchicalData,
   validatePaginationConfig
-} from "./chunk-EVVRUGQ2.js";
+} from "./chunk-62AVH7CM.js";
 import "./chunk-2KLAOD4M.js";
 import "./chunk-S63MFSY6.js";
 import "./chunk-Q7APDV6H.js";
@@ -157,4 +157,4 @@ export {
   validateHierarchicalData,
   validatePaginationConfig
 };
-//# sourceMappingURL=DataTable-DXELRJIX.js.map
+//# sourceMappingURL=DataTable-EEDFYMJP.js.map

package/dist/{PublicLoadingSpinner-C2h8zg67.d.ts → PublicLoadingSpinner-48ewSMKK.d.ts}

@@ -2950,15 +2950,12 @@ declare function FileUpload({ supabase, table_name, record_id, organisation_id,
 multiple, disabled, isPublic, className, showPreview, showProgress, onUploadSuccess, onUploadError, onProgress, children }: FileUploadProps): react_jsx_runtime.JSX.Element;
 
 interface FileDisplayProps {
-    /** Supabase client instance. Optional when used in PublicPageProvider or UnifiedAuthProvider context */
-    supabase?: SupabaseClient;
     table_name: string;
     record_id: string;
     organisation_id: string;
     category?: FileCategory;
     /** Display only a single file instead of all files. Uses first file (prefers images) from all files, without category filtering */
     displayOnly?: boolean;
-    showUpload?: boolean;
     showDelete?: boolean;
     className?: string;
     children?: React__default.ReactNode;
@@ -2969,6 +2966,14 @@ interface FileDisplayProps {
         error: Error | string | null;
         retry?: () => void;
     }>;
+    /** Whether to show fallback UI when no file is available or image fails to load */
+    showFallback?: boolean;
+    /** Custom function to generate fallback text from file name or other context */
+    generateFallbackText?: (fileName?: string) => string;
+    /** Explicit fallback text to display (overrides generateFallbackText) */
+    fallbackText?: string;
+    /** Size variant for fallback display (only applies when showFallback is true) */
+    fallbackSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 /**
  * Component for displaying file references with context-awareness
@@ -2976,8 +2981,7 @@ interface FileDisplayProps {
  * This component is context-aware and automatically detects whether it's being used
  * in a public or authenticated context. It fetches and displays files from storage.
  *
- * When `supabase` prop is provided, it uses the explicit client (backwards compatible).
- * When `supabase` prop is not provided, it automatically detects context and uses:
+ * The component automatically detects context and uses:
  * - PublicPageProvider context for public pages
  * - UnifiedAuthProvider context for authenticated pages
  *
@@ -2986,7 +2990,7 @@ interface FileDisplayProps {
  * @param props.category - Optional category filter. When specified, only displays files matching this category and uses single file display variant.
  * @returns React element with file display
  */
-declare function FileDisplay({ supabase, table_name, record_id, organisation_id, category, displayOnly, showUpload, showDelete, className, children, loadingComponent, errorComponent }: FileDisplayProps): react_jsx_runtime.JSX.Element;
+declare function FileDisplay({ table_name, record_id, organisation_id, category, displayOnly, showDelete, className, children, loadingComponent, errorComponent, showFallback, generateFallbackText, fallbackText, fallbackSize }: FileDisplayProps): react_jsx_runtime.JSX.Element;
 
 declare function useFileReference(supabase: SupabaseClient): {
     isLoading: boolean;
@@ -3030,7 +3034,16 @@ declare function useFileReferenceById(supabase: SupabaseClient, fileReferenceId:
     clearError: () => void;
 };
 /**
- * Hook for getting files by category
+ * Convenience hook for getting files by category with automatic URL loading.
+ *
+ * This hook wraps useFileReference().getFilesByCategory and automatically:
+ * - Loads file references filtered by category
+ * - Generates URLs for all files (public URLs for public files, signed URLs for private files)
+ * - Manages state for fileReferences and fileUrls
+ * - Auto-refetches when table_name, record_id, category, or organisation_id changes
+ *
+ * Use this hook when you need files by category with their URLs ready to display.
+ * For more control, use useFileReference() directly and manage URLs yourself.
  */
 declare function useFilesByCategory(supabase: SupabaseClient, table_name: string, record_id: string, category: FileCategory | null, organisation_id: string | null): {
     isLoading: boolean;
@@ -3074,101 +3087,6 @@ type UseFileReferenceForRecordReturn = {
     clearError: () => void;
 };
 
-/**
- * @file Event Logo Hook (Authenticated)
- * @package @jmruthers/pace-core
- * @module Hooks
- *
- * A React hook for accessing event logos in authenticated contexts.
- * Can handle both public and private event logos using the file_references system.
- *
- * Features:
- * - Works in authenticated contexts
- * - Supports both public and private event logos
- * - Automatic fallback to event initials
- * - Bucket-aware URL generation
- * - Signed URL support for private files
- * - Caching for performance
- * - Error handling and loading states
- *
- * @example
- * ```tsx
- * import { useEventLogo } from '@jmruthers/pace-core';
- *
- * function EventHeader() {
- *   const { logoUrl, fallbackText, isLoading, error } = useEventLogo(
- *     supabase,
- *     eventId,
- *     eventName,
- *     organisationId
- *   );
- *
- *   if (isLoading) return <div>Loading...</div>;
- *   if (error) return <div>Error: {error.message}</div>;
- *
- *   return (
- *     <div>
- *       {logoUrl ? (
- *         <img src={logoUrl} alt={`${eventName} logo`} />
- *       ) : (
- *         <div className="logo-fallback">{fallbackText}</div>
- *       )}
- *     </div>
- *   );
- * }
- * ```
- */
-
-interface UseEventLogoReturn {
-    /** The logo URL if available, null if not found or error */
-    logoUrl: string | null;
-    /** Fallback text (event initials) if no logo is available */
-    fallbackText: string;
-    /** Whether the logo is currently loading */
-    isLoading: boolean;
-    /** Any error that occurred during loading */
-    error: Error | null;
-    /** Function to manually refetch the logo */
-    refetch: () => Promise<void>;
-}
-interface UseEventLogoOptions {
-    /** Cache TTL in milliseconds (default: 30 minutes) */
-    cacheTtl?: number;
-    /** Whether to enable caching (default: true) */
-    enableCache?: boolean;
-    /** Whether to validate image existence (default: true) */
-    validateImage?: boolean;
-    /** Custom fallback text generator */
-    generateFallbackText?: (eventName: string) => string;
-}
-/**
- * Hook for accessing event logo URLs in authenticated contexts
- *
- * This hook provides access to event logo URLs for authenticated users.
- * It supports both public and private logos, generating appropriate URLs
- * (public URLs for public files, signed URLs for private files).
- *
- * @param supabase - Supabase client instance (required)
- * @param eventId - The event ID to fetch logo for
- * @param eventName - The event name for fallback text generation
- * @param organisationId - The organisation ID for storage path
- * @param options - Configuration options for caching and behavior
- * @returns Object containing logo URL, fallback text, loading state, error, and refetch function
- */
-declare function useEventLogo(supabase: SupabaseClient | null, eventId: string | undefined, eventName: string | undefined, organisationId: string | undefined, options?: UseEventLogoOptions): UseEventLogoReturn;
-/**
- * Clear all cached authenticated event logo data
- * Useful for testing or when you need to force refresh all data
- */
-declare function clearEventLogoCache(): void;
-/**
- * Get cache statistics for debugging
- */
-declare function getEventLogoCacheStats(): {
-    size: number;
-    keys: string[];
-};
-
 /**
  * @file Table Component System
  * @package @jmruthers/pace-core
@@ -3359,8 +3277,6 @@ interface PublicPageHeaderProps {
     customAppLogo?: ReactNode;
     /** Custom event logo component */
     customEventLogo?: ReactNode;
-    /** Optional Supabase client (for testing) */
-    supabase?: SupabaseClient;
 }
 /**
  * Header component for public pages with event-specific branding
@@ -3371,7 +3287,7 @@ interface PublicPageHeaderProps {
  * @param props - Header configuration and content
  * @returns React element with public page header
  */
-declare function PublicPageHeader({ event, eventCode, title, description, showEventLogo, showAppLogo, className, children, customAppLogo, customEventLogo, supabase }: PublicPageHeaderProps): react_jsx_runtime.JSX.Element;
+declare function PublicPageHeader({ event, eventCode, title, description, showEventLogo, showAppLogo, className, children, customAppLogo, customEventLogo }: PublicPageHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface PublicPageContextType {
     isPublicPage: true;
@@ -3508,50 +3424,6 @@ interface PublicPageContextCheckerProps {
  */
 declare function PublicPageContextChecker({ enabled, label }: PublicPageContextCheckerProps): react_jsx_runtime.JSX.Element | null;
 
-interface EventLogoProps {
-    /** The event ID to fetch logo for */
-    eventId: string;
-    /** The event name for fallback text generation */
-    eventName: string;
-    /** The organisation ID for storage path */
-    organisationId: string;
-    /** Logo size variant */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    /** Custom CSS classes */
-    className?: string;
-    /** Whether to show fallback text when no logo is available */
-    showFallback?: boolean;
-    /** Custom fallback text generator */
-    generateFallbackText?: (eventName: string) => string;
-    /** Whether to validate image existence */
-    validateImage?: boolean;
-    /** Custom loading component */
-    loadingComponent?: React__default.ComponentType;
-    /** Custom error component */
-    errorComponent?: React__default.ComponentType<{
-        error: Error;
-    }>;
-}
-/**
- * Component for displaying event logos with fallback to initials
- *
- * This component is context-aware and automatically detects whether it's being used
- * in a public or authenticated context. It fetches and displays event logos from storage,
- * with automatic fallback to event initials if no logo is available.
- *
- * @param props - Logo configuration and styling
- * @returns React element with event logo or fallback
- */
-declare function EventLogo({ eventId, eventName, organisationId, size, className, showFallback, generateFallbackText, validateImage, loadingComponent: LoadingComponent, errorComponent: ErrorComponent }: EventLogoProps): react_jsx_runtime.JSX.Element;
-/**
- * Compact event logo for small spaces
- */
-declare function EventLogoCompact(props: EventLogoProps): react_jsx_runtime.JSX.Element;
-/**
- * Large event logo for prominent display
- */
-declare function EventLogoLarge(props: EventLogoProps): react_jsx_runtime.JSX.Element;
-
 interface PublicErrorBoundaryProps {
     /** Child components to wrap */
     children: ReactNode;
@@ -3680,4 +3552,4 @@ declare function PublicLoadingSkeleton({ lines, className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-export { Select as $, Alert as A, Button as B, Card as C, Dialog as D, DialogOverlay as E, DialogTrigger as F, DialogClose as G, DialogContent as H, Input as I, DialogHeader as J, DialogBody as K, Label as L, DialogFooter as M, DialogTitle as N, DialogDescription as O, Progress as P, type DialogProps as Q, type DialogTriggerProps as R, Switch as S, Table as T, type DialogContentProps as U, type DialogOverlayProps as V, type DialogHeaderProps as W, type DialogFooterProps as X, type DialogTitleProps as Y, type DialogDescriptionProps as Z, type DialogSize as _, type ButtonProps as a, PublicPageProvider as a$, SelectGroup as a0, SelectValue as a1, SelectTrigger as a2, SelectContent as a3, SelectLabel as a4, SelectItem as a5, SelectSeparator as a6, Toast as a7, Toaster as a8, ToastAction as a9, UserMenu as aA, ErrorBoundary as aB, type ErrorBoundaryProps as aC, type ErrorBoundaryState as aD, LoadingSpinner as aE, SessionRestorationLoader as aF, EventSelector as aG, PasswordResetForm as aH, FileUpload as aI, type FileUploadProps as aJ, FileDisplay as aK, type FileDisplayProps as aL, useFileReference as aM, useFileReferenceForRecord as aN, useFileReferenceById as aO, useFilesByCategory as aP, type UseFileReferenceOptions as aQ, type UseFileReferenceReturn as aR, type UseFileReferenceForRecordReturn as aS, useEventLogo as aT, clearEventLogoCache as aU, getEventLogoCacheStats as aV, type UseEventLogoReturn as aW, type UseEventLogoOptions as aX, PublicPageLayout as aY, usePublicPageContext$1 as aZ, PublicPageHeader as a_, ToastProvider as aa, ToastViewport as ab, ToastTitle as ac, ToastDescription as ad, ToastClose as ae, type ToastActionElement as af, type ToastProps as ag, Tooltip as ah, TooltipTrigger as ai, TooltipContent as aj, TooltipProvider as ak, TooltipRoot as al, Form as am, type FormProps as an, LoginForm as ao, type LoginFormProps as ap, Header as aq, Footer as ar, type FooterProps as as, ProtectedRoute as at, type ProtectedRouteProps as au, NavigationMenu as av, type NavigationMenuProps as aw, type NavigationItem as ax, OrganisationSelector as ay, type OrganisationSelectorProps as az, CardHeader as b, usePublicPageContext as b0, useIsPublicPage as b1, PublicPageFooter as b2, PublicPageDebugger as b3, PublicPageDiagnostic as b4, PublicPageContextChecker as b5, EventLogo as b6, EventLogoCompact as b7, EventLogoLarge as b8, PublicErrorBoundary as b9, useErrorBoundary as ba, DefaultPublicErrorFallback as bb, PublicLoadingSpinner as bc, PublicLoadingSpinnerFullPage as bd, PublicLoadingSkeleton as be, type PublicPageLayoutProps as bf, type PublicPageHeaderProps as bg, type PublicPageFooterProps as bh, type EventLogoProps as bi, type PublicErrorBoundaryProps as bj, type PublicErrorBoundaryState as bk, type PublicLoadingSpinnerProps as bl, type PaceAppLayoutProps as bm, PaceAppLayout as bn, type PaceLoginPageProps as bo, PaceLoginPage as bp, type UserMenuProps as bq, CardFooter as c, CardTitle as d, CardDescription as e, CardContent as f, CardActions as g, type CardProps as h, type CardActionsProps as i, type InputProps as j, type LabelProps as k, AlertTitle as l, AlertDescription as m, Avatar as n, AvatarImage as o, AvatarFallback as p, Checkbox as q, type SwitchProps as r, TableHeader as s, TableBody as t, TableCaption as u, TableCell as v, TableFooter as w, TableHead as x, TableRow as y, DialogPortal as z };
+export { Select as $, Alert as A, Button as B, Card as C, Dialog as D, DialogOverlay as E, DialogTrigger as F, DialogClose as G, DialogContent as H, Input as I, DialogHeader as J, DialogBody as K, Label as L, DialogFooter as M, DialogTitle as N, DialogDescription as O, Progress as P, type DialogProps as Q, type DialogTriggerProps as R, Switch as S, Table as T, type DialogContentProps as U, type DialogOverlayProps as V, type DialogHeaderProps as W, type DialogFooterProps as X, type DialogTitleProps as Y, type DialogDescriptionProps as Z, type DialogSize as _, type ButtonProps as a, PublicPageDiagnostic as a$, SelectGroup as a0, SelectValue as a1, SelectTrigger as a2, SelectContent as a3, SelectLabel as a4, SelectItem as a5, SelectSeparator as a6, Toast as a7, Toaster as a8, ToastAction as a9, UserMenu as aA, ErrorBoundary as aB, type ErrorBoundaryProps as aC, type ErrorBoundaryState as aD, LoadingSpinner as aE, SessionRestorationLoader as aF, EventSelector as aG, PasswordResetForm as aH, FileUpload as aI, type FileUploadProps as aJ, FileDisplay as aK, type FileDisplayProps as aL, useFileReference as aM, useFileReferenceForRecord as aN, useFileReferenceById as aO, useFilesByCategory as aP, type UseFileReferenceOptions as aQ, type UseFileReferenceReturn as aR, type UseFileReferenceForRecordReturn as aS, PublicPageLayout as aT, usePublicPageContext$1 as aU, PublicPageHeader as aV, PublicPageProvider as aW, usePublicPageContext as aX, useIsPublicPage as aY, PublicPageFooter as aZ, PublicPageDebugger as a_, ToastProvider as aa, ToastViewport as ab, ToastTitle as ac, ToastDescription as ad, ToastClose as ae, type ToastActionElement as af, type ToastProps as ag, Tooltip as ah, TooltipTrigger as ai, TooltipContent as aj, TooltipProvider as ak, TooltipRoot as al, Form as am, type FormProps as an, LoginForm as ao, type LoginFormProps as ap, Header as aq, Footer as ar, type FooterProps as as, ProtectedRoute as at, type ProtectedRouteProps as au, NavigationMenu as av, type NavigationMenuProps as aw, type NavigationItem as ax, OrganisationSelector as ay, type OrganisationSelectorProps as az, CardHeader as b, PublicPageContextChecker as b0, PublicErrorBoundary as b1, useErrorBoundary as b2, DefaultPublicErrorFallback as b3, PublicLoadingSpinner as b4, PublicLoadingSpinnerFullPage as b5, PublicLoadingSkeleton as b6, type PublicPageLayoutProps as b7, type PublicPageHeaderProps as b8, type PublicPageFooterProps as b9, type PublicErrorBoundaryProps as ba, type PublicErrorBoundaryState as bb, type PublicLoadingSpinnerProps as bc, type PaceAppLayoutProps as bd, PaceAppLayout as be, type PaceLoginPageProps as bf, PaceLoginPage as bg, type UserMenuProps as bh, CardFooter as c, CardTitle as d, CardDescription as e, CardContent as f, CardActions as g, type CardProps as h, type CardActionsProps as i, type InputProps as j, type LabelProps as k, AlertTitle as l, AlertDescription as m, Avatar as n, AvatarImage as o, AvatarFallback as p, Checkbox as q, type SwitchProps as r, TableHeader as s, TableBody as t, TableCaption as u, TableCell as v, TableFooter as w, TableHead as x, TableRow as y, DialogPortal as z };

package/dist/{chunk-2ZYHCFUO.js → chunk-5SGBVBRU.js}

@@ -1,7 +1,7 @@
 import {
   init_OrganisationProvider,
   usePublicPageContext
-} from "./chunk-MKMKUCPF.js";
+} from "./chunk-X33A4WWI.js";
 import {
   init_useOrganisations,
   useEvents,
@@ -699,4 +699,4 @@ export {
   generatePublicRoutePath,
   extractEventCodeFromPath
 };
-//# sourceMappingURL=chunk-2ZYHCFUO.js.map
+//# sourceMappingURL=chunk-5SGBVBRU.js.map

package/dist/{chunk-EVVRUGQ2.js → chunk-62AVH7CM.js}

@@ -10745,12 +10745,25 @@ function useTableColumns({
   columnOrder
 }) {
   const enhancedColumns = useMemo13(() => {
-    const baseColumns = [...columns].map((column) => ({
-      ...column,
-      enableSorting: features.sorting && column.enableSorting !== false,
-      enableColumnFilter: features.filtering && column.enableColumnFilter !== false,
-      enableGrouping: features.grouping && column.enableGrouping !== false
-    }));
+    const baseColumns = [...columns].map((column) => {
+      const baseColumn = {
+        ...column,
+        enableSorting: features.sorting && column.enableSorting !== false,
+        enableColumnFilter: features.filtering && column.enableColumnFilter !== false,
+        enableGrouping: features.grouping && column.enableGrouping !== false
+      };
+      const dataTableColumn = column;
+      const isNumericColumn = column.meta?.type === "number" || dataTableColumn.fieldType === "number" || dataTableColumn.filterType === "number";
+      const isDateColumn = column.meta?.type === "date" || dataTableColumn.fieldType === "date" || dataTableColumn.filterType === "date";
+      if (isNumericColumn && !isDateColumn) {
+        baseColumn.meta = {
+          ...baseColumn.meta,
+          align: "right",
+          type: "number"
+        };
+      }
+      return baseColumn;
+    });
     const selectionColumn = features.selection ? {
       id: "select",
       header: ({ table }) => {
@@ -11968,62 +11981,72 @@ function DataTableInternal({
             /* @__PURE__ */ jsx24("col", { span: dataColumns, "data-col-type": "data" }),
             hasActionsColumn && /* @__PURE__ */ jsx24("col", { span: 1, "data-col-type": "actions" })
           ] }),
-          /* @__PURE__ */ jsx24("thead", { children: table?.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24("tr", { children: headerGroup.headers.filter((header) => {
-            return typeof header.column.getIsVisible === "function" ? header.column.getIsVisible() : true;
-          }).map((header) => {
-            const isSortable = header.column.getCanSort();
-            const ariaSort = isSortable ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0;
-            const isRightAligned = header.column.columnDef.meta?.align === "right";
-            const handleSortClick = (event) => {
-              const originalHandler = header.column.getToggleSortingHandler();
-              if (originalHandler) {
-                originalHandler(event);
-              }
-              const columnName = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "column";
-              const currentSort = header.column.getIsSorted();
-              const newSort = currentSort === "asc" ? "desc" : currentSort === "desc" ? null : "asc";
-              announceSortChange(columnName, newSort);
-            };
-            const headerKeyboardHandlers = keyboardNavigation.getHeaderKeyboardHandlers(
-              header.index,
-              () => {
+          /* @__PURE__ */ jsx24("thead", { children: table?.getHeaderGroups().map((headerGroup) => {
+            const visibleHeaders = headerGroup.headers.filter((header) => {
+              return typeof header.column.getIsVisible === "function" ? header.column.getIsVisible() : true;
+            });
+            return /* @__PURE__ */ jsx24("tr", { children: visibleHeaders.map((header, index) => {
+              const isFirst = index === 0;
+              const isLast = index === visibleHeaders.length - 1;
+              const isSortable = header.column.getCanSort();
+              const ariaSort = isSortable ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0;
+              const isRightAligned = header.column.columnDef.meta?.align === "right";
+              const handleSortClick = (event) => {
                 const originalHandler = header.column.getToggleSortingHandler();
                 if (originalHandler) {
-                  originalHandler({});
+                  originalHandler(event);
                 }
                 const columnName = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "column";
                 const currentSort = header.column.getIsSorted();
                 const newSort = currentSort === "asc" ? "desc" : currentSort === "desc" ? null : "asc";
                 announceSortChange(columnName, newSort);
-              }
-            );
-            return /* @__PURE__ */ jsx24(
-              "th",
-              {
-                className: `px-3 py-2 ${isRightAligned ? "text-right" : "text-left"}`,
-                scope: "col",
-                role: "columnheader",
-                ...isSortable ? { "aria-sort": ariaSort } : {},
-                ...isSortable ? headerKeyboardHandlers : {},
-                children: header.isPlaceholder ? null : isSortable ? /* @__PURE__ */ jsxs17(
-                  Button,
-                  {
-                    variant: "ghost",
-                    className: `h-auto p-0 font-medium hover:bg-transparent ${isRightAligned ? "justify-end" : "justify-start"}`,
-                    onClick: handleSortClick,
-                    ...headerKeyboardHandlers,
-                    "aria-label": `Sort by ${typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "column"}`,
-                    tabIndex: 0,
-                    children: [
-                      typeof header.column.columnDef.header === "function" ? header.column.columnDef.header(header.getContext()) : header.column.columnDef.header,
-                      header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx24(ChevronUp2, { className: "h-4 w-4" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx24(ChevronDown3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx24(ChevronsUpDown, { className: "h-4 w-4" })
-                    ]
+              };
+              const headerKeyboardHandlers = keyboardNavigation.getHeaderKeyboardHandlers(
+                header.index,
+                () => {
+                  const originalHandler = header.column.getToggleSortingHandler();
+                  if (originalHandler) {
+                    originalHandler({});
                   }
-                ) : typeof header.column.columnDef.header === "function" ? header.column.columnDef.header(header.getContext()) : header.column.columnDef.header
-              },
-              header.id
-            );
-          }) }, headerGroup.id)) }),
+                  const columnName = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "column";
+                  const currentSort = header.column.getIsSorted();
+                  const newSort = currentSort === "asc" ? "desc" : currentSort === "desc" ? null : "asc";
+                  announceSortChange(columnName, newSort);
+                }
+              );
+              return /* @__PURE__ */ jsx24(
+                "th",
+                {
+                  className: cn(
+                    "px-3 py-2 bg-main-200",
+                    isRightAligned ? "text-right" : "text-left",
+                    isFirst && "rounded-l-md",
+                    isLast && "rounded-r-md"
+                  ),
+                  scope: "col",
+                  role: "columnheader",
+                  ...isSortable ? { "aria-sort": ariaSort } : {},
+                  ...isSortable ? headerKeyboardHandlers : {},
+                  children: header.isPlaceholder ? null : isSortable ? /* @__PURE__ */ jsxs17(
+                    Button,
+                    {
+                      variant: "ghost",
+                      className: `h-auto p-0 font-bold hover:bg-transparent ${isRightAligned ? "justify-end" : "justify-start"}`,
+                      onClick: handleSortClick,
+                      ...headerKeyboardHandlers,
+                      "aria-label": `Sort by ${typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "column"}`,
+                      tabIndex: 0,
+                      children: [
+                        typeof header.column.columnDef.header === "function" ? header.column.columnDef.header(header.getContext()) : header.column.columnDef.header,
+                        header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx24(ChevronUp2, { className: "h-4 w-4" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx24(ChevronDown3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx24(ChevronsUpDown, { className: "h-4 w-4" })
+                      ]
+                    }
+                  ) : typeof header.column.columnDef.header === "function" ? header.column.columnDef.header(header.getContext()) : header.column.columnDef.header
+                },
+                header.id
+              );
+            }) }, headerGroup.id);
+          }) }),
           /* @__PURE__ */ jsx24(
             UnifiedTableBody,
             {
@@ -12402,4 +12425,4 @@ lodash/lodash.js:
    * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
    *)
 */
-//# sourceMappingURL=chunk-EVVRUGQ2.js.map
+//# sourceMappingURL=chunk-62AVH7CM.js.map