startx 1.1.35 → 1.1.52

package/_gitignore

@@ -12,6 +12,9 @@ node_modules
 .env.test.local
 .env.production.local
 
+# Frontend
+.react-router
+
 # Testing
 coverage
 

package/apps/core-server/Dockerfile

@@ -14,7 +14,7 @@ COPY --parents packages/*/package.json ./
 COPY --parents packages/*/*/package.json ./
 COPY --parents configs/*/package.json ./
 
-RUN --mount=type=cache,id=pnpm,target=/root/.local/share/pnpm/store \
+RUN --mount=type=cache,id=pnpm,target=/root/.local/share/pnpm/store,sharing=locked \
     pnpm install --frozen-lockfile
 
 COPY apps/core-server/ ./apps/core-server/
@@ -24,7 +24,7 @@ COPY assets ./assets
 COPY turbo.json ./
 
 # Build the required packages with Turbo cache mounted
-RUN --mount=type=cache,id=turbo,target=/app/.turbo/cache \
+RUN --mount=type=cache,id=turbo,target=/app/.turbo/cache,sharing=locked \
     pnpm build --filter=core-server
 
 # --- Final production image ---

package/apps/core-server/package.json

@@ -32,8 +32,7 @@
 		"country-state-city": "catalog:",
 		"express": "catalog:",
 		"express-fileupload": "catalog:",
-		"express-list-endpoints": "catalog:",
-		"morgan": "catalog:"
+		"express-list-endpoints": "catalog:"
 	},
 	"devDependencies": {
 		"@types/cookie-parser": "catalog:",

package/apps/core-server/src/middlewares/logger-middleware.ts

@@ -1,81 +1,42 @@
+import { ENV } from "@repo/env";
 import { logger } from "@repo/logger";
-import type { Request, Response } from "express";
-import morgan from "morgan";
+import type { NextFunction, Request, Response } from "express";
 
-const jsonFormat = (tokens: morgan.TokenIndexer, req: Request, res: Response) => {
-	const method = tokens.method(req, res) || "-";
-	const url = tokens.url(req, res) || "-";
-	const status = Number(tokens.status(req, res) || 0);
-	const responseTime = tokens["response-time"](req, res) ?? "-";
-	const ip =
-		(req.ip as string) || (req.headers["x-forwarded-for"] as string) || req.socket?.remoteAddress;
-	const user = req.user ? { id: req.user.id, email: req.user.email } : null;
+const SKIPPED_PREFIXES = ["/static", "/_next"];
 
-	return JSON.stringify({
-		method,
-		url,
-		status,
-		responseTimeMs: responseTime,
-		user,
-		ip,
-		ts: new Date().toISOString(),
-	});
-};
+const shouldSkip = (path: string) => path === "/health" || SKIPPED_PREFIXES.some(prefix => path.startsWith(prefix));
 
-const safeLog = (
-	level: "info" | "warn" | "error",
-	message: string,
-	meta?: Record<string, unknown>
-) => {
-	const lg = logger;
-	if (typeof lg.log === "function") {
-		lg.log({ level, message, msg: message, ...meta });
-		return;
-	}
-	const fn = lg[level];
-	if (typeof fn === "function") {
-		fn(message, meta);
+const resolveIp = (req: Request) =>
+	req.ip || (req.headers["x-forwarded-for"] as string | undefined) || req.socket?.remoteAddress || "-";
+
+const levelForStatus = (status: number) => (status >= 500 ? "error" : status >= 400 ? "warn" : "http");
+
+const loggerMiddleware = (req: Request, res: Response, next: NextFunction) => {
+	if (shouldSkip(req.path) || ENV.LOG_LEVEL !== "debug") {
+		next();
 		return;
 	}
-	// fallback
-	if (level && console[level]) {
-		console[level]?.(message, meta ?? {});
-	} else console.warn(message, meta ?? {});
-};
 
-const loggerStream = {
-	write: (message: string) => {
-		const trimmed = message.trim();
-		if (!trimmed) return;
-		try {
-			const meta = JSON.parse(trimmed) as {
-				method: string;
-				url: string;
-				status: number;
-				responseTimeMs: string | number;
-				user?: { id: string; email: string } | null;
-				ip?: string;
-				ts?: string;
-			};
-			const level = meta.status >= 500 ? "error" : meta.status >= 400 ? "warn" : "info";
-			safeLog(level, "http_request", {
-				...meta,
-				logType: "routeInfo",
-			});
-		} catch (err) {
-			console.error(err);
-			safeLog("info", "http_request_parse_error", { raw: trimmed, logType: "routeInfo" });
-		}
-	},
-};
+	const startedAt = process.hrtime.bigint();
+
+	res.on("finish", () => {
+		const { method, originalUrl: url } = req;
+		const { statusCode: status } = res;
+		const responseTimeMs = Number(process.hrtime.bigint() - startedAt) / 1e6;
+		const user = req.user ? { id: req.user.id, email: req.user.email } : null;
 
-const loggerMiddleware = morgan(jsonFormat as any, {
-	skip: (req: Request) => {
-		return (
-			req.path === "/health" || req.path.startsWith("/static") || req.path.startsWith("/_next")
-		);
-	},
-	stream: loggerStream,
-});
+		logger.log(levelForStatus(status), `${method} ${url} ${status} - ${responseTimeMs.toFixed(1)}ms`, {
+			logType: "routeInfo",
+			method,
+			url,
+			status,
+			responseTimeMs: Number(responseTimeMs.toFixed(1)),
+			ip: resolveIp(req),
+			user,
+		});
+	});
+
+	next();
+};
 
 export { loggerMiddleware };

package/apps/queue-worker/Dockerfile

@@ -14,7 +14,7 @@ COPY --parents packages/*/package.json ./
 COPY --parents packages/*/*/package.json ./
 COPY --parents configs/*/package.json ./
 
-RUN --mount=type=cache,id=pnpm,target=/root/.local/share/pnpm/store \
+RUN --mount=type=cache,id=pnpm,target=/root/.local/share/pnpm/store,sharing=locked \
     pnpm install --frozen-lockfile
 
 COPY apps/queue-worker/ ./apps/queue-worker/
@@ -24,7 +24,7 @@ COPY assets ./assets
 COPY turbo.json ./
 
 # Build the required packages with Turbo cache mounted
-RUN --mount=type=cache,id=turbo,target=/app/.turbo/cache \
+RUN --mount=type=cache,id=turbo,target=/app/.turbo/cache,sharing=locked \
     pnpm build --filter=queue-worker
 
 # --- Final production image ---

package/apps/startx-cli/dist/index.mjs

@@ -223,4 +223,4 @@ export default extend(baseConfig);
 `),l&&await o.writeFile(t.join(a,`vitest.config.ts`),`import vitestConfig from "vitest-config/node";
 
 export default vitestConfig;
-`),Z_.info(`Created package ${r} at ${t.relative(i.workspace,a)}`),Z_.info("Run `pnpm install` to link the new package.")}static async resolveEslintPreference(e){if(e.eslint===!1)return!1;let n=Iy.getDirectory(),r=await this.readRootPackage(n.workspace);return this.hasDependency(r,`eslint`)?e.eslint??!0:e.eslint===!0||await Xx.confirm({message:`ESLint is not installed in this monorepo. Install and enable it?`,default:!0})?(r.devDependencies={...r.devDependencies,eslint:await this.resolveDependencyVersion(n.workspace,`eslint`)},await this.writeJson(t.join(n.workspace,`package.json`),r),Z_.info(`Added eslint to the root devDependencies.`),e.install!==!1&&await this.installRootDependencies(n.workspace),!0):!1}static async getInstallTags(e){let t=new Set([`common`,`node`]),n=await this.readRootPackage(e.workspace);e.eslintEnabled&&t.add(`eslint`),this.hasDependency(n,`@biomejs/biome`)&&t.add(`biome`),this.hasDependency(n,`prettier`)&&t.add(`prettier`),this.hasDependency(n,`vitest`)&&t.add(`vitest`),this.hasDependency(n,`tsdown`)&&t.add(`tsdown`);for(let n of e.packages)n.packageJson?.startx?.tags?.forEach(e=>t.add(e)),n.packageJson?.startx?.iTags?.forEach(e=>t.add(e)),n.packageJson?.startx?.gTags?.forEach(e=>t.add(e)),(n.type===`apps`||n.packageJson?.startx?.mode===`standalone`)&&t.add(`runnable`);return Array.from(t)}static resolvePackageClosure(e){let t=new Map,n=[e.selectedPackage],r=r=>{let i=this.findPackage(e.packages,r);i&&!t.has(i.name)&&n.push(i)};for(e.includeEslintConfig&&r(`eslint-config`);n.length>0;){let e=n.shift();if(!t.has(e.name)){t.set(e.name,e);for(let t of[...e.packageJson?.startx?.requiredDeps??[],...e.packageJson?.startx?.requiredDevDeps??[]])r(t)}}return Array.from(t.values())}static async ensureTemplatePackage(e){let t=this.findPackage(e.packages,e.name);if(!t){Z_.warn(`Could not find template package ${e.name}; skipping.`);return}await this.installTemplatePackage({pkg:t,directory:e.directory,tags:e.tags})}static async installTemplatePackage(e){if(!e.pkg.packageJson)throw Error(`Missing package.json for ${e.pkg.name}`);let n=e.overrideRelativePath??e.pkg.relativePath,r=t.join(e.directory.workspace,n);if(await this.pathExists(t.join(r,`package.json`))&&!await Xx.confirm({message:`"${n}" already exists. Overwrite?`,default:!1})){Z_.info(`Skipping ${e.pkg.name}.`);return}let i=new Set([...e.tags,...e.pkg.packageJson.startx?.tags??[]]),a=e.pkg.packageJson.startx?.ignore??[];a.includes(`eslint-config`)&&i.delete(`eslint`),a.includes(`vitest-config`)&&i.delete(`vitest`);let{packageJson:o,isWorkspace:s}=By.handlePackageJson({app:e.pkg.packageJson,tags:Array.from(i),name:e.overrideName??e.pkg.packageJson.name??e.pkg.name});if(s)throw Error(`Cannot install workspace as a package: ${e.pkg.name}`);await this.syncDepsWithCatalog({workspace:e.directory.workspace,templateDir:e.directory.template,packageJson:o}),await Ny.writeJSONFile({dir:r,file:`package`,content:o}),await this.copyValidatedFilesFromFolder(e.pkg.path,r,i),await Ny.copyDirectory({from:t.join(e.pkg.path,`src`),to:t.join(r,`src`),exclude:i.has(`vitest`)?void 0:/\.test\.tsx?$/}),Z_.info(`Installed ${e.overrideName??e.pkg.name} at ${n}`)}static async copyValidatedFilesFromFolder(e,n,r){let i=await Ny.listFiles({dir:e}).catch(()=>[]);for(let a of i){let i=Py[a];i&&!i.tags.every(e=>r.has(e))||a!==`package.json`&&await Ny.copyFile({from:t.join(e,a),to:t.join(n,a)})}}static createPackageJson(e){let t={typecheck:`tsc --noEmit`,clean:`rimraf dist .turbo`},n={"typescript-config":`workspace:*`},r=[];return e.eslintEnabled?(t.lint=`eslint .`,t[`lint:fix`]=`eslint . --fix`,n[`eslint-config`]=`workspace:*`):r.push(`eslint-config`),e.vitestEnabled?(t.test=`vitest run`,n[`vitest-config`]=`workspace:*`):r.push(`vitest-config`),{name:e.name,version:`1.0.0`,type:`module`,scripts:t,exports:`./src/index.ts`,devDependencies:n,startx:{iTags:[`node`],requiredDevDeps:[`typescript-config`],...r.length>0?{ignore:r}:{}}}}static async checkAndInstallMissingDeps(e){let n=await this.readRootPackage(e.directory.workspace),r=await Iy.parsePnpmWorkspace({dir:e.directory.workspace}),i=[],a=[];for(let[t,o]of Object.entries(Ly))if(o.tags.every(t=>e.tags.includes(t))&&!o.tags.includes(`root`))if(o.version.startsWith(`workspace:`))await this.workspacePackageExists(e.directory.workspace,t)||a.push(t);else{if(this.hasDependency(n,t))continue;let e=r?.catalog?.[t]?`catalog:`:o.version;i.push({name:t,version:e,isDev:o.isDevDependency??!0})}if(a.length>0){Z_.warn(`The following workspace packages are missing from this monorepo:`);for(let e of a)Z_.warn(`  - ${e}  →  run: startx package add ${e}`)}if(i.length!==0){Z_.warn(`The following npm dependencies are required but not installed:`);for(let e of i)Z_.warn(`  - ${e.name}`);if(!await Xx.confirm({message:`Add them to the workspace root package.json?`,default:!0})){Z_.warn(`Skipping. Some features may not work correctly without these dependencies.`);return}n.devDependencies??={},n.dependencies??={};for(let e of i)e.isDev?n.devDependencies[e.name]=e.version:n.dependencies[e.name]=e.version;await this.writeJson(t.join(e.directory.workspace,`package.json`),n),Z_.info(`Added missing dependencies to root package.json.`),e.install!==!1&&await this.installRootDependencies(e.directory.workspace)}}static async workspacePackageExists(e,n){let r=n.startsWith(`@`)?t.join(...n.split(`/`)):n,i=[t.join(e,`configs`,r,`package.json`),t.join(e,`packages`,r,`package.json`),t.join(e,`apps`,r,`package.json`)];for(let e of i)if(await this.pathExists(e))return!0;return!1}static getDestinationPath(e,n){let r=t.dirname(e),i=n.includes(`/`)?n.split(`/`).pop():n;return t.join(r,i)}static getDefaultPackagePath(e){if(e.startsWith(`@`)){let[n,r]=e.split(`/`);return t.join(`packages`,n,r)}return t.join(`packages`,e)}static findPackage(e,t){return e.find(e=>e.name===t||e.packageJson?.name===t)}static hasDependency(e,t){return!!(e.dependencies?.[t]||e.devDependencies?.[t]||e.peerDependencies?.[t])}static async readRootPackage(e){let n=await o.readFile(t.join(e,`package.json`),`utf-8`);return JSON.parse(n)}static async resolveDependencyVersion(e,t){return(await Iy.parsePnpmWorkspace({dir:e}))?.catalog?.[t]?`catalog:`:t===`eslint`?`^9.0.0`:`latest`}static async installRootDependencies(e){let t=(await this.readRootPackage(e)).packageManager?.split(`@`)[0]||`pnpm`,r=t===`yarn`?`yarn`:t,i=[`install`];Z_.info(`Running ${r} ${i.join(` `)} to install ESLint...`),await new Promise((t,a)=>{let o=n(r,i,{cwd:e,stdio:`inherit`,shell:process.platform===`win32`});o.on(`error`,a),o.on(`close`,e=>{if(e===0){t();return}a(Error(`${r} ${i.join(` `)} exited with code ${e}`))})}).catch(t=>{Z_.warn(`Could not install dependencies automatically: ${t instanceof Error?t.message:t}`),Z_.warn(`Run "${r} ${i.join(` `)}" manually in ${e}.`)})}static async syncDepsWithCatalog(e){let n=t.join(e.workspace,`pnpm-workspace.yaml`),r;try{r=await o.readFile(n,`utf-8`)}catch{Z_.warn(`Could not find pnpm workspace file at ${n}.`);return}let i=jy.parseDocument(r);i.has(`catalog`)||i.set(`catalog`,{});let a=await this.loadTemplateCatalog(e.templateDir),s=e.packageJson.dependencies,c=e.packageJson.devDependencies,l={},u=e=>{if(e)for(let[t,n]of Object.entries(e)){if(n.startsWith(`workspace:`))continue;let r=i.hasIn([`catalog`,t]);if(n===`catalog:`){if(!r){let e=a[t];e&&(l[t]=e)}}else e[t]=`catalog:`,r||(l[t]=n)}};if(u(s),u(c),Object.keys(l).length!==0){for(let[e,t]of Object.entries(l))i.setIn([`catalog`,e],t);await o.writeFile(n,i.toString()),Z_.info(`Added to pnpm-workspace.yaml catalog:`);for(let[e,t]of Object.entries(l))Z_.info(`  + ${e}: ${t}`)}}static async loadTemplateCatalog(e){try{let n=await o.readFile(t.join(e,`pnpm-workspace.yaml`),`utf-8`),r=jy.parseDocument(n).get(`catalog`);return r?r.toJSON():{}}catch{return Z_.warn(`Could not find pnpm-workspace.yaml template in ${e}.`),{}}}static async writeJson(e,t){await o.writeFile(e,`${JSON.stringify(t,null,2)}\n`)}static async pathExists(e){try{return await o.access(e),!0}catch{return!1}}},eS=`1.1.35`;const tS=new dv;tS.name(`startx`).description(`StartX CLI - Your all in one monorepo startup tool.`).version(eS),tS.command(`ping`).action(()=>{Z_.info(`pong`)}),tS.addCommand(Zx.command),tS.addCommand($x.command),tS.parse(process.argv);export{};
+`),Z_.info(`Created package ${r} at ${t.relative(i.workspace,a)}`),Z_.info("Run `pnpm install` to link the new package.")}static async resolveEslintPreference(e){if(e.eslint===!1)return!1;let n=Iy.getDirectory(),r=await this.readRootPackage(n.workspace);return this.hasDependency(r,`eslint`)?e.eslint??!0:e.eslint===!0||await Xx.confirm({message:`ESLint is not installed in this monorepo. Install and enable it?`,default:!0})?(r.devDependencies={...r.devDependencies,eslint:await this.resolveDependencyVersion(n.workspace,`eslint`)},await this.writeJson(t.join(n.workspace,`package.json`),r),Z_.info(`Added eslint to the root devDependencies.`),e.install!==!1&&await this.installRootDependencies(n.workspace),!0):!1}static async getInstallTags(e){let t=new Set([`common`,`node`]),n=await this.readRootPackage(e.workspace);e.eslintEnabled&&t.add(`eslint`),this.hasDependency(n,`@biomejs/biome`)&&t.add(`biome`),this.hasDependency(n,`prettier`)&&t.add(`prettier`),this.hasDependency(n,`vitest`)&&t.add(`vitest`),this.hasDependency(n,`tsdown`)&&t.add(`tsdown`);for(let n of e.packages)n.packageJson?.startx?.tags?.forEach(e=>t.add(e)),n.packageJson?.startx?.iTags?.forEach(e=>t.add(e)),n.packageJson?.startx?.gTags?.forEach(e=>t.add(e)),(n.type===`apps`||n.packageJson?.startx?.mode===`standalone`)&&t.add(`runnable`);return Array.from(t)}static resolvePackageClosure(e){let t=new Map,n=[e.selectedPackage],r=r=>{let i=this.findPackage(e.packages,r);i&&!t.has(i.name)&&n.push(i)};for(e.includeEslintConfig&&r(`eslint-config`);n.length>0;){let e=n.shift();if(!t.has(e.name)){t.set(e.name,e);for(let t of[...e.packageJson?.startx?.requiredDeps??[],...e.packageJson?.startx?.requiredDevDeps??[]])r(t)}}return Array.from(t.values())}static async ensureTemplatePackage(e){let t=this.findPackage(e.packages,e.name);if(!t){Z_.warn(`Could not find template package ${e.name}; skipping.`);return}await this.installTemplatePackage({pkg:t,directory:e.directory,tags:e.tags})}static async installTemplatePackage(e){if(!e.pkg.packageJson)throw Error(`Missing package.json for ${e.pkg.name}`);let n=e.overrideRelativePath??e.pkg.relativePath,r=t.join(e.directory.workspace,n);if(await this.pathExists(t.join(r,`package.json`))&&!await Xx.confirm({message:`"${n}" already exists. Overwrite?`,default:!1})){Z_.info(`Skipping ${e.pkg.name}.`);return}let i=new Set([...e.tags,...e.pkg.packageJson.startx?.tags??[]]),a=e.pkg.packageJson.startx?.ignore??[];a.includes(`eslint-config`)&&i.delete(`eslint`),a.includes(`vitest-config`)&&i.delete(`vitest`);let{packageJson:o,isWorkspace:s}=By.handlePackageJson({app:e.pkg.packageJson,tags:Array.from(i),name:e.overrideName??e.pkg.packageJson.name??e.pkg.name});if(s)throw Error(`Cannot install workspace as a package: ${e.pkg.name}`);await this.syncDepsWithCatalog({workspace:e.directory.workspace,templateDir:e.directory.template,packageJson:o}),await Ny.writeJSONFile({dir:r,file:`package`,content:o}),await this.copyValidatedFilesFromFolder(e.pkg.path,r,i),await Ny.copyDirectory({from:t.join(e.pkg.path,`src`),to:t.join(r,`src`),exclude:i.has(`vitest`)?void 0:/\.test\.tsx?$/}),Z_.info(`Installed ${e.overrideName??e.pkg.name} at ${n}`)}static async copyValidatedFilesFromFolder(e,n,r){let i=await Ny.listFiles({dir:e}).catch(()=>[]);for(let a of i){let i=Py[a];i&&!i.tags.every(e=>r.has(e))||a!==`package.json`&&await Ny.copyFile({from:t.join(e,a),to:t.join(n,a)})}}static createPackageJson(e){let t={typecheck:`tsc --noEmit`,clean:`rimraf dist .turbo`},n={"typescript-config":`workspace:*`},r=[];return e.eslintEnabled?(t.lint=`eslint .`,t[`lint:fix`]=`eslint . --fix`,n[`eslint-config`]=`workspace:*`):r.push(`eslint-config`),e.vitestEnabled?(t.test=`vitest run`,n[`vitest-config`]=`workspace:*`):r.push(`vitest-config`),{name:e.name,version:`1.0.0`,type:`module`,scripts:t,exports:`./src/index.ts`,devDependencies:n,startx:{iTags:[`node`],requiredDevDeps:[`typescript-config`],...r.length>0?{ignore:r}:{}}}}static async checkAndInstallMissingDeps(e){let n=await this.readRootPackage(e.directory.workspace),r=await Iy.parsePnpmWorkspace({dir:e.directory.workspace}),i=[],a=[];for(let[t,o]of Object.entries(Ly))if(o.tags.every(t=>e.tags.includes(t))&&!o.tags.includes(`root`))if(o.version.startsWith(`workspace:`))await this.workspacePackageExists(e.directory.workspace,t)||a.push(t);else{if(this.hasDependency(n,t))continue;let e=r?.catalog?.[t]?`catalog:`:o.version;i.push({name:t,version:e,isDev:o.isDevDependency??!0})}if(a.length>0){Z_.warn(`The following workspace packages are missing from this monorepo:`);for(let e of a)Z_.warn(`  - ${e}  →  run: startx package add ${e}`)}if(i.length!==0){Z_.warn(`The following npm dependencies are required but not installed:`);for(let e of i)Z_.warn(`  - ${e.name}`);if(!await Xx.confirm({message:`Add them to the workspace root package.json?`,default:!0})){Z_.warn(`Skipping. Some features may not work correctly without these dependencies.`);return}n.devDependencies??={},n.dependencies??={};for(let e of i)e.isDev?n.devDependencies[e.name]=e.version:n.dependencies[e.name]=e.version;await this.writeJson(t.join(e.directory.workspace,`package.json`),n),Z_.info(`Added missing dependencies to root package.json.`),e.install!==!1&&await this.installRootDependencies(e.directory.workspace)}}static async workspacePackageExists(e,n){let r=n.startsWith(`@`)?t.join(...n.split(`/`)):n,i=[t.join(e,`configs`,r,`package.json`),t.join(e,`packages`,r,`package.json`),t.join(e,`apps`,r,`package.json`)];for(let e of i)if(await this.pathExists(e))return!0;return!1}static getDestinationPath(e,n){let r=t.dirname(e),i=n.includes(`/`)?n.split(`/`).pop():n;return t.join(r,i)}static getDefaultPackagePath(e){if(e.startsWith(`@`)){let[n,r]=e.split(`/`);return t.join(`packages`,n,r)}return t.join(`packages`,e)}static findPackage(e,t){return e.find(e=>e.name===t||e.packageJson?.name===t)}static hasDependency(e,t){return!!(e.dependencies?.[t]||e.devDependencies?.[t]||e.peerDependencies?.[t])}static async readRootPackage(e){let n=await o.readFile(t.join(e,`package.json`),`utf-8`);return JSON.parse(n)}static async resolveDependencyVersion(e,t){return(await Iy.parsePnpmWorkspace({dir:e}))?.catalog?.[t]?`catalog:`:t===`eslint`?`^9.0.0`:`latest`}static async installRootDependencies(e){let t=(await this.readRootPackage(e)).packageManager?.split(`@`)[0]||`pnpm`,r=t===`yarn`?`yarn`:t,i=[`install`];Z_.info(`Running ${r} ${i.join(` `)} to install ESLint...`),await new Promise((t,a)=>{let o=n(r,i,{cwd:e,stdio:`inherit`,shell:process.platform===`win32`});o.on(`error`,a),o.on(`close`,e=>{if(e===0){t();return}a(Error(`${r} ${i.join(` `)} exited with code ${e}`))})}).catch(t=>{Z_.warn(`Could not install dependencies automatically: ${t instanceof Error?t.message:t}`),Z_.warn(`Run "${r} ${i.join(` `)}" manually in ${e}.`)})}static async syncDepsWithCatalog(e){let n=t.join(e.workspace,`pnpm-workspace.yaml`),r;try{r=await o.readFile(n,`utf-8`)}catch{Z_.warn(`Could not find pnpm workspace file at ${n}.`);return}let i=jy.parseDocument(r);i.has(`catalog`)||i.set(`catalog`,{});let a=await this.loadTemplateCatalog(e.templateDir),s=e.packageJson.dependencies,c=e.packageJson.devDependencies,l={},u=e=>{if(e)for(let[t,n]of Object.entries(e)){if(n.startsWith(`workspace:`))continue;let r=i.hasIn([`catalog`,t]);if(n===`catalog:`){if(!r){let e=a[t];e&&(l[t]=e)}}else e[t]=`catalog:`,r||(l[t]=n)}};if(u(s),u(c),Object.keys(l).length!==0){for(let[e,t]of Object.entries(l))i.setIn([`catalog`,e],t);await o.writeFile(n,i.toString()),Z_.info(`Added to pnpm-workspace.yaml catalog:`);for(let[e,t]of Object.entries(l))Z_.info(`  + ${e}: ${t}`)}}static async loadTemplateCatalog(e){try{let n=await o.readFile(t.join(e,`pnpm-workspace.yaml`),`utf-8`),r=jy.parseDocument(n).get(`catalog`);return r?r.toJSON():{}}catch{return Z_.warn(`Could not find pnpm-workspace.yaml template in ${e}.`),{}}}static async writeJson(e,t){await o.writeFile(e,`${JSON.stringify(t,null,2)}\n`)}static async pathExists(e){try{return await o.access(e),!0}catch{return!1}}},eS=`1.1.52`;const tS=new dv;tS.name(`startx`).description(`StartX CLI - Your all in one monorepo startup tool.`).version(eS),tS.command(`ping`).action(()=>{Z_.info(`pong`)}),tS.addCommand(Zx.command),tS.addCommand($x.command),tS.parse(process.argv);export{};

package/apps/web-client/Dockerfile

@@ -14,8 +14,8 @@ COPY --parents packages/common/package.json ./
 COPY --parents packages/ui/package.json ./
 COPY --parents configs/*/package.json ./
 
