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

package/dist/index.es.js

@@ -15,9 +15,9 @@ 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,18 @@ function renderField(value, fieldName, fieldType, breakpoint, item, customRender
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-const API_BASE_URL = "http://localhost:8080";
 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 +2060,12 @@ 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 (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,11 +2073,12 @@ 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();
+            }
+            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.reload();
             }
           } else {
@@ -2120,6 +2124,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 +2397,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 +2425,40 @@ 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
+  };
+}
 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 +4149,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 +4163,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 +4215,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 +4283,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 +4424,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 +4487,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 +4510,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 +4522,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
       )) })
@@ -9218,6 +9347,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 +10075,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 +10087,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 +10114,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 +10230,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 +10282,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 +10344,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 +10391,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;
@@ -10215,48 +10438,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 +10696,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 +13861,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 +13885,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 +17074,14 @@ export {
   APIDataTemplate,
   API_ENDPOINTS,
   APP_NAME,
+  AUTH_TOKEN_KEY,
   Accordion,
   ActivityFeed,
   AdminCRUDTemplate,
   AdminDashboardTemplate,
   AdminDetailTemplate,
   Alert,
+  ApiClient,
   AppHeader,
   AppLayout,
   AuthDivider,
@@ -16882,6 +17148,7 @@ export {
   EnhancedDataTemplate,
   EntityIcon,
   ErrorBoundary2 as ErrorBoundary,
+  FieldGrid,
   FileUpload,
   FormField,
   FormGroup,
@@ -16901,6 +17168,7 @@ export {
   Modal,
   NavMenu,
   NavigationProvider,
+  NoAuthProvider,
   PageTemplate,
   PageTitle,
   Pagination,
@@ -16964,6 +17232,7 @@ export {
   breakpoints,
   cn,
   createAPIDataTemplate,
+  createApiClient,
   createReactApp,
   createSimpleApp,
   defaultFieldRenderers,
@@ -16977,6 +17246,7 @@ export {
   getContainerHeightClass,
   getCurrentBreakpoint,
   getFieldType,
+  getGlobalAuthService,
   getIcon,
   getNavigationItems,
   getResponsiveClasses,
@@ -17000,6 +17270,7 @@ export {
   useCreateExample,
   useDeleteExample,
   useEntityData,
+  useEntityDetail,
   useErrorBoundary,
   useFieldMetadata,
   useGetExample,