@pattern-stack/frontend-patterns 0.2.0-alpha.4 → 0.2.0-alpha.6

package/dist/index.es.js

@@ -9,15 +9,15 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useRef, useState, useEffect, useMemo, forwardRef, useCallback, useContext, createContext, useId, Component } from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { Map as Map$1, Calculator, Brain, User, Handshake, Truck, Building, HelpCircle, Info, AlertCircle, Check, ArrowDown, ArrowUp, ArrowLeft, ArrowRight, ChevronUp, ChevronLeft, ChevronDown, ChevronRight, Music, Video, Image, Folder, File, Flag, Tag, Bookmark, Heart, Star, MapPin, Clock, Calendar, Phone, Mail, Unlock, Lock, Share, Upload, Download, Eye, Trash2, Edit, Plus, Search, Bell, Settings, Home, Layout, TrendingUp, Database, BarChart3, Users, Shield, X, Menu, Palette, Loader2, EyeOff, InfoIcon, Circle, ChevronsUpDown, AreaChart, LineChart, TrendingDown, Minus, AlertTriangle, Activity, CheckCircle, FileX, Sun, Moon, LogOut, Square, Waves, Zap, TreePine, Sparkles, Sunset, Building2, DollarSign, ShoppingCart, Target, ExternalLink, MoreHorizontal, Filter, Edit2, Undo2, RefreshCw, FileText, History, Save, Copy, Grid3X3, Layers, XCircle, Briefcase } from "lucide-react";
+import { Map as Map$1, Calculator, Brain, User, Handshake, Truck, Building, HelpCircle, Info, AlertCircle, Check, ArrowDown, ArrowUp, ArrowLeft, ArrowRight, ChevronUp, ChevronLeft, ChevronDown, ChevronRight, Music, Video, Image, Folder, File, Flag, Tag, Bookmark, Heart, Star, MapPin, Clock, Calendar, Phone, Mail, Unlock, Lock, Share, Upload, Download, Eye, Trash2, Edit, Plus, Search, Bell, Settings, Home, Layout, TrendingUp, Database, BarChart3, Users, Shield, X, Menu, Palette, Circle, Building2, Package, FileText, Loader2, EyeOff, InfoIcon, ChevronsUpDown, AreaChart, LineChart, TrendingDown, Minus, AlertTriangle, Activity, WifiOff, CloudOff, Cloud, CheckCircle, FileX, Sun, Moon, LogOut, Square, Waves, Zap, TreePine, Sparkles, Sunset, DollarSign, ShoppingCart, Target, ExternalLink, MoreHorizontal, Filter, Edit2, Undo2, RefreshCw, History, Save, Copy, Grid3X3, Layers, XCircle, Briefcase } from "lucide-react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { useQuery, useQueryClient, useMutation, QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Slot } from "@radix-ui/react-slot";
-import { createPortal } from "react-dom";
+import { createPortal, flushSync } from "react-dom";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { useLocation, useNavigate, useSearchParams, Outlet, BrowserRouter, Routes, Route } from "react-router-dom";
+import { useLocation, useNavigate, useSearchParams, Outlet, Navigate, BrowserRouter, Routes, Route } from "react-router-dom";
 import { createRoot } from "react-dom/client";
 const APP_NAME = "Design System Showcase";
 const API_ENDPOINTS = {
@@ -34,8 +34,8 @@ const UI_CONFIG = {
   TOAST_DURATION: 5e3
 };
 const env = {
-  API_BASE_URL: "http://localhost:8080",
-  OPENAPI_URL: "http://localhost:8080/openapi.json",
+  API_BASE_URL: "",
+  OPENAPI_URL: "/openapi.json",
   NODE_ENV: "development",
   IS_DEVELOPMENT: false,
   IS_PRODUCTION: false,
@@ -2009,16 +2009,374 @@ function renderField(value, fieldName, fieldType, breakpoint, item, customRender
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-const API_BASE_URL = "http://localhost:8080";
+const STATUS_COLOR_MAP = {
+  // Success states
+  active: "success",
+  completed: "success",
+  approved: "success",
+  paid: "success",
+  delivered: "success",
+  resolved: "success",
+  closed: "success",
+  // Warning states
+  pending: "warning",
+  processing: "warning",
+  review: "warning",
+  draft: "warning",
+  waiting: "warning",
+  // Error states
+  failed: "error",
+  rejected: "error",
+  cancelled: "error",
+  overdue: "error",
+  blocked: "error",
+  // Info states
+  new: "info",
+  open: "info",
+  in_progress: "info",
+  scheduled: "info",
+  // Neutral (default)
+  inactive: "neutral",
+  archived: "neutral",
+  unknown: "neutral"
+};
+function getStatusColor(value) {
+  if (typeof value !== "string") return "neutral";
+  const normalized = value.toLowerCase().replace(/[_-]/g, "_");
+  return STATUS_COLOR_MAP[normalized] ?? "neutral";
+}
+const CATEGORY_MAP = {
+  account: 1,
+  customer: 1,
+  client: 1,
+  user: 2,
+  contact: 2,
+  person: 2,
+  order: 3,
+  sale: 3,
+  transaction: 3,
+  product: 4,
+  item: 4,
+  inventory: 4,
+  task: 5,
+  activity: 5,
+  event: 5,
+  file: 6,
+  document: 6,
+  report: 6,
+  tag: 7,
+  category: 7,
+  label: 7,
+  default: 8
+};
+function getCategoryForEntity(entityType) {
+  if (!entityType) return 8;
+  const normalized = entityType.toLowerCase();
+  for (const [key, value] of Object.entries(CATEGORY_MAP)) {
+    if (normalized.includes(key)) return value;
+  }
+  return 8;
+}
+function getIconForEntity(entityType) {
+  if (!entityType) return /* @__PURE__ */ jsx(Circle, { className: "w-4 h-4" });
+  const normalized = entityType.toLowerCase();
+  if (normalized.includes("account") || normalized.includes("customer") || normalized.includes("client")) {
+    return /* @__PURE__ */ jsx(Building2, { className: "w-4 h-4" });
+  }
+  if (normalized.includes("user") || normalized.includes("contact") || normalized.includes("person")) {
+    return /* @__PURE__ */ jsx(User, { className: "w-4 h-4" });
+  }
+  if (normalized.includes("product") || normalized.includes("item")) {
+    return /* @__PURE__ */ jsx(Package, { className: "w-4 h-4" });
+  }
+  if (normalized.includes("file") || normalized.includes("document")) {
+    return /* @__PURE__ */ jsx(FileText, { className: "w-4 h-4" });
+  }
+  if (normalized.includes("tag") || normalized.includes("category")) {
+    return /* @__PURE__ */ jsx(Tag, { className: "w-4 h-4" });
+  }
+  return /* @__PURE__ */ jsx(Circle, { className: "w-4 h-4" });
+}
+function normalizeImportance(importance) {
+  switch (importance) {
+    case "critical":
+    case "high":
+    case "primary":
+      return "primary";
+    case "medium":
+    case "secondary":
+      return "secondary";
+    default:
+      return "tertiary";
+  }
+}
+function isPrimaryImportance(importance) {
+  return normalizeImportance(importance) === "primary";
+}
+function formatValueForCard(value, type, format) {
+  if (value === null || value === void 0) return "—";
+  switch (type) {
+    case "money": {
+      const num = Number(value);
+      const currency = (format == null ? void 0 : format.currency) ?? "USD";
+      if (num >= 1e6) {
+        return new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency,
+          notation: "compact",
+          maximumFractionDigits: 1
+        }).format(num);
+      }
+      if (num >= 1e3) {
+        return new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency,
+          notation: "compact",
+          maximumFractionDigits: 1
+        }).format(num);
+      }
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency,
+        maximumFractionDigits: 0
+      }).format(num);
+    }
+    case "percent": {
+      const num = Number(value);
+      return `${num.toFixed(0)}%`;
+    }
+    case "number": {
+      const num = Number(value);
+      if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
+      if (num >= 1e3) return `${(num / 1e3).toFixed(1)}K`;
+      return String(num);
+    }
+    case "date":
+    case "datetime": {
+      const date = new Date(String(value));
+      if (isNaN(date.getTime())) return String(value);
+      return date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric"
+      });
+    }
+    case "boolean":
+      return value ? "Yes" : "No";
+    default:
+      return String(value);
+  }
+}
+function autoDetectMapping(columns) {
+  var _a, _b, _c, _d, _e, _f;
+  const primaryCols = columns.filter((c) => isPrimaryImportance(c.importance));
+  const titleField = ((_a = primaryCols.find((c) => ["text", "entity", "user"].includes(c.type))) == null ? void 0 : _a.field) ?? ((_b = primaryCols[0]) == null ? void 0 : _b.field) ?? ((_c = columns[0]) == null ? void 0 : _c.field);
+  const valueField = (_d = primaryCols.find((c) => c.type === "money")) == null ? void 0 : _d.field;
+  const statusField = (_e = primaryCols.find(
+    (c) => c.type === "status" || c.type === "badge"
+  )) == null ? void 0 : _e.field;
+  const usedForMain = new Set([titleField, valueField, statusField].filter(Boolean));
+  const remainingPrimary = primaryCols.filter((c) => !usedForMain.has(c.field));
+  const subtitleField = (_f = remainingPrimary[0]) == null ? void 0 : _f.field;
+  const usedFields = new Set(
+    [titleField, valueField, statusField, subtitleField].filter(Boolean)
+  );
+  const metadataFields = primaryCols.filter((c) => !usedFields.has(c.field)).slice(0, 3).map((c) => c.field);
+  return {
+    titleField: titleField ?? "id",
+    subtitleField,
+    valueField,
+    statusField,
+    metadataFields,
+    iconConfig: void 0
+  };
+}
+function entityToListCardProps(item, columns, mapping, entityType) {
+  const autoMapping = autoDetectMapping(columns);
+  const effectiveMapping = { ...autoMapping, ...mapping };
+  const {
+    titleField,
+    subtitleField,
+    valueField,
+    statusField,
+    metadataFields,
+    iconConfig
+  } = effectiveMapping;
+  const getColumn = (field) => field ? columns.find((c) => c.field === field) : void 0;
+  const title = item[titleField] != null ? String(item[titleField]) : "—";
+  const subtitle = subtitleField && item[subtitleField] != null ? String(item[subtitleField]) : void 0;
+  let value;
+  if (valueField && item[valueField] != null) {
+    const valueCol = getColumn(valueField);
+    const formatted = formatValueForCard(
+      item[valueField],
+      (valueCol == null ? void 0 : valueCol.type) ?? "text",
+      valueCol == null ? void 0 : valueCol.format
+    );
+    value = {
+      text: formatted,
+      variant: "success"
+      // Money typically green
+    };
+  }
+  let badge;
+  if (statusField && item[statusField] != null) {
+    const statusValue = String(item[statusField]);
+    badge = {
+      text: statusValue,
+      variant: "status",
+      status: getStatusColor(statusValue),
+      size: "sm"
+    };
+  }
+  const metadata = metadataFields == null ? void 0 : metadataFields.map((field) => {
+    const col = getColumn(field);
+    if (!col || item[field] == null) return null;
+    return formatValueForCard(item[field], col.type, col.format);
+  }).filter((v) => v !== null);
+  let icon;
+  if (iconConfig) {
+    const iconValue = iconConfig.field ? item[iconConfig.field] : void 0;
+    if (iconConfig.variant === "status" && iconValue) {
+      icon = {
+        icon: iconConfig.icon ?? getIconForEntity(entityType),
+        variant: "status",
+        status: getStatusColor(iconValue),
+        size: "sm"
+      };
+    } else {
+      icon = {
+        icon: iconConfig.icon ?? getIconForEntity(entityType),
+        variant: "category",
+        category: getCategoryForEntity(entityType),
+        size: "sm"
+      };
+    }
+  } else {
+    icon = {
+      icon: getIconForEntity(entityType),
+      variant: "category",
+      category: getCategoryForEntity(entityType),
+      size: "sm"
+    };
+  }
+  return {
+    icon,
+    title,
+    subtitle,
+    metadata,
+    value,
+    badge
+  };
+}
+const HEADER_ABBREVIATIONS = {
+  customer: "Cust",
+  account: "Acct",
+  amount: "Amt",
+  quantity: "Qty",
+  priority: "Pri",
+  status: "Status",
+  created: "Created",
+  updated: "Updated",
+  description: "Desc",
+  total: "Total",
+  items: "Items",
+  number: "#",
+  date: "Date",
+  time: "Time"
+};
+function abbreviateHeader(label) {
+  const lower = label.toLowerCase();
+  for (const [key, abbrev] of Object.entries(HEADER_ABBREVIATIONS)) {
+    if (lower.includes(key)) return abbrev;
+  }
+  if (label.length > 8) return label.slice(0, 6) + "…";
+  return label;
+}
+function generateCompactColumns(columns, options = {}) {
+  const {
+    maxColumns = 5,
+    abbreviateHeaders = true,
+    requiredFields = [],
+    excludeFields = []
+  } = options;
+  const excludeSet = new Set(excludeFields);
+  const requiredSet = new Set(requiredFields);
+  const filteredColumns = columns.filter((col) => {
+    if (excludeSet.has(col.field)) return false;
+    return true;
+  });
+  const required = filteredColumns.filter((c) => requiredSet.has(c.field));
+  const primary = filteredColumns.filter(
+    (c) => !requiredSet.has(c.field) && normalizeImportance(c.importance) === "primary"
+  );
+  const secondary = filteredColumns.filter(
+    (c) => !requiredSet.has(c.field) && normalizeImportance(c.importance) === "secondary"
+  );
+  const selectedColumns = [...required, ...primary, ...secondary].slice(
+    0,
+    maxColumns
+  );
+  return selectedColumns.map((col) => ({
+    key: col.field,
+    header: abbreviateHeaders ? abbreviateHeader(col.label) : col.label,
+    sortable: col.sortable,
+    type: col.type,
+    format: col.format,
+    // Compact widths
+    width: getCompactWidth(col.type)
+  }));
+}
+function getCompactWidth(type) {
+  switch (type) {
+    case "money":
+      return "70px";
+    case "number":
+    case "percent":
+      return "50px";
+    case "status":
+    case "badge":
+      return "80px";
+    case "date":
+      return "70px";
+    case "datetime":
+      return "90px";
+    case "boolean":
+      return "50px";
+    default:
+      return "120px";
+  }
+}
+function createMobileCardRenderer(columns, mapping, entityType) {
+  const { ListCard: ListCard2 } = require("../components/data/ListCard");
+  return ({ data, onItemClick }) => /* @__PURE__ */ jsx("div", { className: "space-y-2", children: data.map((item, index) => {
+    const cardProps = entityToListCardProps(
+      item,
+      columns,
+      mapping,
+      entityType
+    );
+    return /* @__PURE__ */ jsx(
+      ListCard2,
+      {
+        ...cardProps,
+        onClick: onItemClick ? () => onItemClick(item) : void 0
+      },
+      item.id ?? index
+    );
+  }) });
+}
 let globalAuthService = null;
 function setGlobalAuthService(authService) {
   globalAuthService = authService;
 }