-RUN --mount=type=cache,id=pnpm,target=/root/.local/share/pnpm/store \
-    pnpm install --frozen-lockfile
+RUN --mount=type=cache,id=pnpm,target=/root/.local/share/pnpm/store,sharing=locked \
+    pnpm install --frozen-lockfile --ignore-scripts
 
 COPY apps/web-client/ ./apps/web-client/
 COPY packages/common ./packages/common
@@ -24,7 +24,7 @@ COPY configs ./configs
 COPY turbo.json ./
 
 # Build the required packages with Turbo cache mounted
-RUN --mount=type=cache,id=turbo,target=/app/.turbo/cache \
+RUN --mount=type=cache,id=turbo,target=/app/.turbo/cache,sharing=locked \
     pnpm build --filter=web-client
 
 # --- Final production image ---

package/apps/web-client/package.json

@@ -18,10 +18,12 @@
 		"@dotenvx/dotenvx": "catalog:",
 		"@react-router/node": "catalog:",
 		"@react-router/serve": "catalog:",
+		"@hookform/resolvers": "catalog:",
 		"@repo/ui": "workspace:*",
 		"isbot": "catalog:",
 		"react": "catalog:",
 		"react-dom": "catalog:",
+		"motion": "catalog:",
 		"react-router": "catalog:",
 		"zustand": "catalog:",
 		"@repo/common": "workspace:*"

