nexstruct 1.0.0

package/templates/api/trpc/src/providers/trpc.provider.tsx

@@ -0,0 +1,24 @@
+'use client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { useState } from 'react';
+import { trpc } from '@/api/trpc/client.api';
+
+export function TrpcProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient());
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        httpBatchLink({
+          url: '/api/trpc',
+        }),
+      ],
+    })
+  );
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </trpc.Provider>
+  );
+}

package/templates/auth/clerk/src/auth/clerk/auth.service.ts

@@ -0,0 +1,4 @@
+export const clerkAuth = {
+  publishableKey: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY || '',
+  secretKey: process.env.CLERK_SECRET_KEY,
+};

package/templates/auth/clerk/src/hooks/use-auth.hook.ts

@@ -0,0 +1,13 @@
+import { useUser, useAuth as useClerkAuth } from '@clerk/nextjs';
+
+export function useAuth() {
+  const { user, isLoaded } = useUser();
+  const { signOut } = useClerkAuth();
+
+  return {
+    user: user ?? null,
+    isAuthenticated: !!user,
+    isLoading: !isLoaded,
+    logout: () => signOut(),
+  };
+}

package/templates/auth/clerk/src/middleware.ts

@@ -0,0 +1,7 @@
+import { clerkMiddleware } from '@clerk/nextjs/server';
+
+export default clerkMiddleware();
+
+export const config = {
+  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};

package/templates/auth/clerk/src/providers/auth.provider.tsx

@@ -0,0 +1,6 @@
+'use client';
+import { ClerkProvider } from '@clerk/nextjs';
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  return <ClerkProvider>{children}</ClerkProvider>;
+}

package/templates/auth/next-auth/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,5 @@
+import NextAuth from 'next-auth';
+import { authOptions } from '@/auth/next-auth/auth.service';
+
+const handler = NextAuth(authOptions);
+export { handler as GET, handler as POST };

package/templates/auth/next-auth/src/auth/next-auth/auth.service.ts