+function getGlobalAuthService() {
+  return globalAuthService;
+}
 class ApiClient {
   constructor(config = {}) {
     __publicField(this, "instance");
     this.instance = axios.create({
-      baseURL: config.baseURL || API_BASE_URL,
+      baseURL: config.baseURL || "",
       timeout: config.timeout || 1e4,
       headers: {
         "Content-Type": "application/json",
@@ -2058,11 +2416,15 @@ class ApiClient {
     this.instance.interceptors.response.use(
       (response) => response,
       async (error) => {
-        var _a;
-        if (((_a = error.response) == null ? void 0 : _a.status) === 401) {
+        var _a, _b, _c, _d;
+        const status = (_a = error.response) == null ? void 0 : _a.status;
+        if (!error.response) {
+          return Promise.reject(error);
+        }
+        if (status === 401 || status === 403) {
           if (globalAuthService) {
             const tokenData = globalAuthService.getTokenData();
-            if ((tokenData == null ? void 0 : tokenData.refreshToken) && !error.config._retry) {
+            if (status === 401 && (tokenData == null ? void 0 : tokenData.refreshToken) && !error.config._retry) {
               error.config._retry = true;
               try {
                 await globalAuthService.refreshToken();
@@ -2070,17 +2432,18 @@ class ApiClient {
                 error.config.headers.Authorization = `Bearer ${newTokenData == null ? void 0 : newTokenData.token}`;
                 return this.instance.request(error.config);
               } catch {
-                globalAuthService.clearAuth();
-                window.location.reload();
               }
-            } else {
-              globalAuthService.clearAuth();
-              window.location.reload();
+            }
+            globalAuthService.clearAuth();
+            const errorInfo = { status, message: (_c = (_b = error.response) == null ? void 0 : _b.data) == null ? void 0 : _c.detail };
+            const handled = (_d = globalAuthService.onAuthError) == null ? void 0 : _d.call(globalAuthService, errorInfo);
+            if (!handled) {
+              window.location.href = "/login";
             }
           } else {
             localStorage.removeItem("auth_token");
             localStorage.removeItem("auth_user");
-            window.location.reload();
+            window.location.href = "/login";
           }
         }
         return Promise.reject(error);
@@ -2120,6 +2483,9 @@ class ApiClient {
     return response.data;
   }
 }
+function createApiClient(config = {}) {
+  return new ApiClient(config);
+}
 const apiClient = new ApiClient();
 function useToast() {
   const [toasts, setToasts] = useState([]);
@@ -2390,7 +2756,7 @@ function useEntityData(entity, options = {}) {
   const dataQuery = useQuery({
     queryKey: [entity, "list", { limit, offset, filters }],
     queryFn: () => apiClient.get(
-      `/api/v1/${entity}/?${dataParams.toString()}`
+      `/api/v1/${entity}?${dataParams.toString()}`
     ),
     enabled
   });
@@ -2418,6 +2784,95 @@ function useEntityData(entity, options = {}) {
     refetch
   };
 }
+function useEntityDetail(entity, id, options = {}) {
+  var _a;
+  const { view = "detail", sourceId, enabled = true } = options;
+  const metadataParams = new URLSearchParams();
+  metadataParams.set("view", view);
+  if (sourceId) metadataParams.set("source_id", sourceId);
+  const dataQuery = useQuery({
+    queryKey: [entity, "detail", id],
+    queryFn: () => apiClient.get(`/api/v1/${entity}/${id}`),
+    enabled: enabled && !!id
+  });
+  const metadataQuery = useQuery({
+    queryKey: [entity, "metadata", { view, sourceId }],
+    queryFn: () => apiClient.get(
+      `/api/v1/${entity}/fields/metadata?${metadataParams.toString()}`
+    ),
+    enabled,
+    staleTime: 5 * 60 * 1e3
+    // 5 minutes
+  });
+  const refetch = () => {
+    dataQuery.refetch();
+    metadataQuery.refetch();
+  };
+  return {
+    data: dataQuery.data ?? null,
+    fields: ((_a = metadataQuery.data) == null ? void 0 : _a.columns) ?? [],
+    isLoading: dataQuery.isLoading || metadataQuery.isLoading,
+    isLoadingData: dataQuery.isLoading,
+    isLoadingMetadata: metadataQuery.isLoading,
+    error: dataQuery.error ?? metadataQuery.error ?? null,
+    refetch
+  };
+}
+function useOnlineStatus(healthEndpoint) {
+  const [isOnline, setIsOnline] = useState(
+    typeof navigator !== "undefined" ? navigator.onLine : true
+  );
+  const [isBackendReachable, setIsBackendReachable] = useState(true);
+  const [lastBackendContact, setLastBackendContact] = useState(
+    null
+  );
+  useEffect(() => {
+    const handleOnline = () => setIsOnline(true);
+    const handleOffline = () => {
+      setIsOnline(false);
+      setIsBackendReachable(false);
+    };
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+  const checkBackend = useCallback(async () => {
+    if (!isOnline) {
+      setIsBackendReachable(false);
+      return false;
+    }
+    try {
+      const endpoint = healthEndpoint || "/api/v1/health";
+      const response = await fetch(endpoint, {
+        method: "GET",
+        cache: "no-store"
+      });
+      const reachable = response.ok;
+      setIsBackendReachable(reachable);
+      if (reachable) {
+        setLastBackendContact(Date.now());
+      }
+      return reachable;
+    } catch {
+      setIsBackendReachable(false);
+      return false;
+    }
+  }, [isOnline, healthEndpoint]);
+  useEffect(() => {
+    if (isOnline) {
+      checkBackend();
+    }
+  }, [isOnline, checkBackend]);
+  return {
+    isOnline,
+    isBackendReachable,
+    lastBackendContact,
+    checkBackend
+  };
+}
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]",
   {
@@ -4108,7 +4563,9 @@ const TableHead$1 = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "h-12 px-4 xs:px-2 2xs:px-1 text-left align-middle font-semibold text-gray-700 text-xs uppercase tracking-wider [&:has([role=checkbox])]:pr-0",
+      "h-12 px-4 xs:px-2 2xs:px-1 text-left align-middle font-semibold text-gray-700 text-xs uppercase tracking-wider",
+      // Compact padding for checkbox columns
+      "[&:has(input[type=checkbox])]:px-2 [&:has(input[type=checkbox])]:w-8",
       className
     ),
     ...props
@@ -4120,7 +4577,9 @@ const TableCell$1 = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "p-4 xs:p-2 2xs:p-1 align-middle [&:has([role=checkbox])]:pr-0",
+      "p-4 xs:p-2 2xs:p-1 align-middle",
+      // Compact padding for checkbox columns
+      "[&:has(input[type=checkbox])]:px-2 [&:has(input[type=checkbox])]:w-8",
       className
     ),
     ...props
@@ -4170,7 +4629,12 @@ function DataTable({
   ui,
   error = null,
   errorTitle,
-  errorRetry
+  errorRetry,
+  selectable = false,
+  selectedIds,
+  onSelectionChange,
+  getRowId,
+  selectAllMode = "page"
 }) {
   const [searchTerm, setSearchTerm] = useState("");
   const [sortColumn, setSortColumn] = useState(null);
@@ -4233,6 +4697,85 @@ function DataTable({
       return true;
     });
   }, [normalizedColumns, currentBreakpoint, responsive]);
+  const defaultGetRowId = useCallback((row) => {
+    if ("id" in row && typeof row.id === "string") return row.id;
+    if ("id" in row && typeof row.id === "number") return String(row.id);
+    throw new Error("DataTable: selectable requires getRowId prop or row.id field");
+  }, []);
+  const effectiveGetRowId = getRowId ?? defaultGetRowId;
+  const selectableData = selectAllMode === "all" ? sortedData : paginatedData;
+  const selectableIds = useMemo(
+    () => {
+      if (!selectable) return /* @__PURE__ */ new Set();
+      return new Set(selectableData.map((row) => effectiveGetRowId(row)));
+    },
+    [selectable, selectableData, effectiveGetRowId]
+  );
+  const selectedInScope = useMemo(
+    () => {
+      if (!selectable || !selectedIds) return /* @__PURE__ */ new Set();
+      return new Set([...selectedIds].filter((id) => selectableIds.has(id)));
+    },
+    [selectable, selectedIds, selectableIds]
+  );
+  const isAllSelected = selectableIds.size > 0 && selectedInScope.size === selectableIds.size;
+  const isIndeterminate = selectedInScope.size > 0 && selectedInScope.size < selectableIds.size;
+  const handleSelectAll = useCallback(() => {
+    if (!onSelectionChange) return;
+    if (isAllSelected) {
+      const newSelection = new Set([...selectedIds ?? []].filter((id) => !selectableIds.has(id)));
+      onSelectionChange(newSelection);
+    } else {
+      const newSelection = /* @__PURE__ */ new Set([...selectedIds ?? [], ...selectableIds]);
+      onSelectionChange(newSelection);
+    }
+  }, [isAllSelected, selectedIds, selectableIds, onSelectionChange]);
+  const handleSelectRow = useCallback((rowId) => {
+    if (!onSelectionChange) return;
+    const newSelection = new Set(selectedIds);
+    if (newSelection.has(rowId)) {
+      newSelection.delete(rowId);
+    } else {
+      newSelection.add(rowId);
+    }
+    onSelectionChange(newSelection);
+  }, [selectedIds, onSelectionChange]);
+  const selectionColumn = useMemo(() => {
+    return {
+      key: "__selection__",
+      header: /* @__PURE__ */ jsx(
+        Checkbox$1,
+        {
+          checked: isAllSelected,
+          indeterminate: isIndeterminate,
+          onCheckedChange: handleSelectAll,
+          "aria-label": isAllSelected ? "Deselect all rows" : "Select all rows",
+          size: "sm"
+        }
+      ),
+      cell: (row) => {
+        const rowId = effectiveGetRowId(row);
+        const isSelected = (selectedIds == null ? void 0 : selectedIds.has(rowId)) ?? false;
+        return /* @__PURE__ */ jsx(
+          Checkbox$1,
+          {
+            checked: isSelected,
+            onCheckedChange: () => handleSelectRow(rowId),
+            "aria-label": isSelected ? `Deselect row ${rowId}` : `Select row ${rowId}`,
+            size: "sm",
+            onClick: (e) => e.stopPropagation()
+          }
+        );
+      },
+      width: "32px",
+      sortable: false,
+      filterable: false
+    };
+  }, [isAllSelected, isIndeterminate, selectedIds, effectiveGetRowId, handleSelectAll, handleSelectRow]);
+  const effectiveColumns = useMemo(() => {
+    if (!selectable) return visibleColumns;
+    return [selectionColumn, ...visibleColumns];
+  }, [selectable, selectionColumn, visibleColumns]);
   const handleSort = (columnKey) => {
     if (sortColumn === columnKey) {
       if (sortDirection === "asc") {
@@ -4295,8 +4838,8 @@ function DataTable({
         children: [
           showSearch && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("div", { className: "relative flex-1 max-w-sm", children: /* @__PURE__ */ jsx(Skeleton$1, { className: "h-10 w-full" }) }) }),
           /* @__PURE__ */ jsx("div", { className: "rounded border overflow-hidden", children: /* @__PURE__ */ jsxs(Table$1, { children: [
-            /* @__PURE__ */ jsx(TableHeader$1, { children: /* @__PURE__ */ jsx(TableRow$1, { children: visibleColumns.map((column) => /* @__PURE__ */ jsx(TableHead$1, { style: { width: column.width }, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Skeleton$1, { className: "h-4 w-20" }) }) }, column.key)) }) }),
-            /* @__PURE__ */ jsx(TableBody$1, { children: Array.from({ length: loadingItemCount }, (_, index) => /* @__PURE__ */ jsx(TableRow$1, { children: visibleColumns.map((column) => /* @__PURE__ */ jsx(TableCell$1, { children: /* @__PURE__ */ jsx(Skeleton$1, { className: "h-4 w-full max-w-32" }) }, column.key)) }, index)) })
+            /* @__PURE__ */ jsx(TableHeader$1, { children: /* @__PURE__ */ jsx(TableRow$1, { children: effectiveColumns.map((column) => /* @__PURE__ */ jsx(TableHead$1, { style: { width: column.width }, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Skeleton$1, { className: "h-4 w-20" }) }) }, column.key)) }) }),
+            /* @__PURE__ */ jsx(TableBody$1, { children: Array.from({ length: loadingItemCount }, (_, index) => /* @__PURE__ */ jsx(TableRow$1, { children: effectiveColumns.map((column) => /* @__PURE__ */ jsx(TableCell$1, { children: /* @__PURE__ */ jsx(Skeleton$1, { className: "h-4 w-full max-w-32" }) }, column.key)) }, index)) })
           ] }) }),
           showPagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsx(Skeleton$1, { className: "h-4 w-48" }),
@@ -4358,7 +4901,7 @@ function DataTable({
       data: paginatedData,
       onItemClick: onRowClick
     }) }) : /* @__PURE__ */ jsx("div", { className: "rounded border overflow-hidden", children: /* @__PURE__ */ jsxs(Table$1, { children: [
-      /* @__PURE__ */ jsx(TableHeader$1, { children: /* @__PURE__ */ jsx(TableRow$1, { children: visibleColumns.map((column) => {
+      /* @__PURE__ */ jsx(TableHeader$1, { children: /* @__PURE__ */ jsx(TableRow$1, { children: effectiveColumns.map((column) => {
         const width = column.width;
         return /* @__PURE__ */ jsx(
           TableHead$1,
@@ -4381,7 +4924,7 @@ function DataTable({
       /* @__PURE__ */ jsx(TableBody$1, { children: paginatedData.length === 0 ? /* @__PURE__ */ jsx(TableRow$1, { children: /* @__PURE__ */ jsx(
         TableCell$1,
         {
-          colSpan: visibleColumns.length,
+          colSpan: effectiveColumns.length,
           className: "text-center py-8 text-muted-foreground",
           children: emptyMessage
         }
@@ -4393,7 +4936,7 @@ function DataTable({
             (hover || onRowClick) && "hover:bg-muted/50"
           ),
           onClick: () => onRowClick == null ? void 0 : onRowClick(item),
-          children: visibleColumns.map((column) => /* @__PURE__ */ jsx(TableCell$1, { children: renderCell(column, item) }, column.key))
+          children: effectiveColumns.map((column) => /* @__PURE__ */ jsx(TableCell$1, { children: renderCell(column, item) }, column.key))
         },
         index
       )) })
@@ -5586,6 +6129,75 @@ const ActivityFeed = ({
     ] }) })
   ] });
 };
+const statusConfig = {
+  online: {
+    icon: Cloud,
+    label: "Online",
+    color: "text-green-600 dark:text-green-400",
+    bgColor: "bg-green-100 dark:bg-green-900/30"
+  },
+  degraded: {
+    icon: CloudOff,
+    label: "Server Offline",
+    color: "text-yellow-600 dark:text-yellow-400",
+    bgColor: "bg-yellow-100 dark:bg-yellow-900/30"
+  },
+  offline: {
+    icon: WifiOff,
+    label: "Offline",
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-100 dark:bg-red-900/30"
+  }
+};
+function ConnectionStatus({
+  healthEndpoint,
+  variant = "badge",
+  className,
+  showWhenOnline = false
+}) {
+  const { isOnline, isBackendReachable } = useOnlineStatus(healthEndpoint);
+  const status = !isOnline ? "offline" : !isBackendReachable ? "degraded" : "online";
+  if (status === "online" && !showWhenOnline) {
+    return null;
+  }
+  const config = statusConfig[status];
+  const Icon2 = config.icon;
+  if (variant === "badge") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium",
+          config.bgColor,
+          config.color,
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Icon2, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx("span", { children: config.label })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 px-3 py-2 rounded-lg",
+        config.bgColor,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon2, { className: cn("h-4 w-4", config.color) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", config.color), children: config.label }),
+          status === "degraded" && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Working with cached data" }),
+          status === "offline" && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Check your connection" })
+        ] })
+      ]
+    }
+  );
+}
 const FormField = ({
   label,
   description,
@@ -8927,7 +9539,10 @@ const AppHeader = ({ className }) => {
             placeholder: "Search models, tests, jobs, and components..."
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-4", children: /* @__PURE__ */ jsx(UserMenu, { category: 8 }) })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
+          /* @__PURE__ */ jsx(ConnectionStatus, {}),
+          /* @__PURE__ */ jsx(UserMenu, { category: 8 })
+        ] })
       ] }) })
     }
   );
@@ -9218,6 +9833,55 @@ const ListToolbar = ({
     }
   );
 };
+const FieldGrid = ({
+  data,
+  fields,
+  sections,
+  columns = 2,
+  showLabels = true,
+  compact = false,
+  showEmpty = true,
+  className
+}) => {
+  const gridCols = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 md:grid-cols-2",
+    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+  };
+  const renderValue = (field) => {
+    const value = data[field.field];
+    if (value === null || value === void 0 || value === "") {
+      if (!showEmpty) return null;
+      return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" });
+    }
+    const format = field.format;
+    return renderField(value, field.field, field.type, "lg", data, void 0, format);
+  };
+  const renderField_ = (field) => {
+    const value = data[field.field];
+    if (!showEmpty && (value === null || value === void 0 || value === "")) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", compact ? "py-1" : "py-2"), children: [
+      showLabels && /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: field.label }),
+      /* @__PURE__ */ jsx("dd", { className: "text-sm text-foreground", children: renderValue(field) })
+    ] }, field.field);
+  };
+  const renderFields = (fieldList) => /* @__PURE__ */ jsx("dl", { className: cn("grid gap-x-6", gridCols[columns]), children: fieldList.map(renderField_) });
+  if (sections && sections.length > 0) {
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children: sections.map((section) => /* @__PURE__ */ jsxs(Card, { className: cn(compact ? "p-4" : "p-6"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: section.title }),
+        section.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: section.description })
+      ] }),
+      renderFields(section.fields)
+    ] }, section.title)) });
+  }
+  if (fields && fields.length > 0) {
+    return /* @__PURE__ */ jsx(Card, { className: cn(compact ? "p-4" : "p-6", className), children: renderFields(fields) });
+  }
+  return null;
+};
 const Pagination = ({
   currentPage,
   totalPages,
@@ -9897,9 +10561,11 @@ function ProtectedRoute({
   children,
   requirePermission,
   requireRole,
-  fallback
+  fallback,
+  loginPath = "/login"
 }) {
   const { isAuthenticated, isLoading, hasPermission, hasRole } = useAuthContext();
+  const location = useLocation();
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "min-h-screen flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto" }),
@@ -9907,7 +10573,7 @@ function ProtectedRoute({
     ] }) });
   }
   if (!isAuthenticated) {
-    return /* @__PURE__ */ jsx(LoginForm, {});
+    return /* @__PURE__ */ jsx(Navigate, { to: loginPath, state: { from: location }, replace: true });
   }
   if (requirePermission && !hasPermission(requirePermission)) {
     return fallback || /* @__PURE__ */ jsx("div", { className: "min-h-screen flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
@@ -9934,17 +10600,39 @@ function LogoutButton() {
     /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: logout, children: "Logout" })
   ] });
 }