package/apps/web-client/src/components/utils/navigation-loader.tsx

@@ -0,0 +1,106 @@
+import { cn } from "@repo/ui/lib/utils";
+import { motion, useReducedMotion, AnimatePresence } from "motion/react";
+import * as React from "react";
+import { useNavigation } from "react-router";
+
+type LoaderState = "idle" | "loading" | "complete";
+
+export function NavigationLoader({ className }: { className?: string }) {
+	const navigation = useNavigation();
+	const prefersReducedMotion = useReducedMotion();
+	const [loaderState, setLoaderState] = React.useState<LoaderState>("idle");
+
+	const stateRef = React.useRef<LoaderState>(loaderState);
+	stateRef.current = loaderState;
+
+	React.useEffect(() => {
+		let timer: ReturnType<typeof setTimeout>;
+
+		const isNavigating = navigation.state === "loading" || navigation.state === "submitting";
+
+		if (isNavigating) {
+			if (stateRef.current === "idle") {
+				timer = setTimeout(() => {
+					setLoaderState("loading");
+				}, 150);
+			}
+		} else if (navigation.state === "idle") {
+			if (stateRef.current === "loading") {
+				setLoaderState("complete");
+				timer = setTimeout(() => {
+					setLoaderState("idle");
+				}, 500);
+			} else {
+				setLoaderState("idle");
+			}
+		}
+
+		return () => clearTimeout(timer);
+	}, [navigation.state]);
+
+	if (prefersReducedMotion) {
+		return null;
+	}
+
+	const progressVariants = {
+		idle: {
+			scaleX: 0,
+			opacity: 0,
+			transition: { duration: 0 },
+		},
+		loading: {
+			scaleX: 0.85,
+			opacity: 1,
+			transition: {
+				duration: 3.5,
+				ease: [0.08, 0.82, 0.17, 1],
+			},
+		},
+		complete: {
+			scaleX: 1,
+			opacity: 0,
+			transition: {
+				scaleX: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },
+				opacity: { duration: 0.3, delay: 0.1, ease: "linear" },
+			},
+		},
+	} as const;
+
+	return (
+		<AnimatePresence>
+			{loaderState !== "idle" && (
+				<div
+					role="progressbar"
+					aria-hidden={loaderState === "complete"}
+					aria-valuemin={0}
+					aria-valuemax={100}
+					className="pointer-events-none fixed inset-x-0 top-0 z-[9999] h-[3px] w-full bg-transparent"
+				>
+					<motion.div
+						className={cn("relative h-full w-full origin-left bg-primary/50", className)}
+						initial="idle"
+						animate={loaderState}
+						exit="idle"
+						variants={progressVariants}
+						style={{ willChange: "transform, opacity" }}
+					>
+						<motion.div
+							className="absolute inset-0 w-full bg-gradient-to-r from-transparent via-white/50 to-transparent dark:via-white/30"
+							initial={{ x: "-100%" }}
+							animate={{ x: "100%" }}
+							transition={{
+								repeat: Infinity,
+								duration: 1.2,
+								ease: "linear",
+							}}
+						/>
+
+						<div className="absolute right-0 top-0 h-full w-64 bg-gradient-to-r from-transparent to-primary opacity-100" />
+
+						<div className="absolute right-0 top-1/2 h-[5px] w-[15px] -translate-y-1/2 rounded-full bg-primary shadow-[0_0_12px_4px_hsl(var(--primary))]" />
+					</motion.div>
+				</div>
+			)}
+		</AnimatePresence>
+	);
+}