@@ -0,0 +1,45 @@
+import type { NextAuthOptions } from 'next-auth';
+import CredentialsProvider from 'next-auth/providers/credentials';
+import GithubProvider from 'next-auth/providers/github';
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    GithubProvider({
+      clientId: process.env.GITHUB_ID || '',
+      clientSecret: process.env.GITHUB_SECRET || '',
+    }),
+    CredentialsProvider({
+      name: 'Credentials',
+      credentials: {
+        email: { label: 'Email', type: 'email' },
+        password: { label: 'Password', type: 'password' },
+      },
+      async authorize(credentials) {
+        if (!credentials?.email || !credentials?.password) return null;
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/login`, {
+          method: 'POST',
+          body: JSON.stringify(credentials),
+          headers: { 'Content-Type': 'application/json' },
+        });
+        const user = await res.json();
+        if (res.ok && user) return user;
+        return null;
+      },
+    }),
+  ],
+  pages: {
+    signIn: '/auth/login',
+    error: '/auth/error',
+  },
+  session: { strategy: 'jwt' },
+  callbacks: {
+    async jwt({ token, user }) {
+      if (user) token.id = user.id;
+      return token;
+    },
+    async session({ session, token }) {
+      if (session.user) session.user.id = token.id as string;
+      return session;
+    },
+  },
+};

package/templates/auth/next-auth/src/hooks/use-session.hook.ts

@@ -0,0 +1,13 @@
+import { useSession, signIn, signOut } from 'next-auth/react';
+
+export function useAuthSession() {
+  const { data: session, status } = useSession();
+
+  return {
+    user: session?.user ?? null,
+    isAuthenticated: !!session,
+    isLoading: status === 'loading',
+    login: signIn,
+    logout: () => signOut(),
+  };
+}

package/templates/auth/next-auth/src/providers/session.provider.tsx

@@ -0,0 +1,6 @@
+'use client';
+import { SessionProvider } from 'next-auth/react';
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  return <SessionProvider>{children}</SessionProvider>;
+}

package/templates/forms/formik/src/components/forms/login-form.component.tsx

@@ -0,0 +1,30 @@
+'use client';
+import { useFormik } from 'formik';
+import { loginSchema, type LoginFormData } from '@/forms/formik/schemas/example.schema';
+
+export function LoginForm({ onSubmit }: { onSubmit: (values: LoginFormData) => Promise<void> }) {
+  const formik = useFormik({
+    initialValues: { email: '', password: '' },
+    validationSchema: loginSchema,
+    onSubmit: async (values, { setSubmitting }) => {
+      await onSubmit(values);
+      setSubmitting(false);
+    },
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit} className="space-y-4">
+      <div>
+        <input {...formik.getFieldProps('email')} placeholder="Email" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2" />
+        {formik.touched.email && formik.errors.email && <p className="text-sm text-destructive">{formik.errors.email}</p>}
+      </div>
+      <div>
+        <input {...formik.getFieldProps('password')} type="password" placeholder="Password" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2" />
+        {formik.touched.password && formik.errors.password && <p className="text-sm text-destructive">{formik.errors.password}</p>}
+      </div>
+      <button type="submit" disabled={formik.isSubmitting} className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground">
+        {formik.isSubmitting ? 'Loading...' : 'Login'}
+      </button>
+    </form>
+  );
+}

package/templates/forms/formik/src/forms/formik/hooks/use-form-config.hook.ts

@@ -0,0 +1,7 @@
+import { useFormik, type FormikConfig, type FormikValues } from 'formik';
+
+export function useFormikForm<T extends FormikValues>(
+  config: FormikConfig<T>
+) {
+  return useFormik<T>(config);
+}

package/templates/forms/formik/src/forms/formik/schemas/example.schema.ts

@@ -0,0 +1,8 @@
+import * as yup from 'yup';
+
+export const loginSchema = yup.object({
+  email: yup.string().email('Invalid email').required('Email is required'),
+  password: yup.string().min(6, 'Minimum 6 characters').required('Password is required'),
+});
+
+export type LoginFormData = yup.InferType<typeof loginSchema>;

package/templates/forms/react-hook-form/src/components/forms/login-form.component.tsx

@@ -0,0 +1,27 @@
+'use client';
+import { useZodForm } from '@/forms/react-hook-form/hooks/use-form.hook';
+import { loginSchema, type LoginFormData } from '@/forms/react-hook-form/schemas/example.schema';
+
+interface LoginFormProps {
+  onSubmit: (data: LoginFormData) => Promise<void>;
+}
+
+export function LoginForm({ onSubmit }: LoginFormProps) {
+  const { register, handleSubmit, formState: { errors, isSubmitting } } = useZodForm(loginSchema);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div>
+        <input {...register('email')} placeholder="Email" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2" />
+        {errors.email && <p className="text-sm text-destructive">{errors.email.message}</p>}
+      </div>
+      <div>
+        <input {...register('password')} type="password" placeholder="Password" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2" />
+        {errors.password && <p className="text-sm text-destructive">{errors.password.message}</p>}
+      </div>
+      <button type="submit" disabled={isSubmitting} className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground">
+        {isSubmitting ? 'Loading...' : 'Login'}
+      </button>
+    </form>
+  );
+}

package/templates/forms/react-hook-form/src/forms/react-hook-form/hooks/use-form.hook.ts

@@ -0,0 +1,13 @@
+import { useForm, type UseFormProps } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z, type ZodSchema } from 'zod';
+
+export function useZodForm<T extends ZodSchema>(
+  schema: T,
+  options?: Omit<UseFormProps<z.infer<T>>, 'resolver'>
+) {
+  return useForm<z.infer<T>>({
+    resolver: zodResolver(schema),
+    ...options,
+  });
+}

package/templates/forms/react-hook-form/src/forms/react-hook-form/schemas/example.schema.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod';
+
+export const loginSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+});
+
+export const signupSchema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+});
+
+export type LoginFormData = z.infer<typeof loginSchema>;
+export type SignupFormData = z.infer<typeof signupSchema>;

package/templates/nextjs-base/next.config.ts

@@ -0,0 +1,5 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;

package/templates/nextjs-base/postcss.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

package/templates/nextjs-base/src/app/_components/navbar.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+import { ThemeToggle } from '@/components/common/theme-toggle.component';
+
+const links = [
+  { href: '/lab', label: 'Component Lab' },
+  { href: '/test/form', label: 'Form Test' },
+  { href: '/test/dialog', label: 'Dialog Test' },
+  { href: '/test/table', label: 'Table Test' },
+];
+
+export default function NavBar() {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="max-w-6xl mx-auto flex h-14 items-center px-6">
+        <Link href="/" className="font-bold text-foreground shrink-0 tracking-tight">
+          Nex<span className="text-primary">struct</span>
+        </Link>
+
+        <nav className="hidden md:flex items-center gap-1 ml-8">
+          {links.map((link) => {
+            const active = pathname === link.href || pathname.startsWith(link.href + '/');
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                  active
+                    ? 'bg-primary/10 text-primary'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                }`}
+              >
+                {link.label}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="ml-auto flex items-center gap-1">
+          <ThemeToggle />
+          <button
+            onClick={() => setOpen(!open)}
+            className="md:hidden p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent"
+            aria-label="Toggle menu"
+          >
+            {open ? (
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+              </svg>
+            ) : (
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+              </svg>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {open && (
+        <nav className="md:hidden border-t px-6 py-3 space-y-1 bg-background">
+          {links.map((link) => {
+            const active = pathname === link.href || pathname.startsWith(link.href + '/');
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                onClick={() => setOpen(false)}
+                className={`block px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                  active
+                    ? 'bg-primary/10 text-primary'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                }`}
+              >
+                {link.label}
+              </Link>
+            );
+          })}
+        </nav>
+      )}
+    </header>
+  );
+}

package/templates/nextjs-base/src/app/_components/sidebar.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState, useCallback, type ReactNode } from 'react';
+import { ThemeToggle } from '@/components/common/theme-toggle.component';
+
+type NavItem = {
+  label: string;
+  href?: string;
+  icon: React.ReactNode;
+  children?: { label: string; href: string }[];
+};
+
+const navItems: NavItem[] = [
+  {
+    label: 'Component Lab',
+    href: '/lab',
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
+      </svg>
+    ),
+    children: [
+      { label: 'All Components', href: '/lab' },
+      { label: 'Form Fields', href: '/lab?category=field' },
+      { label: 'Common', href: '/lab?category=common' },
+    ],
+  },
+  {
+    label: 'Form Test',
+    href: '/test/form',
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
+      </svg>
+    ),
+  },
+  {
+    label: 'Dialog Test',
+    href: '/test/dialog',
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+      </svg>
+    ),
+  },
+  {
+    label: 'Table Test',
+    href: '/test/table',
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15a2.25 2.25 0 0 1 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
+      </svg>
+    ),
+  },
+];
+
+export default function Sidebar({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+  const [hovered, setHovered] = useState(false);
+  const [pinned, setPinned] = useState(false);
+  const [openMenus, setOpenMenus] = useState<Set<string>>(new Set());
+
+  const expanded = hovered || pinned;
+
+  const toggleMenu = useCallback((label: string) => {
+    setOpenMenus((prev) => {
+      const next = new Set(prev);
+      if (next.has(label)) next.delete(label);
+      else next.add(label);
+      return next;
+    });
+  }, []);
+
+  const isActive = (href?: string) => href && (pathname === href || pathname.startsWith(href + '/'));
+
+  return (
+    <div className="flex min-h-screen">
+      <nav
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => { if (!pinned) setHovered(false); }}
+        className="fixed left-0 top-0 z-40 flex flex-col h-full bg-card border-r border-border overflow-hidden scrollbar-none transition-[width] duration-300 ease-in-out"
+        style={{ width: expanded ? '260px' : '60px' }}
+      >
+        {/* Brand */}
+        <div className="flex items-center h-14 px-4 border-b border-border shrink-0">
+          <Link href="/" className="flex items-center gap-3 min-w-0 group">
+            <div className="h-9 w-9 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shrink-0 shadow-sm group-hover:shadow-md transition-shadow relative overflow-hidden">
+              <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.2),transparent_70%)]" />
+              <svg className="h-5 w-5 text-white relative" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.087 4.113" />
+              </svg>
+            </div>
+            <span
+              className="font-bold text-foreground text-sm whitespace-nowrap transition-opacity duration-300"
+              style={{ opacity: expanded ? 1 : 0 }}
+            >
+              Nex<span className="text-primary">struct</span>
+            </span>
+          </Link>
+        </div>
+
+        {/* Nav items */}
+        <div className="flex-1 py-3 px-2 space-y-0.5 overflow-y-auto scrollbar-none">
+          {navItems.map((item) => {
+            const active = isActive(item.href);
+            const hasChildren = item.children && item.children.length > 0;
+            const menuOpen = openMenus.has(item.label);
+
+            return (
+              <div key={item.label}>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    if (hasChildren && expanded) {
+                      toggleMenu(item.label);
+                    } else if (item.href) {
+                      window.location.href = item.href;
+                    }
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      if (hasChildren && expanded) toggleMenu(item.label);
+                      else if (item.href) window.location.href = item.href;
+                    }
+                  }}
+                  className={`flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors whitespace-nowrap ${
+                    active
+                      ? 'bg-primary/10 text-primary'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                  }`}
+                >
+                  <span className="shrink-0">{item.icon}</span>
+                  <span
+                    className="text-sm font-medium transition-opacity duration-300"
+                    style={{ opacity: expanded ? 1 : 0 }}
+                  >
+                    {item.label}
+                  </span>
+                  {hasChildren && expanded && (
+                    <svg
+                      className={`h-4 w-4 ml-auto transition-transform duration-200 ${menuOpen ? 'rotate-90' : ''}`}
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      strokeWidth={2}
+                      stroke="currentColor"
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                    </svg>
+                  )}
+                </div>
+
+                {/* Nested sub-menu */}
+                {hasChildren && expanded && (
+                  <div
+                    className="overflow-hidden scrollbar-none transition-all duration-250 ease-in-out"
+                    style={{
+                      maxHeight: menuOpen ? `${(item.children?.length || 0) * 44}px` : '0',
+                      opacity: menuOpen ? 1 : 0,
+                    }}
+                  >
+                    {item.children?.map((child) => {
+                      const childActive = pathname === child.href;
+                      return (
+                        <Link
+                          key={child.href}
+                          href={child.href}
+                          onClick={() => setHovered(false)}
+                          className={`flex items-center gap-3 ml-9 px-3 py-2 rounded-md text-sm transition-colors ${
+                            childActive
+                              ? 'text-primary font-medium'
+                              : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                          }`}
+                        >
+                          <span className="h-1 w-1 rounded-full bg-current shrink-0" />
+                          {child.label}
+                        </Link>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Toggle pin + Theme */}
+        <div className="border-t border-border px-2 py-2 shrink-0 space-y-1">
+          <button
+            onClick={() => { setPinned((p) => !p); }}
+            className={`flex items-center gap-3 w-full px-3 py-2.5 rounded-lg transition-colors ${
+              pinned ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+            }`}
+          >
+            <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
+            </svg>
+            <span
+              className="text-sm font-medium whitespace-nowrap transition-opacity duration-300"
+              style={{ opacity: expanded ? 1 : 0 }}
+            >
+              {pinned ? 'Unpin sidebar' : 'Pin sidebar'}
+            </span>
+          </button>
+
+        </div>
+      </nav>
+
+      {/* Main content */}
+      <main
+        className="flex-1 transition-[padding] duration-300 ease-in-out relative"
+        style={{ paddingLeft: expanded ? '260px' : '60px' }}
+      >
+        <div className="fixed top-3 right-4 z-50">
+          <ThemeToggle />
+        </div>
+        {children}
+      </main>
+    </div>
+  );
+}

package/templates/nextjs-base/src/app/error.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-background px-4">
+      <div className="flex h-20 w-20 items-center justify-center rounded-full bg-destructive/10 mb-6">
+        <svg
+          className="h-10 w-10 text-destructive"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+          />
+        </svg>
+      </div>
+      <h1 className="text-2xl font-semibold text-foreground mb-2">Something went wrong</h1>
+      <p className="text-sm text-muted-foreground text-center max-w-md mb-6">
+        {error.message || 'An unexpected error occurred. Please try again.'}
+      </p>
+      <button
+        onClick={reset}
+        className="inline-flex items-center justify-center rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 transition-colors"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}