+const AUTH_TOKEN_KEY = "auth_token";
+const DEFAULT_ENDPOINTS = {
+  login: "/auth/login",
+  register: "/auth/register",
+  refresh: "/auth/refresh",
+  me: "/auth/me",
+  logout: "/auth/logout"
+};
 class AuthService {
   constructor(config) {
     __publicField(this, "config");
+    __publicField(this, "apiClient");
     __publicField(this, "refreshPromise", null);
+    __publicField(this, "endpoints");
     this.config = {
+      mode: "pattern-stack",
       tokenStorage: "localStorage",
       tokenRefreshBuffer: 5,
       // 5 minutes before expiry
       autoRefresh: true,
       ...config
     };
+    this.endpoints = {
+      ...DEFAULT_ENDPOINTS,
+      ...config.endpoints
+    };
+    this.apiClient = createApiClient({ baseURL: this.config.apiUrl || "" });
+  }
+  /**
+   * Get the auth mode
+   */
+  get mode() {
+    return this.config.mode || "pattern-stack";
   }
   getStorageKey(key) {
     return `auth_${key}`;
@@ -10028,21 +10716,33 @@ class AuthService {
     this.removeItem("user");
   }
   async login(credentials) {
-    const response = await apiClient.post(`${this.config.apiUrl}${this.config.endpoints.login}`, credentials);
     let token;
     let refreshToken;
     let expiresIn;
-    if ("access_token" in response) {
-      const backendResponse = response;
-      token = backendResponse.access_token;
-      refreshToken = backendResponse.refresh_token;
+    let user;
+    if (this.mode === "pattern-stack") {
+      const response = await this.apiClient.post(
+        this.endpoints.login,
+        credentials
+      );
+      token = response.access_token;
+      refreshToken = response.refresh_token;
+      user = response.user;
+    } else if (this.mode === "custom" && this.config.responseMapper) {
+      const rawResponse = await this.apiClient.post(
+        this.endpoints.login,
+        credentials
+      );
+      const mapped = this.config.responseMapper(rawResponse);
+      token = mapped.token;
+      refreshToken = mapped.refreshToken;
+      expiresIn = mapped.expiresIn;
+      user = mapped.user;
     } else {
-      const oldResponse = response;
-      token = oldResponse.token;
-      refreshToken = oldResponse.refreshToken;
-      expiresIn = oldResponse.expiresIn;
+      throw new Error(
+        `Invalid auth mode: ${this.mode}. Use 'pattern-stack' or 'custom' with responseMapper.`
+      );
     }
-    const user = response.user;
     const expiresAt = expiresIn ? Date.now() + expiresIn * 1e3 : void 0;
     this.setTokenData({ token, refreshToken, expiresAt });
     this.setStoredUser(user);
@@ -10068,21 +10768,27 @@ class AuthService {
   }
   async performTokenRefresh(currentRefreshToken) {
     try {
-      const response = await apiClient.post(`${this.config.apiUrl}${this.config.endpoints.refresh}`, {
-        refresh_token: currentRefreshToken
-      });
       let token;
       let newRefreshToken;
       let expiresIn;
-      if ("access_token" in response) {
-        const backendResponse = response;
-        token = backendResponse.access_token;
+      if (this.mode === "pattern-stack") {
+        const response = await this.apiClient.post(
+          this.endpoints.refresh,
+          { refresh_token: currentRefreshToken }
+        );
+        token = response.access_token;
         newRefreshToken = currentRefreshToken;
+      } else if (this.mode === "custom" && this.config.responseMapper) {
+        const rawResponse = await this.apiClient.post(
+          this.endpoints.refresh,
+          { refresh_token: currentRefreshToken }
+        );
+        const mapped = this.config.responseMapper(rawResponse);
+        token = mapped.token;
+        newRefreshToken = mapped.refreshToken || currentRefreshToken;
+        expiresIn = mapped.expiresIn;
       } else {
-        const oldResponse = response;
-        token = oldResponse.token;
-        newRefreshToken = oldResponse.refreshToken;
-        expiresIn = oldResponse.expiresIn;
+        throw new Error(`Invalid auth mode for token refresh: ${this.mode}`);
       }
       const expiresAt = expiresIn ? Date.now() + expiresIn * 1e3 : void 0;
       this.setTokenData({
@@ -10124,36 +10830,39 @@ class AuthService {
     const tokenData = this.getTokenData();
     if (!(tokenData == null ? void 0 : tokenData.token)) return null;
     try {
-      return await apiClient.get(
-        `${this.config.apiUrl}${this.config.endpoints.me}`
-      );
+      return await this.apiClient.get(this.endpoints.me);
     } catch {
       return null;
     }
   }
   async logout() {
     const tokenData = this.getTokenData();
-    if (this.config.endpoints.logout && (tokenData == null ? void 0 : tokenData.token)) {
+    if (this.endpoints.logout && (tokenData == null ? void 0 : tokenData.token)) {
       try {
-        await apiClient.post(
-          `${this.config.apiUrl}${this.config.endpoints.logout}`
-        );
+        await this.apiClient.post(this.endpoints.logout);
       } catch {
       }
     }
     this.clearAuth();
   }
+  /**
+   * Get the configured onAuthError handler
+   */
+  get onAuthError() {
+    return this.config.onAuthError;
+  }
 }
 function AuthProvider({
   children,
   config
 }) {
+  var _a;
   const [user, setUser] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [permissions, setPermissions] = useState([]);
   const authService = useMemo(() => {
     const defaultConfig = {
-      apiUrl: "http://localhost:8080",
+      apiUrl: (config == null ? void 0 : config.apiUrl) ?? "",
       endpoints: {
         login: "/auth/login",
         register: "/auth/register",
@@ -10168,7 +10877,7 @@ function AuthProvider({
         enabled: false
       }
     };
-    const mergedConfig = config ? { ...defaultConfig, ...config } : defaultConfig;
+    const mergedConfig = config ? { ...defaultConfig, ...config, apiUrl: config.apiUrl ?? defaultConfig.apiUrl } : defaultConfig;
     const service = new AuthService(mergedConfig);
     setGlobalAuthService(service);
     return service;
@@ -10186,10 +10895,12 @@ function AuthProvider({
               try {
                 await authService.refreshToken();
                 setUser(storedUser);
-                try {
-                  const freshUser = await authService.getCurrentUser();
-                  if (freshUser) setUser(freshUser);
-                } catch {
+                if (!(config == null ? void 0 : config.offlineFirst)) {
+                  try {
+                    const freshUser = await authService.getCurrentUser();
+                    if (freshUser) setUser(freshUser);
+                  } catch {
+                  }
                 }
               } catch {
                 authService.clearAuth();
@@ -10199,10 +10910,12 @@ function AuthProvider({
             }
           } else {
             setUser(storedUser);
-            try {
-              const freshUser = await authService.getCurrentUser();
-              if (freshUser) setUser(freshUser);
-            } catch {
+            if (!(config == null ? void 0 : config.offlineFirst)) {
+              try {
+                const freshUser = await authService.getCurrentUser();
+                if (freshUser) setUser(freshUser);
+              } catch {
+              }
             }
           }
         }
@@ -10215,48 +10928,56 @@ function AuthProvider({
     };
     initAuth();
   }, [authService]);
-  const login = async (credentials) => {
-    var _a;
+  const login = useCallback(async (credentials) => {
     setIsLoading(true);
     try {
-      const user2 = await authService.login(credentials);
-      setUser(user2);
-      if (((_a = config == null ? void 0 : config.permissions) == null ? void 0 : _a.enabled) && "permissions" in user2) {
-        const userPermissions = user2.permissions;
-        setPermissions(
-          Array.isArray(userPermissions) ? userPermissions : []
-        );
-      }
-    } finally {
+      const loggedInUser = await authService.login(credentials);
+      flushSync(() => {
+        var _a2;
+        setUser(loggedInUser);
+        if (((_a2 = config == null ? void 0 : config.permissions) == null ? void 0 : _a2.enabled) && "permissions" in loggedInUser) {
+          const userPermissions = loggedInUser.permissions;
+          setPermissions(
+            Array.isArray(userPermissions) ? userPermissions : []
+          );
+        }
+        setIsLoading(false);
+      });
+    } catch (error) {
       setIsLoading(false);
+      throw error;
     }
-  };
-  const logout = async () => {
+  }, [authService, (_a = config == null ? void 0 : config.permissions) == null ? void 0 : _a.enabled]);
+  const logout = useCallback(async () => {
     setIsLoading(true);
     try {
       await authService.logout();
-      setUser(null);
-      setPermissions([]);
+      flushSync(() => {
+        setUser(null);
+        setPermissions([]);
+        setIsLoading(false);
+      });
     } catch (error) {
       console.error("Logout error:", error);
       authService.clearAuth();
-      setUser(null);
-      setPermissions([]);
-    } finally {
-      setIsLoading(false);
+      flushSync(() => {
+        setUser(null);
+        setPermissions([]);
+        setIsLoading(false);
+      });
     }
-  };
+  }, [authService]);
   const refreshToken = async () => {
     await authService.refreshToken();
   };
   const hasPermission = (permission) => {
-    var _a;
-    if (!((_a = config == null ? void 0 : config.permissions) == null ? void 0 : _a.enabled)) return true;
+    var _a2;
+    if (!((_a2 = config == null ? void 0 : config.permissions) == null ? void 0 : _a2.enabled)) return true;
     return permissions.includes(permission);
   };
   const hasRole = (role) => {
-    var _a;
-    if (!((_a = config == null ? void 0 : config.permissions) == null ? void 0 : _a.enabled)) return true;
+    var _a2;
+    if (!((_a2 = config == null ? void 0 : config.permissions) == null ? void 0 : _a2.enabled)) return true;
     if (user && "role" in user) {
       return user.role === role;
     }
@@ -10465,6 +11186,32 @@ function MockAuthProvider({
   };
   return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children });
 }
+function NoAuthProvider({ children }) {
+  const noOpLogin = async () => {
+    console.warn("NoAuthProvider: login() called but auth is disabled");
+  };
+  const noOpLogout = async () => {
+    console.warn("NoAuthProvider: logout() called but auth is disabled");
+  };
+  const noOpRefresh = async () => {
+    console.warn("NoAuthProvider: refreshToken() called but auth is disabled");
+  };
+  const value = {
+    user: null,
+    isAuthenticated: true,
+    // Always authenticated in no-auth mode
+    isLoading: false,
+    permissions: [],
+    login: noOpLogin,
+    logout: noOpLogout,
+    refreshToken: noOpRefresh,
+    hasPermission: () => true,
+    // All permissions granted
+    hasRole: () => true
+    // All roles granted
+  };
+  return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children });
+}
 const MockAuthContext = createContext(
   void 0
 );
@@ -13604,7 +14351,13 @@ function createReactApp(config) {
       tree = /* @__PURE__ */ jsx(NavigationProvider, { initialNavigation: navigation, children: /* @__PURE__ */ jsx(SidebarProvider, { children: tree }) });
     }
     if (enableAuth) {
-      tree = /* @__PURE__ */ jsx(AuthProvider, { config: auth, children: tree });
+      const authMode = (auth == null ? void 0 : auth.mode) || "pattern-stack";
+      if (authMode === "none") {
+        setGlobalAuthService(null);
+        tree = /* @__PURE__ */ jsx(NoAuthProvider, { children: tree });
+      } else {
+        tree = /* @__PURE__ */ jsx(AuthProvider, { config: auth, children: tree });
+      }
     }
     if (enableQuery) {
       tree = /* @__PURE__ */ jsxs(QueryClientProvider, { client: queryClient, children: [
@@ -13622,7 +14375,8 @@ function createReactApp(config) {
       routes.push({ path, component });
     },
     render() {
-      const shouldProtect = enableAuth && (auth == null ? void 0 : auth.requireAuth) !== false;
+      const authMode = (auth == null ? void 0 : auth.mode) || "pattern-stack";
+      const shouldProtect = enableAuth && authMode !== "none" && (auth == null ? void 0 : auth.requireAuth) !== false;
       const publicPaths = (auth == null ? void 0 : auth.publicPaths) ?? ["/login", "/register", "/forgot-password"];
       const isPublicPath = (path) => {
         return publicPaths.some((p) => path === p || path.startsWith(p + "/"));
@@ -16810,12 +17564,14 @@ export {
   APIDataTemplate,
   API_ENDPOINTS,
   APP_NAME,
+  AUTH_TOKEN_KEY,
   Accordion,
   ActivityFeed,
   AdminCRUDTemplate,
   AdminDashboardTemplate,
   AdminDetailTemplate,
   Alert,
+  ApiClient,
   AppHeader,
   AppLayout,
   AuthDivider,
@@ -16842,6 +17598,7 @@ export {
   ColorSwatch,
   ComponentShowcasePage,
   ComponentShowcaseTemplate,
+  ConnectionStatus,
   DASHBOARD_CHART_HEIGHTS,
   DASHBOARD_CONTAINER_HEIGHTS,
   DASHBOARD_HEIGHT_CLASSES,
@@ -16882,6 +17639,7 @@ export {
   EnhancedDataTemplate,
   EntityIcon,
   ErrorBoundary2 as ErrorBoundary,
+  FieldGrid,
   FileUpload,
   FormField,
   FormGroup,
@@ -16901,6 +17659,7 @@ export {
   Modal,
   NavMenu,
   NavigationProvider,
+  NoAuthProvider,
   PageTemplate,
   PageTitle,
   Pagination,
@@ -16964,19 +17723,24 @@ export {
   breakpoints,
   cn,
   createAPIDataTemplate,
+  createApiClient,
+  createMobileCardRenderer,
   createReactApp,
   createSimpleApp,
   defaultFieldRenderers,
   detectBulkOperationType,
   detectUIConfig,
+  entityToListCardProps,
   env,
   formatNumberWithTooltip,
   generateBulkOperationName,
+  generateCompactColumns,
   getAnimationClasses,
   getChartHeight,
   getContainerHeightClass,
   getCurrentBreakpoint,
   getFieldType,
+  getGlobalAuthService,
   getIcon,
   getNavigationItems,
   getResponsiveClasses,
@@ -17000,6 +17764,7 @@ export {
   useCreateExample,
   useDeleteExample,
   useEntityData,
+  useEntityDetail,
   useErrorBoundary,
   useFieldMetadata,
   useGetExample,
@@ -17011,6 +17776,7 @@ export {
   useMediaQuery,
   useMockAuth,
   useNavigation,
+  useOnlineStatus,
   useOverflowDetection,
   usePermissions,
   useResponsiveClasses,