package/apps/web-client/src/components/utils/pagination-footer.tsx

@@ -0,0 +1,205 @@
+import type { IPaginatedData } from "@repo/ui/api/use-api/api-types";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@repo/ui/components/ui/select";
+import { cn } from "@repo/ui/lib/utils";
+import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from "@repo/ui/lucide";
+import { motion, AnimatePresence, useReducedMotion } from "motion/react";
+import React, { forwardRef, useMemo, type ButtonHTMLAttributes } from "react";
+import usePagination from "~/hooks/pagination/usePagination";
+
+export type PaginationVariant = "default" | "compact" | "ghost";
+
+interface PaginationSectionProps<T> {
+	pagination?: IPaginatedData<T>["pagination"];
+	pageKey?: string;
+	limitKey?: string;
+	limit?: number;
+	variant?: PaginationVariant;
+	className?: string;
+}
+
+const emptyPagination: IPaginatedData<unknown>["pagination"] = {
+	total: 0,
+	totalPages: 0,
+	currentPage: 0,
+	pageSize: 0,
+};
+
+const DEFAULT_LIMIT_LIST = [5, 10, 20, 30, 40, 50];
+
+const SPRING_TRANSITION = {
+	type: "spring",
+	stiffness: 500,
+	damping: 30,
+	mass: 1,
+} as const;
+
+interface PaginationNavButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	icon: React.ElementType;
+	label: string;
+	isHiddenOnMobile?: boolean;
+}
+
+const PaginationNavButton = forwardRef<HTMLButtonElement, PaginationNavButtonProps>(
+	({ icon: Icon, label, disabled, isHiddenOnMobile, onClick, ...props }, ref) => {
+		const shouldReduceMotion = useReducedMotion();
+
+		return (
+			<motion.button
+				ref={ref}
+				aria-label={label}
+				aria-disabled={disabled}
+				disabled={disabled}
+				onClick={onClick}
+				whileHover={!disabled && !shouldReduceMotion ? { scale: 1.05 } : undefined}
+				whileTap={!disabled && !shouldReduceMotion ? { scale: 0.95 } : undefined}
+				transition={SPRING_TRANSITION}
+				className={cn(
+					"relative flex h-9 w-9 md:h-8 md:w-8 items-center justify-center rounded-md border border-transparent bg-transparent text-muted-foreground outline-none transition-colors",
+					"focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50",
+					"hover:bg-secondary/80 hover:text-foreground",
+					"disabled:pointer-events-none disabled:opacity-40",
+					isHiddenOnMobile && "hidden sm:flex",
+					props.className
+				)}
+			>
+				<Icon className="h-4 w-4" aria-hidden="true" />
+			</motion.button>
+		);
+	}
+);
+PaginationNavButton.displayName = "PaginationNavButton";
+
+function PaginationFooter<T>({
+	pagination,
+	pageKey,
+	limitKey,
+	limit,
+	variant = "default",
+	className,
+}: PaginationSectionProps<T>) {
+	const prefersReducedMotion = useReducedMotion();
+	const { next, prev, setLimit, setPage } = usePagination({
+		pageKey,
+		limitKey,
+		limit,
+	});
+
+	const data = pagination || emptyPagination;
+
+	const limitList = useMemo(() => {
+		const list = [...DEFAULT_LIMIT_LIST];
+		if (data.pageSize > 0 && !list.includes(data.pageSize)) {
+			list.push(data.pageSize);
+			list.sort((a, b) => a - b);
+		}
+		return list;
+	}, [data.pageSize]);
+
+	if (data.total === 0) return null;
+
+	const isFirstPage = data.currentPage <= 1;
+	const isLastPage = data.currentPage >= data.totalPages;
+
+	return (
+		<nav
+			aria-label="Pagination Navigation"
+			className={cn(
+				"flex w-full flex-col-reverse items-center justify-between gap-4 sm:flex-row",
+				variant === "default" && "rounded-xl border bg-background/50 p-2 shadow-sm backdrop-blur-sm",
+				variant === "compact" && "rounded-lg border border-transparent py-1",
+				variant === "ghost" && "py-2",
+				className
+			)}
+		>
+			<div className="flex w-full items-center justify-between sm:w-auto sm:justify-start gap-4">
+				<div className="flex items-center gap-2">
+					<label
+						htmlFor="rows-per-page-select"
+						className={cn(
+							"whitespace-nowrap font-medium text-muted-foreground",
+							variant === "compact" ? "text-xs" : "text-sm"
+						)}
+					>
+						Rows per page
+					</label>
+					<Select value={`${data.pageSize}`} onValueChange={value => setLimit(parseInt(value, 10))}>
+						<SelectTrigger
+							id="rows-per-page-select"
+							className={cn(
+								"h-8 w-[72px] transition-colors hover:bg-secondary/50 focus-visible:ring-2 focus-visible:ring-ring/50",
+								variant === "compact" && "h-7 text-xs"
+							)}
+						>
+							<SelectValue placeholder={`${data.pageSize}`} />
+						</SelectTrigger>
+						<SelectContent side="top" className="min-w-[72px]">
+							{limitList.map(pageSize => (
+								<SelectItem key={pageSize} value={`${pageSize}`} className="cursor-pointer transition-colors">
+									{pageSize}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+			</div>
+
+			<div className="flex w-full items-center justify-between sm:w-auto gap-4 sm:gap-6">
+				<div
+					className={cn(
+						"flex flex-1 items-center justify-center font-medium tabular-nums text-muted-foreground sm:justify-end",
+						variant === "compact" ? "text-xs" : "text-sm"
+					)}
+					aria-live="polite"
+				>
+					<span className="mr-1">Page</span>
+					<div className="relative flex min-w-[1ch] items-center justify-center overflow-hidden">
+						<AnimatePresence mode="popLayout" initial={false}>
+							<motion.span
+								key={data.currentPage}
+								initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 10, filter: "blur(4px)" }}
+								animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0, filter: "blur(0px)" }}
+								exit={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -10, filter: "blur(4px)" }}
+								transition={SPRING_TRANSITION}
+								className="inline-block text-foreground"
+							>
+								{data.currentPage}
+							</motion.span>
+						</AnimatePresence>
+					</div>
+					<span className="ml-1">of {data.totalPages}</span>
+				</div>
+
+				<div className="flex items-center gap-1 sm:gap-1.5">
+					<PaginationNavButton
+						icon={ChevronFirst}
+						label="Go to first page"
+						onClick={() => setPage(1)}
+						disabled={isFirstPage}
+						isHiddenOnMobile
+					/>
+					<PaginationNavButton
+						icon={ChevronLeft}
+						label="Go to previous page"
+						onClick={() => prev()}
+						disabled={isFirstPage}
+					/>
+					<PaginationNavButton
+						icon={ChevronRight}
+						label="Go to next page"
+						onClick={() => next()}
+						disabled={isLastPage}
+					/>
+					<PaginationNavButton
+						icon={ChevronLast}
+						label="Go to last page"
+						onClick={() => setPage(data.totalPages)}
+						disabled={isLastPage}
+						isHiddenOnMobile
+					/>
+				</div>
+			</div>
+		</nav>
+	);
+}
+
+export default PaginationFooter;

