pejay-ui 1.3.1 → 1.3.3

package/README.md

@@ -130,6 +130,13 @@ Below is the list of components you can add. Each has a copyable command block w
   npx pejay-ui add dropdown/multiselect-input
   ```
 
+### Layouts
+
+* **`layouts/lv1`**: A responsive, collapsible sidebar-based application layout.
+  ```bash
+  npx pejay-ui add layouts/lv1
+  ```
+
 ### Scaffolds & Templates
 
 * **`tanstack-query-client`**: Bare-bone TanStack Query client and context provider setup, copied directly into your project's `src/tanstack-query/`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pejay-ui",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "type": "module",
   "description": "react ui components",
   "bin": {

package/registry.json

@@ -236,5 +236,21 @@
     "targetDirName": "rtk-query",
     "files": ["templates/scaffolds/rtk-query"],
     "peerDependencies": ["@reduxjs/toolkit", "react-redux"]
+  },
+  "layouts/lv1": {
+    "name": "AppLayout",
+    "category": "layouts",
+    "files": [
+      "templates/layouts/lv1/app-layout.tsx",
+      "templates/layouts/lv1/sidebar-menu.tsx",
+      "templates/layouts/lv1/index.ts"
+    ],
+    "utils": ["cn.ts"],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ]
   }
 }
+

package/templates/layouts/lv1/app-layout.tsx

@@ -0,0 +1,194 @@
+import { useState, useLayoutEffect, useEffect } from "react";
+import { Menu, PanelLeftOpen, PanelRightOpen, X } from "lucide-react";
+import { cn } from "@/utils/cn";
+import { MenuSection, SidebarMenu } from "./sidebar-menu";
+
+
+// ============================================================================
+// Config
+// ============================================================================
+
+const menuConfig: MenuSection[] = [];
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type Variant = "none" | "semi" | "full" | "hybrid";
+type ActiveVariant = "none" | "semi" | "full";
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+const useAppMenu = (variant: Variant) => {
+  const [expandMenu, setExpandMenu] = useState(false);
+  const [activeVariant, setActiveVariant] = useState<ActiveVariant>("none");
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setExpandMenu(false); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  useLayoutEffect(() => {
+    const onResize = () => {
+      const w = window.innerWidth;
+      if (variant === "hybrid") {
+        setActiveVariant(w >= 1024 ? "none" : w >= 768 ? "semi" : "full");
+      } else if (variant === "full") {
+        setActiveVariant(w >= 768 ? "none" : "full");
+      } else {
+        setActiveVariant(variant as ActiveVariant);
+      }
+    };
+    window.addEventListener("resize", onResize);
+    onResize();
+    return () => window.removeEventListener("resize", onResize);
+  }, [variant]);
+
+  return {
+    activeVariant,
+    isExpanded: activeVariant === "none" || expandMenu,
+    expandMenu,
+    setExpandMenu,
+  };
+};
+
+// ============================================================================
+// AppLayout
+// ============================================================================
+
+export const AppLayout = ({ variant = "hybrid" }: { variant?: Variant }) => {
+  const { activeVariant, isExpanded, expandMenu, setExpandMenu } = useAppMenu(variant);
+
+  return (
+    <div className="flex flex-row flex-1 w-full h-screen overflow-hidden bg-[#0f0f11]">
+      {activeVariant === "full" && isExpanded && (
+        <div
+          className="fixed inset-0 bg-black/60 z-40 backdrop-blur-sm"
+          onClick={() => setExpandMenu(false)}
+        />
+      )}
+
+      <SidePanel
+        activeVariant={activeVariant}
+        isExpanded={isExpanded}
+        expandMenu={expandMenu}
+        setExpandMenu={setExpandMenu}
+      />
+
+      <div className="flex flex-col flex-1 h-full overflow-hidden">
+        <TopBar
+          activeVariant={activeVariant}
+          isExpanded={isExpanded}
+          setExpandMenu={setExpandMenu}
+        />
+        <MainArea />
+      </div>
+    </div>
+  );
+};
+
+// ============================================================================
+// SidePanel
+// ============================================================================
+
+const SidePanel = ({
+  activeVariant,
+  isExpanded,
+  expandMenu,
+  setExpandMenu,
+}: {
+  activeVariant: ActiveVariant;
+  isExpanded: boolean;
+  expandMenu: boolean;
+  setExpandMenu: (v: boolean) => void;
+}) => {
+  const sidebar = (
+    <div className="flex flex-col bg-[#141417] border-r border-white/[0.06] h-full p-2 gap-2 w-full overflow-hidden shrink-0">
+      {/* Header */}
+      {activeVariant === "none" ? (
+        <div className="px-2.5 py-2 shrink-0 mb-1 flex items-center gap-2 text-sm font-bold text-white/80 select-none">
+          <Menu size={18} />
+          <span>Menu</span>
+        </div>
+      ) : (
+        <button
+          onClick={() => setExpandMenu(!expandMenu)}
+          aria-expanded={isExpanded}
+          className={cn(
+            "w-full shrink-0 flex items-center gap-2 rounded-lg text-white/60 hover:bg-white/5 hover:text-white/90 transition-all duration-150 cursor-pointer select-none font-bold text-sm",
+            isExpanded ? "px-2.5 h-9 justify-start mb-1" : "justify-center aspect-square p-2.5 w-auto"
+          )}
+        >
+          {isExpanded ? <PanelLeftOpen size={18} /> : <PanelRightOpen size={18} />}
+          {isExpanded && <span>Menu</span>}
+        </button>
+      )}
+
+      <SidebarMenu
+        config={menuConfig}
+        isExpanded={activeVariant === "full" ? true : isExpanded}
+      />
+    </div>
+  );
+
+  if (activeVariant === "full") {
+    return (
+      <div className={cn(
+        "fixed top-0 left-0 h-full z-50 w-52 transform transition-transform duration-300",
+        isExpanded ? "translate-x-0" : "-translate-x-full"
+      )}>
+        {sidebar}
+        <div className={cn(
+          "absolute left-full top-3 ml-3 transition-opacity duration-150",
+          expandMenu ? "opacity-100" : "opacity-0 pointer-events-none"
+        )}>
+          <button
+            onClick={() => setExpandMenu(false)}
+            className="w-9 h-9 flex items-center justify-center rounded-lg bg-white/10 text-white hover:bg-white/20 border border-white/10 cursor-pointer"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("h-full transition-all duration-200 shrink-0", isExpanded ? "w-52" : "w-max")}>
+      {sidebar}
+    </div>
+  );
+};
+
+// ============================================================================
+// TopBar / MainArea
+// ============================================================================
+
+const TopBar = ({
+  activeVariant,
+  isExpanded,
+  setExpandMenu,
+}: {
+  activeVariant: ActiveVariant;
+  isExpanded: boolean;
+  setExpandMenu: (v: boolean) => void;
+}) => (
+  <div className="flex items-center h-14 px-3 border-b border-white/[0.06] bg-[#141417] shrink-0">
+    {activeVariant === "full" && !isExpanded && (
+      <button
+        onClick={() => setExpandMenu(true)}
+        aria-label="Open Menu"
+        className="w-9 h-9 flex items-center justify-center rounded-lg text-white/50 hover:bg-white/5 hover:text-white/80 transition-all duration-150 cursor-pointer"
+      >
+        <PanelRightOpen size={18} />
+      </button>
+    )}
+  </div>
+);
+
+const MainArea = () => (
+  <div className="flex-1 w-full bg-[#0f0f11] h-full overflow-y-auto" />
+);

package/templates/layouts/lv1/index.ts

@@ -0,0 +1,2 @@
+export * from "./app-layout";
+export * from "./sidebar-menu";

package/templates/layouts/lv1/sidebar-menu.tsx

@@ -0,0 +1,120 @@
+import { type ReactNode } from "react";
+import { cn } from "@/utils/cn";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface MenuItem {
+  id: string | number;
+  label: string;
+  icon?: ReactNode;
+  link?: string;
+  children?: { id: string | number; label: string; link?: string; icon?: ReactNode }[];
+}
+
+export type MenuSection =
+  | { id: string | number; type: "item"; label: string; icon?: ReactNode; link?: string; divider?: boolean }
+  | { id: string | number; type: "group"; label: string; items: MenuItem[]; divider?: boolean }
+  | { id: string | number; type: "bottom"; items: MenuItem[]; divider?: boolean };
+
+export interface SidebarMenuProps {
+  config: MenuSection[];
+  isExpanded: boolean;
+  activeId?: string | number;
+  onItemClick?: (id: string | number) => void;
+}
+
+// ============================================================================
+// Menu Button
+// ============================================================================
+
+const MenuBtn = ({
+  label,
+  icon,
+  isExpanded,
+  isActive,
+  onClick,
+}: {
+  label: string;
+  icon?: ReactNode;
+  isExpanded: boolean;
+  isActive?: boolean;
+  onClick?: () => void;
+}) => (
+  <button
+    onClick={onClick}
+    className={cn(
+      "w-full flex items-center gap-2.5 rounded-lg text-sm font-medium transition-all duration-150 cursor-pointer select-none",
+      isExpanded ? "px-2.5 py-2 justify-start" : "p-2.5 justify-center aspect-square w-auto",
+      isActive ? "bg-white/10 text-white" : "text-white/50 hover:bg-white/5 hover:text-white/80"
+    )}
+  >
+    <span className="shrink-0 w-[18px] h-[18px] flex items-center justify-center">
+      {icon ?? <span className="text-[13px] font-bold font-mono">{label.charAt(0)}</span>}
+    </span>
+    {isExpanded && <span className="whitespace-nowrap">{label}</span>}
+  </button>
+);
+
+// ============================================================================
+// SidebarMenu
+// ============================================================================
+
+export const SidebarMenu = ({ config, isExpanded, activeId, onItemClick }: SidebarMenuProps) => {
+  if (!config.length) return null;
+
+  const renderItem = (item: MenuItem) => (
+    <MenuBtn
+      key={item.id}
+      label={item.label}
+      icon={item.icon}
+      isExpanded={isExpanded}
+      isActive={item.id === activeId}
+      onClick={() => onItemClick?.(item.id)}
+    />
+  );
+
+  const topSections = config.filter((s) => s.type !== "bottom");
+  const bottomSections = config.filter((s) => s.type === "bottom");
+
+  const renderSection = (section: MenuSection) => {
+    const el =
+      section.type === "group" ? (
+        <div key={section.id} className={cn("flex flex-col gap-0.5 w-full", isExpanded && "mt-2 first:mt-0")}>
+          {isExpanded && (
+            <span className="text-[9px] uppercase font-bold tracking-widest text-white/25 px-2.5 py-1 select-none">
+              {section.label}
+            </span>
+          )}
+          {section.items.map(renderItem)}
+        </div>
+      ) : section.type === "bottom" ? (
+        <div key={section.id} className="flex flex-col gap-0.5 w-full">
+          {section.items.map(renderItem)}
+        </div>
+      ) : (
+        renderItem({ id: section.id, label: section.label, icon: section.icon, link: section.link })
+      );
+
+    return section.divider ? (
+      <div key={section.id} className="flex flex-col gap-0.5 w-full">
+        <div className="h-px bg-white/10 my-1.5 w-full" />
+        {el}
+      </div>
+    ) : el;
+  };
+
+  return (
+    <div className="flex flex-col justify-between flex-1 w-full h-full overflow-hidden gap-1">
+      <div className="flex flex-col gap-0.5 w-full overflow-y-auto flex-1">
+        {topSections.map(renderSection)}
+      </div>
+      {bottomSections.length > 0 && (
+        <div className="flex flex-col gap-0.5 w-full shrink-0">
+          {bottomSections.map(renderSection)}
+        </div>
+      )}
+    </div>
+  );
+};

package/templates/notes/analysis_results.md

@@ -0,0 +1,107 @@
+# Codebase Scaffold Audit & Analysis
+
+This document provides a comprehensive structural and architectural analysis of the scaffold templates in `pejay-ui` (`templates/scaffolds/`). All scaffolds are ready-to-use boilerplate templates designed to be easily injected into react-based projects using the CLI.
+
+---
+
+## 1. Axios Scaffold (`axios-client`)
+* **Target Directory**: `src/axios/`
+* **Peer Dependencies**: `axios`
+* **Files**:
+  * `index.ts`: Configures the base `axiosInstance` with a local port 5001 base URL and default configurations.
+  * `interceptors.ts`: Configures standard request and response interceptors.
+  * `request.ts`: Implements a type-safe wrapper over `axios` queries with customized `CustomAxiosRequestConfig` options (such as `skipErrorToast`).
+  * `endpoints.ts`: Declarative endpoint configurations helper (`createResourceEndpoints`).
+  * `api/one.api.ts` & `index.ts`: Implements API wrapper services mapping HTTP verbs (GET, POST, PUT, DELETE, and multipart/form-data POST) using endpoints.
+
+### 💡 Notable Architectural Design Patterns
+* **Token Injection & Eject Pattern**: Setup function allows on-demand ejection of previous interceptors to prevent interceptor duplication when token state resets.
+* **Multipart uploads**: Out-of-the-box helper configuration for `multipart/form-data` uploading.
+* **Commented Best Practice Guides**: Includes detailed code comments discussing error handling strategies (global vs. screen-specific alerts like 400 Validation, 422 Forms, 409 Conflicts).
+
+---
+
+## 2. React Router Scaffold (`react-router-client`)
+* **Target Directory**: `src/react-router/`
+* **Peer Dependencies**: `react-router-dom`
+* **Files**:
+  * `router/index.ts`: Builds the route hierarchy using the modern object-based router syntax (`createBrowserRouter`).
+  * `router/path.ts`: Declares route path constants.
+  * `router/guards/private.route.tsx` & `public.route.tsx`: Authentication routing guards.
+  * `router/layouts/`: Base layout wrapper components (`auth.layout.tsx`, `error.layout.tsx`, `main.layout.tsx`).
+  * `routes/`: Subfolders representing each page boundary with lazy component imports.
+  * `hook/useRouterSearch.ts`: Utility hook for robust search parameter reading.
+
+### 💡 Notable Architectural Design Patterns
+* **Route Guards without Paths**: Centralizes auth decisions using pathless routes (layout routes) that encapsulate authentication checks before child route components mount.
+* **Target Restoration Pattern**: कमेंट-दस्तावेज demonstrates how the private route guard passes `redirectTo` in query parameters, allowing the login flow to restore user navigation state seamlessly.
+* **SEO & Static Prerendering (V7)**: Extensive documentation within route components illustrating route meta configurations and Nginx deployment configurations for serving pre-rendered static HTML structures.
+
+---
+
+## 3. Redux Store Scaffold (`redux-store-client`)
+* **Target Directory**: `src/redux-store/`
+* **Peer Dependencies**: `@reduxjs/toolkit`, `react-redux`, `redux-persist`
+* **Files**:
+  * `store.ts`: Configures store via `configureStore` with middleware handling to bypass serialization warnings for `redux-persist` actions.
+  * `reducers.ts`: Combines slices, setting up selective slice persistence configurations.
+  * `slices/`: Example RTK slices (`one.slice.ts` & `two.slice.ts`) containing state declarations, actions, and reducers.
+  * `selector/`: Selectors implementing memoized state reading.
+
+### 💡 Notable Architectural Design Patterns
+* **Bypassing Redux-Persist Serialization Warnings**: Custom configureStore config overrides standard serialization check constraints to allow redux-persist lifecycle actions (`FLUSH`, `REHYDRATE`, etc.) without throwing warnings.
+* **Slice-Level Persistence Configuration**: Configured to show developers how to selectively persist specific slices using `storageLocal` instead of forcing entire store persistence.
+
+---
+
+## 4. RTK Query Scaffold (`rtk-query-client`)
+* **Target Directory**: `src/rtk-query/`
+* **Peer Dependencies**: `@reduxjs/toolkit`, `react-redux`
+* **Files**:
+  * `baseApi.ts`: Initial API framework setup using `createApi` and injecting custom base queries.
+  * `baseQuery.ts`: Configures base query parameters.
+  * `queryTags.ts`: Declarative cache tag declarations.
+  * `middlewares.ts`: RTK query middleware definitions.
+  * `endpoints/`: Route query endpoint modules.
+
+### 💡 Notable Architectural Design Patterns
+* **Centralized Cache Tag Management**: Centralizes tag types in a single array mapping configuration to prevent magic strings and cache invalidation issues.
+* **Ready-to-Plug Store Middleware**: Clear documentation showing how to connect RTK Query's reducer and middleware inside the primary Redux root store.
+
+---
+
+## 5. TanStack Query Scaffold (`tanstack-query-client`)
+* **Target Directory**: `src/tanstack-query/`
+* **Peer Dependencies**: `@tanstack/react-query`
+* **Files**:
+  * `client.ts`: Configures a custom type-safe `apiClient` wrapper around the web fetch API.
+  * `api-base.ts`: Standard configuration settings.
+  * `api-queries.ts` / `api-mutations.ts`: API query hooks.
+  * `module/`: Modular services, mutations, queries, mappers, and cache keys configuration.
+
+### 💡 Notable Architectural Design Patterns
+* **Type-Safe API Wrapper Client**: Provides custom `.get()`, `.post()`, `.put()`, `.patch()`, and `.delete()` wrappers on `fetch` with automated JSON serialization guards.
+* **Separation of Concerns**: Structures files with clean mappers (decoupling API responses from UI representations) and query key factories (avoiding string typos).
+
+---
+
+## 6. TanStack Router Scaffold (`tanstack-router-client`)
+* **Target Directory**: `src/tanstack-router/`
+* **Peer Dependencies**: `@tanstack/react-router`
+* **Files**:
+  * `router.ts`: Initializes Tanstack `createRouter` and configures defaults.
+  * `routes/`: File-based route trees (`__root.tsx`, `_app.tsx`, `_auth.tsx`).
+  * `layout/`: UI layouts (`app.layout.tsx`, `auth.layout.tsx`, etc.).
+  * `page/`: Visual target pages.
+
+### 💡 Notable Architectural Design Patterns
+* **Intent-Based Preloading**: Uses `defaultPreload: "intent"` to preload route bundles and datasets immediately when a user hovers over a link, maximizing perceived UI responsiveness.
+* **TypeScript Route Declaration Merging**: Employs TypeScript interface merging (`Register`) to ensure global route tree parameters are fully typed across the application.
+
+---
+
+## 🛠️ Verification & Quality Assessment
+
+* **Relative Imports**: All internal template files reference other module files using relative imports (`./` or `../`). They do not depend on absolute webpack/vite aliases (e.g. `@/`), making them immediately compatible with any folder structure they are copied into.
+* **Code Cleanliness**: Types are cleanly defined, variables are appropriately scoped, and hooks clean up event listeners on unmount.
+* **Documentation Quality**: Comments explain the architectural "Why" (e.g., Suspense vs Component Skeletons, SEO Nginx server setup) instead of just repeating what the code does. This is extremely helpful for developers installing these scaffolds.

package/templates/scripts/setup.bat

@@ -29,21 +29,25 @@ echo.
 
 set "packages="
 
-call :ask "@reduxjs/toolkit"
 call :ask "@tailwindcss/vite"
+call :ask "tailwindcss"
+call :ask "tailwind-merge"
 call :ask "clsx"
-call :ask "date-fns"
-call :ask "dayjs"
-call :ask "@floating-ui/react"
-call :ask "lucide-react"
 call :ask "react-hook-form"
-call :ask "react-redux"
 call :ask "react-router-dom"
-call :ask "tailwind-merge"
-call :ask "tailwindcss"
 call :ask "@tanstack/react-query"
-call :ask "zod"
+call :ask "@tanstack/react-router"
+call :ask "@reduxjs/toolkit"
+call :ask "react-redux"
+call :ask "redux-persist"
+call :ask "lucide-react"
+call :ask "react-icons"
+call :ask "axios"
 call :ask "zustand"
+call :ask "zod"
+call :ask "@hookform/resolvers"
+call :ask "@floating-ui/react"
+call :ask "framer-motion"
 
 if not "!packages!"=="" (
     echo.
@@ -222,51 +226,90 @@ type nul > components\global\index.ts
 mkdir hooks
 type nul > hooks\index.ts
 
-mkdir lib
-type nul > lib\index.ts
-
-mkdir routes
-type nul > routes\index.ts
-mkdir routes\dashboard
-type nul > routes\dashboard\index.ts
-mkdir routes\dashboard\components
-type nul > routes\dashboard\components\index.ts
-mkdir routes\dashboard\hooks
-type nul > routes\dashboard\hooks\index.ts
-mkdir routes\auth
-type nul > routes\auth\index.ts
-mkdir routes\auth\components
-type nul > routes\auth\components\index.ts
-mkdir routes\auth\hooks
-type nul > routes\auth\hooks\index.ts
-
-mkdir router
-mkdir router\guards
-type nul > router\guards\guard.public.ts
-type nul > router\guards\guard.private.ts
-mkdir router\layout
-type nul > router\layout\layout.public.ts
-type nul > router\layout\layout.main.ts
-type nul > router\layout\layout.auth.ts
-type nul > router\index.ts
-
-mkdir providers
-type nul > providers\index.ts
-type nul > providers\app.provider.ts
-
-mkdir services
-type nul > services\index.ts
-mkdir services\dashboard
-mkdir services\auth
-
-mkdir store
-type nul > store\index.ts
-
 mkdir utils
 type nul > utils\index.ts
 
 cd ..
 
+:: ─────────────────────────────────────────
+:: pejay-ui initialization and scaffolding
+:: ─────────────────────────────────────────
+set "hasAxios="
+set "hasTanstackQuery="
+set "hasTanstackRouter="
+set "hasReactRouter="
+set "hasRedux="
+set "hasPersist="
+
+for %%p in (!packages!) do (
+    if "%%p"=="axios" set "hasAxios=1"
+    if "%%p"=="@tanstack/react-query" set "hasTanstackQuery=1"
+    if "%%p"=="@tanstack/react-router" set "hasTanstackRouter=1"
+    if "%%p"=="react-router-dom" set "hasReactRouter=1"
+    if "%%p"=="@reduxjs/toolkit" set "hasRedux=1"
+    if "%%p"=="react-redux" set "hasRedux=1"
+    if "%%p"=="redux-persist" set "hasPersist=1"
+)
+
+set "needsInit="
+if defined hasAxios set "needsInit=1"
+if defined hasTanstackQuery set "needsInit=1"
+if defined hasTanstackRouter set "needsInit=1"
+if defined hasReactRouter set "needsInit=1"
+if defined hasRedux set "needsInit=1"
+
+if defined needsInit (
+    echo.
+    echo Initializing pejay-ui...
+    call npx pejay-ui init
+    
+    if defined hasAxios (
+        echo Adding axios-client...
+        call npx pejay-ui add axios-client
+    )
+    if defined hasTanstackQuery (
+        echo Adding tanstack-query-client...
+        call npx pejay-ui add tanstack-query-client
+    )
+    if defined hasTanstackRouter (
+        echo Adding tanstack-router-client...
+        call npx pejay-ui add tanstack-router-client
+    )
+    if defined hasReactRouter (
+        echo Adding react-router-client...
+        call npx pejay-ui add react-router-client
+    )
+    if defined hasRedux (
+        if defined hasPersist (
+            echo Adding redux-store-client...
+            call npx pejay-ui add redux-store-client
+        ) else (
+            echo.
+            echo You selected Redux. Which template would you like to add?
+            echo [1] Redux Store (redux-store-client)
+            echo [2] RTK Query (rtk-query-client)
+            echo [3] Both
+            echo [4] None
+            set "reduxAns=1"
+            set /p "reduxAns=Enter choice (1-4, default 1): "
+            if "!reduxAns!"=="2" (
+                echo Adding rtk-query-client...
+                call npx pejay-ui add rtk-query-client
+            ) else if "!reduxAns!"=="3" (
+                echo Adding redux-store-client...
+                call npx pejay-ui add redux-store-client
+                echo Adding rtk-query-client...
+                call npx pejay-ui add rtk-query-client
+            ) else if "!reduxAns!"=="4" (
+                rem Do nothing
+            ) else (
+                echo Adding redux-store-client...
+                call npx pejay-ui add redux-store-client
+            )
+        )
+    )
+)
+
 echo.
 echo Project '%projectName%' setup complete!
 endlocal

package/templates/scripts/setup.ps1

@@ -63,28 +63,33 @@ Write-Output "Installing dependencies"
 
 
 $availablePackages = @(
-    "@reduxjs/toolkit",
     "@tailwindcss/vite",
+    "tailwindcss",
+    "tailwind-merge",
     "clsx",
-    "date-fns",
-    "dayjs",
-    "floating-ui",
-    "lucide-react",
-    "react-form-hook",
-    "react-redux",
+    "react-hook-form",
     "react-router-dom",
-    "tailwind-merge",
-    "tailwindcss",
-    "tanstack-query",
+    "@tanstack/react-query",
+    "@tanstack/react-router",
+    "@reduxjs/toolkit",
+    "react-redux",
+    "redux-persist",
+    "lucide-react",
+    "react-icons",
+    "axios",   
+    "zustand",
     "zod",
-    "zustand"
+    "@hookform/resolvers",
+    "@floating-ui/react",
+    "framer-motion"
 )
 
 $selectedPackages = Show-MultiSelect -Options $availablePackages -Title "Select packages to install (SPACE to toggle, ENTER to confirm):"
 
 if ($selectedPackages.Count -gt 0) {
     npm install
-    npm install $selectedPackages
+    $packageString = $selectedPackages -join " "
+    Invoke-Expression "npm install $packageString"
 } else {
     Write-Output "No packages selected, skipping..."
 }
@@ -270,49 +275,66 @@ Set-Content "components/global/index.ts" ""
 mkdir hooks
 Set-Content "hooks/index.ts" ""
 
-mkdir lib
-Set-Content "lib/index.ts" ""
-
-mkdir routes
-Set-Content "routes/index.ts" ""
-mkdir routes/dashboard
-Set-Content "routes/dashboard/index.ts" ""
-mkdir routes/dashboard/components
-Set-Content "routes/dashboard/components/index.ts" ""
-mkdir routes/dashboard/hooks
-Set-Content "routes/dashboard/hooks/index.ts" ""
-mkdir routes/auth
-Set-Content "routes/auth/index.ts" ""
-mkdir routes/auth/components
-Set-Content "routes/auth/components/index.ts" ""
-mkdir routes/auth/hooks
-Set-Content "routes/auth/hooks/index.ts" ""
-
-mkdir router
-mkdir router/guards
-Set-Content "router/guards/guard.public.ts" ""
-Set-Content "router/guards/guard.private.ts" ""
-mkdir router/layout
-Set-Content "router/layout/layout.public.ts" ""
-Set-Content "router/layout/layout.main.ts" ""
-Set-Content "router/layout/layout.auth.ts" ""
-Set-Content "router/index.ts" ""
-
-mkdir providers
-Set-Content "providers/index.ts" ""
-Set-Content "providers/app.provider.ts" ""
-
-mkdir services
-Set-Content "services/index.ts" ""
-mkdir services/dashboard
-mkdir services/auth
-
-mkdir store
-Set-Content "store/index.ts" ""
-
 mkdir utils
 Set-Content "utils/index.ts" ""
 
 Set-Location ..
 
+# ─────────────────────────────────────────
+# pejay-ui initialization and scaffolding
+# ─────────────────────────────────────────
+$needsInit = $false
+$templatesToAdd = @()
+
+if ($selectedPackages -contains "axios") {
+    $needsInit = $true
+    $templatesToAdd += "axios-client"
+}
+if ($selectedPackages -contains "@tanstack/react-query") {
+    $needsInit = $true
+    $templatesToAdd += "tanstack-query-client"
+}
+if ($selectedPackages -contains "@tanstack/react-router") {
+    $needsInit = $true
+    $templatesToAdd += "tanstack-router-client"
+}
+if ($selectedPackages -contains "react-router-dom") {
+    $needsInit = $true
+    $templatesToAdd += "react-router-client"
+}
+if ($selectedPackages -contains "@reduxjs/toolkit" -or $selectedPackages -contains "react-redux") {
+    $needsInit = $true
+    if ($selectedPackages -contains "redux-persist") {
+        $templatesToAdd += "redux-store-client"
+    } else {
+        Write-Output ""
+        Write-Output "You selected Redux. Which template would you like to add?"
+        Write-Output "1) Redux Store (redux-store-client)"
+        Write-Output "2) RTK Query (rtk-query-client)"
+        Write-Output "3) Both"
+        Write-Output "4) None"
+        $reduxChoice = Read-Host "Select option (1-4, default 1)"
+        if ($reduxChoice -eq "2") {
+            $templatesToAdd += "rtk-query-client"
+        } elseif ($reduxChoice -eq "3") {
+            $templatesToAdd += "redux-store-client"
+            $templatesToAdd += "rtk-query-client"
+        } elseif ($reduxChoice -eq "4") {
+            # None
+        } else {
+            $templatesToAdd += "redux-store-client"
+        }
+    }
+}
+
+if ($needsInit) {
+    Write-Output "`nInitializing pejay-ui..."
+    npx pejay-ui init
+
+    foreach ($template in $templatesToAdd) {
+        Write-Output "Adding template: $template..."
+        npx pejay-ui add $template
+    }
+}
+
 Write-Output "✅ Project '$projectName' setup complete!"