package/apps/web-client/src/hooks/pagination/usePagination.tsx

@@ -0,0 +1,22 @@
+import { useUrlParams } from "../utils/use-url-params";
+
+const usePagination = (options?: { limit?: number; pageKey?: string; limitKey?: string }) => {
+	const pageKey = options?.pageKey ?? "page";
+	const limitKey = options?.limitKey ?? "limit";
+
+	const { params, setParams } = useUrlParams({
+		[pageKey]: 1,
+		[limitKey]: 10,
+	});
+
+	return {
+		limit: params[limitKey],
+		page: params[pageKey],
+		setPage: (page: number) => setParams({ [pageKey]: page }),
+		setLimit: (limit: number) => setParams({ [limitKey]: limit }),
+		next: () => setParams({ [pageKey]: Number(params[pageKey]) + 1 }),
+		prev: () => setParams({ [pageKey]: Number(params[pageKey]) - 1 }),
+	};
+};
+
+export default usePagination;

package/apps/web-client/src/hooks/utils/use-url-params.ts

@@ -0,0 +1,95 @@
+import { useCallback, useEffect } from "react";
+import { useSearchParams } from "react-router";
+
+type StringRecord = Record<string, string | number>;
+
+export type UseUrlParamsReturn<T extends StringRecord> = {
+	params: T;
+	setParam: <K extends keyof T>(key: K, value: T[K]) => void;
+	setParams: (values: Partial<T>) => void;
+};
+
+function getParams<T extends StringRecord>(searchParams: URLSearchParams, defaults: T): T {
+	const result = {} as T;
+
+	for (const key of Object.keys(defaults) as Array<keyof T>) {
+		result[key] = (searchParams.get(key as string) ?? defaults[key]) as T[keyof T];
+	}
+
+	return result;
+}
+
+export function useUrlParams<T extends StringRecord>(defaults: T): UseUrlParamsReturn<T> {
+	const [searchParams, setSearchParams] = useSearchParams();
+
+	const params = getParams(searchParams, defaults);
+
+	// Ensure non-empty defaults exist in URL
+	useEffect(() => {
+		let changed = false;
+		const next = new URLSearchParams(searchParams);
+
+		for (const [key, value] of Object.entries(defaults)) {
+			if (value === "") continue;
+
+			if (!next.has(key)) {
+				if (typeof value === "string") next.set(key, value);
+				else next.set(key, String(value));
+				changed = true;
+			}
+		}
+
+		if (changed) {
+			setSearchParams(next, { replace: true });
+		}
+	}, [searchParams, defaults, setSearchParams]);
+
+	const setParam = useCallback(
+		<K extends keyof T>(key: K, value: T[K]) => {
+			setSearchParams((current) => {
+				const next = new URLSearchParams(current);
+
+				if (value === "") {
+					next.delete(key as string);
+				} else {
+					if (typeof value === "string") next.set(key as string, value);
+					else next.set(key as string, String(value));
+				}
+
+				return next;
+			});
+		},
+		[setSearchParams],
+	);
+
+	const setParams = useCallback(
+		(values: Partial<T>) => {
+			setSearchParams((current) => {
+				const next = new URLSearchParams(current);
+
+				for (const [key, value] of Object.entries(values)) {
+					if (value == null || value === "") {
+						next.delete(key);
+					} else {
+						next.set(key, value as string);
+					}
+				}
+
+				return next;
+			});
+		},
+		[setSearchParams],
+	);
+
+	return {
+		params,
+		setParam,
+		setParams,
+	};
+}
+
+export function useUrlParamsValue<T extends StringRecord>(defaults: T): T {
+	const [searchParams] = useSearchParams();
+
+	return getParams(searchParams, defaults);
+}

package/apps/web-client/src/root.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider } from "@repo/ui/components/custom/theme-provider";
 import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 import type { Route } from "./+types/root";
 import "./app.css";
+import { NavigationLoader } from "./components/utils/navigation-loader";
 import { AuthStartup } from "./config/auth/auth-state";
 import { ENV } from "./config/env";
 
@@ -31,6 +32,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 				<Links />
 			</head>
 			<body>
+				<NavigationLoader />
 				{children}
 				<ScrollRestoration />
 				<Scripts />

package/apps/web-client/tsconfig.json

@@ -10,7 +10,7 @@
 		"jsx": "react-jsx",
 		"rootDirs": [".", "./.react-router/types"],
 		"paths": {
-			"~/*": ["./app/*"]
+			"~/*": ["./src/*"]
 		},
 		"esModuleInterop": true,
 		"verbatimModuleSyntax": true,

package/apps/web-client/vite.config.ts

@@ -24,6 +24,9 @@ export default defineConfig(() => {
 		plugins: [tailwindcss(), reactRouter()],
 		resolve: {
 			tsconfigPaths: true,
+			alias: {
+				"~": path.resolve(__dirname, "./src"),
+			},
 		},
 		define: env,
 	};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "startx",
   "description": "",
-  "version": "1.1.35",
+  "version": "1.1.52",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/avinashid/startx.git"

package/packages/ui/package.json

@@ -37,6 +37,7 @@
 		"class-variance-authority": "catalog:",
 		"clsx": "catalog:",
 		"cmdk": "catalog:",
+		"motion": "^12.40.0",
 		"embla-carousel-react": "catalog:",
 		"input-otp": "catalog:",
 		"lucide-react": "catalog:",

package/packages/ui/src/api/use-api/react-query/use-api.ts

@@ -1,62 +1,26 @@
-import {
-	useQuery,
-	useMutation,
-	useQueryClient,
-	type UseQueryOptions,
-	type UseQueryResult,
-	type UseMutationResult,
-} from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient, type UseQueryOptions, type UseQueryResult, type UseMutationResult } from "@tanstack/react-query";
 import { type AxiosError, type AxiosInstance, type AxiosRequestConfig } from "axios";
 import { useMemo, useRef } from "react";
-import { toast } from "sonner";
 import { z } from "zod";
 import { FormUtils } from "@repo/ui/lib/utils";
+import { toast } from "@repo/ui/sonner";
 import { ApiHelper } from "../api-helpers";
-import type {
-	IFetchOptions,
-	IPaginatedFetchOptions,
-	IFetchMutationOptions,
-	IPaginatedData,
-	QueryEvent,
-	CbAction,
-	RawSchema,
-	QueryKey,
-	ZQuery,
-	ZParams,
-} from "../api-types";
+import type { IFetchOptions, IPaginatedFetchOptions, IFetchMutationOptions, IPaginatedData, QueryEvent, CbAction, RawSchema, QueryKey, ZQuery, ZParams } from "../api-types";
 import { createQueryKeysProxy } from "../query-factory";
 
-import type {
-	UseApiOptions,
-	UseApiReturn,
-	MutationVariables,
-	ExtractData,
-	FetchOptions,
-	PaginatedFetchOptions,
-	MutationOptions,
-} from "./types";
+import type { UseApiOptions, UseApiReturn, MutationVariables, ExtractData, FetchOptions, PaginatedFetchOptions, MutationOptions } from "./types";
 
-async function processEvents<
-	Schema extends RawSchema,
-	IK extends string,
-	IQ extends z.output<ZQuery>,
-	IP extends z.output<ZParams>,
-	IB,
-	ID,
->(
+async function processEvents<Schema extends RawSchema, IK extends string, IQ extends z.output<ZQuery>, IP extends z.output<ZParams>, IB, ID>(
 	events: QueryEvent<IK, IQ, IP, IB, ID, Schema> | undefined,
 	data: ID,
 	variables: { query?: IQ; params?: IP; body?: IB } | undefined,
 	schemaProxy: ReturnType<typeof createQueryKeysProxy<Schema>>,
 	queryClient: ReturnType<typeof useQueryClient>,
-	override?: boolean
+	override?: boolean,
 ) {
 	if (!events) return;
 	const payload = { data, ...variables };
-	const runAction = async (
-		action: CbAction<Schema, IP, IQ, IB, ID, IK, Array<QueryKey<IK>>> | undefined,
-		exec: (key: QueryKey<IK>) => Promise<void>
-	) => {
+	const runAction = async (action: CbAction<Schema, IP, IQ, IB, ID, IK, Array<QueryKey<IK>>> | undefined, exec: (key: QueryKey<IK>) => Promise<void>) => {
 		if (!action) return;
 		const keys: Array<QueryKey<IK>> = typeof action === "function" ? action(payload, schemaProxy) : action;
 		for (const key of keys) {
@@ -64,9 +28,9 @@ async function processEvents<
 		}
 	};
 
-	await runAction(events.invalidateQuery, key => queryClient.invalidateQueries({ queryKey: key }));
-	await runAction(events.refetchQuery, key => queryClient.refetchQueries({ queryKey: key }));
-	await runAction(events.clearQuery, key => queryClient.resetQueries({ queryKey: key }));
+	await runAction(events.invalidateQuery, (key) => queryClient.invalidateQueries({ queryKey: key }));
+	await runAction(events.refetchQuery, (key) => queryClient.refetchQueries({ queryKey: key }));
+	await runAction(events.clearQuery, (key) => queryClient.resetQueries({ queryKey: key }));
 
 	if (!override) {
 		if (typeof events.fn === "function") await events.fn?.(payload, schemaProxy);
@@ -82,7 +46,7 @@ function useFetchApi<ID, ZQ extends ZQuery, ZP extends ZParams>(
 		params?: z.output<ZP>;
 		staleTime?: number;
 		enabled?: boolean;
-	}
+	},
 ): UseQueryResult<ID> & { abort: () => void } {
 	const queryClient = useQueryClient();
 	const queryKey = useMemo(
@@ -91,7 +55,7 @@ function useFetchApi<ID, ZQ extends ZQuery, ZP extends ZParams>(
 				params: options.params,
 				query: options.query,
 			}),
-		[options.query, options.params]
+		[options.query, options.params],
 	);
 	const staleTime = ApiHelper.parseTime(ApiHelper.merge(options.staleTime, endpoint.staleTime));
 
@@ -105,7 +69,6 @@ function useFetchApi<ID, ZQ extends ZQuery, ZP extends ZParams>(
 					params: options.params,
 					searchParams: options.query,
 				}),
-				params: options.query,
 				signal,
 			};
 			const resp = await axiosClient.request<ID>(config);
@@ -127,6 +90,7 @@ function useFetchApi<ID, ZQ extends ZQuery, ZP extends ZParams>(
 		abort: () => queryClient.cancelQueries({ queryKey }),
 	};
 }
+
 function usePaginatedFetchApi<ID, IO, ZQ extends ZQuery, ZP extends ZParams>(
 	key: keyof RawSchema,
 	endpoint: IPaginatedFetchOptions<ID, IO, ZQ, ZP>,
@@ -138,7 +102,7 @@ function usePaginatedFetchApi<ID, IO, ZQ extends ZQuery, ZP extends ZParams>(
 		limit?: number;
 		staleTime?: number;
 		enabled?: boolean;
-	}
+	},
 ): UseQueryResult<IPaginatedData<ID, IO>> & { abort: () => void } {
 	const queryClient = useQueryClient();
 	const mergedQuery = useMemo(
@@ -147,7 +111,7 @@ function usePaginatedFetchApi<ID, IO, ZQ extends ZQuery, ZP extends ZParams>(
 				page: options.page,
 				limit: options.limit,
 			}),
-		[options.query, options.page, options.limit]
+		[options.query, options.page, options.limit],
 	);
 
 	const queryKey = useMemo(
@@ -156,7 +120,7 @@ function usePaginatedFetchApi<ID, IO, ZQ extends ZQuery, ZP extends ZParams>(
 				params: options.params,
 				query: mergedQuery,
 			}),
-		[key, endpoint.key, options.params, mergedQuery]
+		[key, endpoint.key, options.params, mergedQuery],
 	);
 
 	const staleTime = ApiHelper.parseTime(ApiHelper.merge(options.staleTime, endpoint.staleTime));
@@ -199,7 +163,7 @@ function useMutationApi<Schema extends RawSchema, K extends keyof Schema & strin
 	endpoint: IFetchMutationOptions<K>,
 	axiosClient: AxiosInstance,
 	proxy: ReturnType<typeof createQueryKeysProxy<Schema>>,
-	options?: MutationOptions<Schema[K]>
+	options?: MutationOptions<Schema[K]>,
 ): UseMutationResult<ExtractData<Schema[K]>, Error, MutationVariables<Schema[K]>> & { abort: () => void } {
 	const queryClient = useQueryClient();
 	const abortControllerRef = useRef<AbortController | null>(null);
@@ -222,10 +186,9 @@ function useMutationApi<Schema extends RawSchema, K extends keyof Schema & strin
 				url: ApiHelper.buildUrl(
 					ApiHelper.merge(
 						{ route: endpoint.route, params: variables.params, searchParams: variables.query },
-						{ route: endpoint.route, params: options?.params, searchParams: options?.query }
-					)
+						{ route: endpoint.route, params: options?.params, searchParams: options?.query },
+					),
 				),
-				params: ApiHelper.merge(variables.query, options?.query),
 				data: isFormData ? FormUtils.getFormData(body!) : body,
 				...(isFormData && { headers: { "Content-Type": "multipart/form-data" } }),
 				signal: abortControllerRef.current.signal,
@@ -243,20 +206,9 @@ function useMutationApi<Schema extends RawSchema, K extends keyof Schema & strin
 		},
 		onError: async (error: Error, variables) => {
 			options?.onError?.(error, variables);
-			await processEvents(
-				endpoint.onError,
-				error as AxiosError<any>,
-				variables,
-				proxy,
-				queryClient,
-				options?.overwriteEvents
-			);
+			await processEvents(endpoint.onError, error as AxiosError<any>, variables, proxy, queryClient, options?.overwriteEvents);
 			if (!options?.onError && !endpoint.onError) {
-				try {
-					toast.error((error as any)?.response?.data?.message ?? error.message);
-				} catch (error) {
-					console.error(error);
-				}
+				toast.error((error as any)?.response?.data?.message ?? error.message);
 			}
 		},
 		onMutate: options?.onMutate,
@@ -267,6 +219,7 @@ function useMutationApi<Schema extends RawSchema, K extends keyof Schema & strin
 		abort: () => abortControllerRef.current?.abort(),
 	};
 }
+
 export function useApi<Schema extends RawSchema>(schema: Schema, axiosClient: AxiosInstance) {
 	return <K extends keyof Schema & string>(key: K, options?: UseApiOptions<Schema, K>): UseApiReturn<Schema, K> => {
 		const endpoint = schema[key];

package/packages/ui/src/components/custom/form-wrapper.tsx

@@ -103,7 +103,7 @@ export const FormSelectField = <
 							}}
 							value={field.value ?? defaultValueProp ?? ""}
 						>
-							<SelectTrigger className={cn("bg-background w-full", inputClassName)}>
+							<SelectTrigger aria-invalid={!!fieldState.error} className={cn("bg-background w-full", inputClassName)}>
 								<SelectValue placeholder={placeholder ?? "Select"} />
 							</SelectTrigger>
 							<SelectContent>
@@ -155,7 +155,7 @@ export const FormTextField = <
 				<Field data-invalid={!!fieldState.error} className="flex flex-col">
 					{label ? <FieldLabel className="self-start">{label}</FieldLabel> : null}
 					<FieldContent>
-						<Input {...field} {...rest} />
+						<Input aria-invalid={!!fieldState.error} {...field} {...rest} />
 					</FieldContent>
 					{description ? <FieldDescription>{description}</FieldDescription> : null}
 					<FieldError errors={[fieldState.error]} />
@@ -187,7 +187,7 @@ export const FormTextAreaField = <
 				<Field data-invalid={!!fieldState.error} className="flex flex-col">
 					{label ? <FieldLabel className="self-start">{label}</FieldLabel> : null}
 					<FieldContent>
-						<Textarea {...field} {...rest} ref={field.ref} />
+						<Textarea aria-invalid={!!fieldState.error} {...field} {...rest} ref={field.ref} />
 					</FieldContent>
 					{description ? <FieldDescription>{description}</FieldDescription> : null}
 					<FieldError errors={[fieldState.error]} />
@@ -218,6 +218,7 @@ export const FormNumberField = <
 					<FieldContent>
 						<Input
 							inputMode="numeric"
+							aria-invalid={!!fieldState.error}
 							{...field}
 							onChange={e => {
 								if (!isNaN(Number(e.currentTarget.value))) field.onChange(Number(e.currentTarget.value));
@@ -363,6 +364,7 @@ export const FormDefaultDateField = <
 					{label ? <FieldLabel className="self-start">{label}</FieldLabel> : null}
 					<FieldContent>
 						<Input
+							aria-invalid={!!fieldState.error}
 							{...field}
 							{...rest}
 							value={field.value || ""}
@@ -430,7 +432,12 @@ export function FormMultiSelectField<
 						<FieldContent className="w-full">
 							<Popover open={open} onOpenChange={setOpen}>
 								<PopoverTrigger asChild disabled={disabled}>
-									<Button variant="outline" size={"sm"} className={cn("w-full justify-between", inputClassName)}>
+									<Button
+										aria-invalid={!!fieldState.error}
+										variant="outline"
+										size={"sm"}
+										className={cn("w-full justify-between", inputClassName)}
+									>
 										{selected.length > 0 ? `${selected.length} selected` : (placeholder ?? "Select")}
 										<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 									</Button>

package/pnpm-workspace.yaml

@@ -4,6 +4,15 @@ packages:
   - "packages/*/*"
   - "configs/*"
 
+allowBuilds:
+  "@firebase/util": false
+  better-sqlite3: false
+  esbuild: false
+  msgpackr-extract: false
+  protobufjs: false
+  sharp: false
+  unrs-resolver: false
+
 catalog:
   # configs
   typescript: "^5.9.2"
@@ -75,6 +84,7 @@ catalog:
   tailwindcss: "^4.2.2"
   "@tailwindcss/vite": "^4.2.2"
   zustand: "^5.0.13"
+  motion: "^12.40.0"
 
   # email
   react-email: "^5.2.11"
@@ -88,7 +98,7 @@ catalog:
   "@tanstack/react-query-devtools": "^5.100.9"
   "@fontsource-variable/eb-garamond": "^5.2.7"
   "@fontsource-variable/inter": "^5.2.8"
-  "@hookform/resolvers": "^3.9.1"
+  "@hookform/resolvers": "^5.4.0"
   "@phosphor-icons/react": "^2.1.10"
   "@tailwindcss/postcss": "^4"
   "@tailwindcss/typography": "^0.5.19"