create-croissant 0.1.9 → 0.1.10

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Scaffold a new project using the Croissant Stack",
   "repository": {
     "type": "git",

package/template/apps/web/src/components/app-sidebar.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { Link } from "@tanstack/react-router"
-import { LogOut, User } from "lucide-react"
+import { LogOut, Settings, User } from "lucide-react"
 
 import {
   Sidebar,
@@ -16,7 +16,7 @@ import {
   SidebarRail,
 } from "@workspace/ui/components/sidebar"
 import { Avatar, AvatarFallback, AvatarImage } from "@workspace/ui/components/avatar"
-import { authClient } from "../lib/auth-client"
+import { authClient } from "@/lib/auth-client"
 
 // This is sample data.
 const data = {
@@ -50,7 +50,7 @@ const data = {
 }
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const [user, setUser] = React.useState<any>(null)
+  const [user, setUser] = React.useState<typeof authClient.$Infer.Session.user | null>(null)
 
   React.useEffect(() => {
     const checkSession = async () => {
@@ -95,32 +95,47 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       <SidebarFooter>
         <SidebarMenu>
           <SidebarMenuItem>
-            {user ? (
-              <SidebarMenuButton
-                size="lg"
-                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-              >
-                <Avatar className="h-8 w-8 rounded-lg">
-                  <AvatarImage src={user.image || ""} alt={user.name} />
-                  <AvatarFallback className="rounded-lg">
-                    {user.name?.charAt(0) || "U"}
-                  </AvatarFallback>
-                </Avatar>
-                <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-semibold">{user.name}</span>
-                  <span className="truncate text-xs">{user.email}</span>
-                </div>
-                <button
-                  onClick={async () => {
-                    await authClient.signOut()
-                    window.location.reload()
-                  }}
-                  className="ml-auto"
+              {user ? (
+                <SidebarMenuButton
+                  size="lg"
+                  render={<div />}
+                  className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                 >
-                  <LogOut className="h-4 w-4" />
-                </button>
-              </SidebarMenuButton>
-            ) : (
+                  <div className="flex items-center gap-2 w-full">
+                    <Avatar className="h-8 w-8 rounded-lg">
+                      <AvatarImage src={user.image || ""} alt={user.name} />
+                      <AvatarFallback className="rounded-lg">
+                        {user.name.charAt(0) || "U"}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">{user.name}</span>
+                      <span className="truncate text-xs">{user.email}</span>
+                    </div>
+                    <div className="flex items-center gap-1 ml-auto">
+                      <Link
+                        to="/account"
+                        className="p-1 rounded hover:bg-sidebar-accent-foreground/10"
+                        title="Account Settings"
+                      >
+                        <Settings className="h-4 w-4" />
+                      </Link>
+                      <button
+                        onClick={async (e) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                          await authClient.signOut()
+                          window.location.reload()
+                        }}
+                        className="p-1 rounded hover:bg-sidebar-accent-foreground/10"
+                        title="Sign Out"
+                      >
+                        <LogOut className="h-4 w-4" />
+                      </button>
+                    </div>
+                  </div>
+                </SidebarMenuButton>
+              ) : (
               <SidebarMenuButton
                 render={
                   <Link to="/login" className="flex items-center gap-2" />

package/template/apps/web/src/components/login-form.tsx

@@ -19,7 +19,7 @@ import { useState } from "react"
 import { Link } from "@tanstack/react-router"
 import { useForm } from "@tanstack/react-form"
 import { z } from "zod"
-import { authClient } from "../lib/auth-client"
+import { authClient } from "@/lib/auth-client"
 
 const loginSchema = z.object({
   email: z.string().email("Invalid email address"),

package/template/apps/web/src/components/signup-form.tsx

@@ -18,7 +18,7 @@ import { useState } from "react"
 import { Link } from "@tanstack/react-router"
 import { useForm } from "@tanstack/react-form"
 import { z } from "zod"
-import { authClient } from "../lib/auth-client"
+import { authClient } from "@/lib/auth-client"
 
 const signupSchema = z.object({
   name: z.string().min(1, "Full name is required"),

package/template/apps/web/src/routeTree.gen.ts

@@ -17,6 +17,7 @@ import { Route as IsrRouteImport } from './routes/isr'
 import { Route as DashboardRouteImport } from './routes/dashboard'
 import { Route as ClientOrpcAuthRouteImport } from './routes/client-orpc-auth'
 import { Route as ClientOrpcRouteImport } from './routes/client-orpc'
+import { Route as AccountRouteImport } from './routes/account'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as ApiRpcSplatRouteImport } from './routes/api/rpc.$'
 import { Route as ApiAuthSplatRouteImport } from './routes/api/auth/$'
@@ -61,6 +62,11 @@ const ClientOrpcRoute = ClientOrpcRouteImport.update({
   path: '/client-orpc',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AccountRoute = AccountRouteImport.update({
+  id: '/account',
+  path: '/account',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -79,6 +85,7 @@ const ApiAuthSplatRoute = ApiAuthSplatRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/account': typeof AccountRoute
   '/client-orpc': typeof ClientOrpcRoute
   '/client-orpc-auth': typeof ClientOrpcAuthRoute
   '/dashboard': typeof DashboardRoute
@@ -92,6 +99,7 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/account': typeof AccountRoute
   '/client-orpc': typeof ClientOrpcRoute
   '/client-orpc-auth': typeof ClientOrpcAuthRoute
   '/dashboard': typeof DashboardRoute
@@ -106,6 +114,7 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/account': typeof AccountRoute
   '/client-orpc': typeof ClientOrpcRoute
   '/client-orpc-auth': typeof ClientOrpcAuthRoute
   '/dashboard': typeof DashboardRoute
@@ -121,6 +130,7 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/account'
     | '/client-orpc'
     | '/client-orpc-auth'
     | '/dashboard'
@@ -134,6 +144,7 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/account'
     | '/client-orpc'
     | '/client-orpc-auth'
     | '/dashboard'
@@ -147,6 +158,7 @@ export interface FileRouteTypes {
   id:
     | '__root__'
     | '/'
+    | '/account'
     | '/client-orpc'
     | '/client-orpc-auth'
     | '/dashboard'
@@ -161,6 +173,7 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  AccountRoute: typeof AccountRoute
   ClientOrpcRoute: typeof ClientOrpcRoute
   ClientOrpcAuthRoute: typeof ClientOrpcAuthRoute
   DashboardRoute: typeof DashboardRoute
@@ -231,6 +244,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ClientOrpcRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/account': {
+      id: '/account'
+      path: '/account'
+      fullPath: '/account'
+      preLoaderRoute: typeof AccountRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -257,6 +277,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  AccountRoute: AccountRoute,
   ClientOrpcRoute: ClientOrpcRoute,
   ClientOrpcAuthRoute: ClientOrpcAuthRoute,
   DashboardRoute: DashboardRoute,

package/template/apps/web/src/routes/account.tsx

@@ -0,0 +1,263 @@
+import * as React from "react"
+import { createFileRoute, redirect } from "@tanstack/react-router"
+import { useForm } from "@tanstack/react-form"
+import { z } from "zod"
+import { toast } from "sonner"
+import { Loader2, User } from "lucide-react"
+
+import { Button } from "@workspace/ui/components/button"
+import { Input } from "@workspace/ui/components/input"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@workspace/ui/components/card"
+import { Field, FieldError, FieldLabel } from "@workspace/ui/components/field"
+import { Avatar, AvatarFallback, AvatarImage } from "@workspace/ui/components/avatar"
+import { Separator } from "@workspace/ui/components/separator"
+
+import { authClient } from "@/lib/auth-client"
+import { getSessionFn } from "@/lib/auth-utils"
+
+const profileSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+})
+
+const passwordSchema = z.object({
+  currentPassword: z.string().min(1, "Current password is required"),
+  newPassword: z.string().min(8, "New password must be at least 8 characters long"),
+  confirmPassword: z.string().min(1, "Please confirm your new password"),
+}).refine((data) => data.newPassword === data.confirmPassword, {
+  message: "Passwords do not match",
+  path: ["confirmPassword"],
+})
+
+export const Route = createFileRoute("/account")({
+  beforeLoad: async () => {
+    const session = await getSessionFn()
+    if (!session) {
+      throw redirect({
+        to: "/login",
+        search: {
+          redirect: "/account",
+        },
+      })
+    }
+    return { session }
+  },
+  component: AccountPage,
+})
+
+function AccountPage() {
+  const { session } = Route.useRouteContext()
+  const [loading, setLoading] = React.useState(false)
+  const user = session.user
+
+  const profileForm = useForm({
+    defaultValues: {
+      name: user.name || "",
+    },
+    validators: {
+      onChange: profileSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setLoading(true)
+      const { error } = await authClient.updateUser({
+        name: value.name,
+      })
+
+      if (error) {
+        toast.error(error.message || "Failed to update profile")
+      } else {
+        toast.success("Profile updated successfully")
+      }
+      setLoading(false)
+    },
+  })
+
+  const passwordForm = useForm({
+    defaultValues: {
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: "",
+    },
+    validators: {
+      onChange: passwordSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setLoading(true)
+      const { error } = await authClient.changePassword({
+        currentPassword: value.currentPassword,
+        newPassword: value.newPassword,
+      })
+
+      if (error) {
+        toast.error(error.message || "Failed to change password")
+      } else {
+        toast.success("Password changed successfully")
+        passwordForm.reset()
+      }
+      setLoading(false)
+    },
+  })
+
+  return (
+    <div className="container max-w-4xl py-10">
+      <div className="flex flex-col gap-8">
+        <div>
+          <h1 className="text-3xl font-bold">Account Settings</h1>
+          <p className="text-muted-foreground">Manage your profile and account preferences.</p>
+        </div>
+
+        <Separator />
+
+        <div className="grid gap-8">
+          {/* Profile Section */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Profile</CardTitle>
+              <CardDescription>Update your personal information.</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="flex items-center gap-4">
+                <Avatar className="h-20 w-20">
+                  <AvatarImage src={user.image || ""} />
+                  <AvatarFallback className="text-2xl">
+                    {user.name.charAt(0) || <User className="h-10 w-10" />}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="space-y-1">
+                  <p className="text-sm font-medium leading-none">{user.name}</p>
+                  <p className="text-sm text-muted-foreground">{user.email}</p>
+                </div>
+              </div>
+
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  profileForm.handleSubmit()
+                }}
+                className="space-y-4"
+              >
+                <profileForm.Field
+                  name="name"
+                  children={(field) => (
+                    <Field>
+                      <FieldLabel htmlFor={field.name}>Display Name</FieldLabel>
+                      <Input
+                        id={field.name}
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                      />
+                      <FieldError />
+                    </Field>
+                  )}
+                />
+                <Button type="submit" disabled={loading}>
+                  {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  Update Profile
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+
+          {/* Password Section */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Security</CardTitle>
+              <CardDescription>Change your password to keep your account secure.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  passwordForm.handleSubmit()
+                }}
+                className="space-y-4"
+              >
+                <passwordForm.Field
+                  name="currentPassword"
+                  children={(field) => (
+                    <Field>
+                      <FieldLabel htmlFor={field.name}>Current Password</FieldLabel>
+                      <Input
+                        id={field.name}
+                        type="password"
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                      />
+                      <FieldError />
+                    </Field>
+                  )}
+                />
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <passwordForm.Field
+                    name="newPassword"
+                    children={(field) => (
+                      <Field>
+                        <FieldLabel htmlFor={field.name}>New Password</FieldLabel>
+                        <Input
+                          id={field.name}
+                          type="password"
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                        />
+                        <FieldError />
+                      </Field>
+                    )}
+                  />
+                  <passwordForm.Field
+                    name="confirmPassword"
+                    children={(field) => (
+                      <Field>
+                        <FieldLabel htmlFor={field.name}>Confirm New Password</FieldLabel>
+                        <Input
+                          id={field.name}
+                          type="password"
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                        />
+                        <FieldError />
+                      </Field>
+                    )}
+                  />
+                </div>
+                <Button type="submit" variant="secondary" disabled={loading}>
+                  {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  Change Password
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+
+          {/* Danger Zone */}
+          <Card className="border-destructive/50">
+            <CardHeader>
+              <CardTitle className="text-destructive">Danger Zone</CardTitle>
+              <CardDescription>Permanently delete your account and all data.</CardDescription>
+            </CardHeader>
+            <CardFooter>
+              <Button
+                variant="destructive"
+                onClick={async () => {
+                  if (confirm("Are you sure you want to delete your account? This action cannot be undone.")) {
+                    const { error } = await authClient.deleteUser()
+                    if (error) {
+                      toast.error(error.message || "Failed to delete account")
+                    } else {
+                      window.location.href = "/"
+                    }
+                  }
+                }}
+              >
+                Delete Account
+              </Button>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

package/template/apps/web/src/routes/client-orpc-auth.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute, redirect } from "@tanstack/react-router"
 import { useQuery } from "@tanstack/react-query"
-import { getSessionFn } from "../lib/auth-utils"
-import { orpc } from "../lib/orpc"
+import { getSessionFn } from "@/lib/auth-utils"
+import { orpc } from "@/lib/orpc"
 
 export const Route = createFileRoute("/client-orpc-auth")({
   beforeLoad: async () => {

package/template/apps/web/src/routes/client-orpc.tsx

@@ -14,7 +14,13 @@ import {
   FieldLabel,
 } from "@workspace/ui/components/field"
 
-import { orpc } from "../lib/orpc"
+import type { router } from "@workspace/orpc/router"
+import type { InferRouterInputs, InferRouterOutputs } from "@orpc/server"
+import { orpc } from "@/lib/orpc"
+
+type Inputs = InferRouterInputs<typeof router>
+type Outputs = InferRouterOutputs<typeof router>
+type Planet = Outputs["planets"]["getPlanets"][number]
 
 const planetSchema = z.object({
   name: z.string().min(1, "Name is required"),
@@ -33,7 +39,7 @@ function ClientORPC() {
   
   const { data: planets = [], isLoading } = useQuery({
     queryKey: ["planets"],
-    queryFn: () => orpc.getPlanets(),
+    queryFn: () => orpc.planets.getPlanets(),
   })
 
   const form = useForm({
@@ -74,46 +80,46 @@ function ClientORPC() {
   }
 
   const createMutation = useMutation({
-    mutationFn: (newPlanet: any) => orpc.createPlanet(newPlanet),
+    mutationFn: (input: Inputs["planets"]["createPlanet"]) => orpc.planets.createPlanet(input),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["planets"] })
       resetForm()
       toast.success("Planet added successfully")
     },
-    onError: (err: any) => {
+    onError: (err) => {
       toast.error(err.message || "Failed to add planet")
     },
   })
 
   const updateMutation = useMutation({
-    mutationFn: (updatedPlanet: any) => orpc.updatePlanet(updatedPlanet),
+    mutationFn: (input: Inputs["planets"]["updatePlanet"]) => orpc.planets.updatePlanet(input),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["planets"] })
       resetForm()
       toast.success("Planet updated successfully")
     },
-    onError: (err: any) => {
+    onError: (err) => {
       toast.error(err.message || "Failed to update planet")
     },
   })
 
   const deleteMutation = useMutation({
-    mutationFn: (id: number) => orpc.deletePlanet({ id }),
+    mutationFn: (input: Inputs["planets"]["deletePlanet"]) => orpc.planets.deletePlanet(input),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["planets"] })
       toast.success("Planet deleted successfully")
     },
-    onError: (err: any) => {
+    onError: (err) => {
       toast.error(err.message || "Failed to delete planet")
     },
   })
 
   const handleDelete = async (id: number) => {
     if (!confirm("Are you sure you want to delete this planet?")) return
-    await deleteMutation.mutateAsync(id)
+    await deleteMutation.mutateAsync({ id })
   }
 
-  const startEdit = (planet: any) => {
+  const startEdit = (planet: Planet) => {
     setEditingId(planet.id)
     form.setFieldValue("name", planet.name)
     form.setFieldValue("description", planet.description || "")

package/template/apps/web/src/routes/dashboard.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute, redirect } from "@tanstack/react-router"
-import { getSessionFn } from "../lib/auth-utils"
-import { authClient } from "../lib/auth-client"
-import { orpc } from "../lib/orpc"
+import { getSessionFn } from "@/lib/auth-utils"
+import { authClient } from "@/lib/auth-client"
+import { orpc } from "@/lib/orpc"
 
 export const Route = createFileRoute("/dashboard")({
   beforeLoad: async () => {

package/template/apps/web/src/routes/index.tsx

@@ -1,12 +1,17 @@
 import { Link, createFileRoute } from "@tanstack/react-router"
 import { Button } from "@workspace/ui/components/button"
-import { orpc } from "../lib/orpc"
+import type { router } from "@workspace/orpc/router"
+import type { InferRouterOutputs } from "@orpc/server"
+import { orpc } from "@/lib/orpc"
+
+type Outputs = InferRouterOutputs<typeof router>
+type Planet = Outputs["planets"]["getPlanets"][number]
 
 export const Route = createFileRoute("/")({
   loader: async () => {
     const [helloRes, planets] = await Promise.all([
       orpc.hello({ name: "TanStack Start" }),
-      orpc.getPlanets(),
+      orpc.planets.getPlanets(),
     ])
     return { 
       message: helloRes.message,
@@ -32,7 +37,7 @@ function App() {
               <p className="text-gray-500 italic">No planets found in the database. Run `db:push` and seed data if needed.</p>
             ) : (
               <ul className="grid grid-cols-1 gap-2">
-                {planets.map((planet) => (
+                {planets.map((planet: Planet) => (
                   <li key={planet.id} className="rounded-md border p-3 bg-white shadow-sm">
                     <span className="font-bold">{planet.name}</span> - {planet.description}
                   </li>

package/template/apps/web/src/routes/isr.tsx

@@ -1,11 +1,11 @@
 import { createFileRoute } from "@tanstack/react-router"
-import { orpc } from "../lib/orpc"
+import { orpc } from "@/lib/orpc"
 
 export const Route = createFileRoute("/isr")({
   loader: async () => {
     // In a real ISR scenario, this would be cached on the server
     // For this example, we'll fetch planets via oRPC
-    const planets = await orpc.getPlanets()
+    const planets = await orpc.planets.getPlanets()
     
     return {
       generatedAt: new Date().toISOString(),

package/template/apps/web/src/routes/login.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router"
-import { LoginForm } from "../components/login-form"
+import { LoginForm } from "@/components/login-form"
 
 export const Route = createFileRoute("/login")({
   component: Login,

package/template/apps/web/src/routes/signup.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router"
-import { SignupForm } from "../components/signup-form"
+import { SignupForm } from "@/components/signup-form"
 
 export const Route = createFileRoute("/signup")({
   component: Signup,

package/template/apps/web/src/routes/ssr-orpc-auth.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, redirect } from "@tanstack/react-router"
-import { getSessionFn } from "../lib/auth-utils"
-import { orpc } from "../lib/orpc"
+import { getSessionFn } from "@/lib/auth-utils"
+import { orpc } from "@/lib/orpc"
 
 export const Route = createFileRoute("/ssr-orpc-auth")({
   beforeLoad: async () => {

package/template/apps/web/src/routes/ssr-orpc.tsx

@@ -13,7 +13,12 @@ import {
   FieldLabel,
 } from "@workspace/ui/components/field"
 
-import { orpc } from "../lib/orpc"
+import type { router } from "@workspace/orpc/router"
+import type { InferRouterOutputs } from "@orpc/server"
+import { orpc } from "@/lib/orpc"
+
+type Outputs = InferRouterOutputs<typeof router>
+type Planet = Outputs["planets"]["getPlanets"][number]
 
 const planetSchema = z.object({
   name: z.string().min(1, "Name is required"),
@@ -24,7 +29,7 @@ const planetSchema = z.object({
 
 export const Route = createFileRoute("/ssr-orpc")({
   loader: async () => {
-    const planets = await orpc.getPlanets()
+    const planets = await orpc.planets.getPlanets()
     return { planets }
   },
   component: SSRORPC,
@@ -49,7 +54,7 @@ function SSRORPC() {
       const toastId = toast.loading(editingId ? "Updating planet..." : "Adding planet...")
       try {
         if (editingId) {
-          await orpc.updatePlanet({
+          await orpc.planets.updatePlanet({
             id: editingId,
             name: value.name,
             description: value.description,
@@ -59,7 +64,7 @@ function SSRORPC() {
           })
           toast.success("Planet updated successfully", { id: toastId })
         } else {
-          await orpc.createPlanet({
+          await orpc.planets.createPlanet({
             name: value.name,
             description: value.description,
             distanceFromSun: parseFloat(value.distance),
@@ -86,7 +91,7 @@ function SSRORPC() {
     if (!confirm("Are you sure you want to delete this planet?")) return
     const toastId = toast.loading("Deleting planet...")
     try {
-      await orpc.deletePlanet({ id })
+      await orpc.planets.deletePlanet({ id })
       await router.invalidate()
       toast.success("Planet deleted successfully", { id: toastId })
     } catch (err: any) {
@@ -95,7 +100,7 @@ function SSRORPC() {
     }
   }
 
-  const startEdit = (planet: any) => {
+  const startEdit = (planet: Planet) => {
     setEditingId(planet.id)
     form.setFieldValue("name", planet.name)
     form.setFieldValue("description", planet.description || "")

package/template/packages/orpc/src/lib/planets.ts

@@ -0,0 +1,79 @@
+import { ORPCError, os } from '@orpc/server'
+import { db, schema } from '@workspace/db'
+import { eq } from 'drizzle-orm'
+import { z } from 'zod'
+import type { RPCContext } from './router'
+
+const { planets } = schema
+
+const o = os.$context<RPCContext>()
+
+export const planetRouter = o.router({
+  getPlanets: o
+    .handler(async () => {
+      const allPlanets = await db.select().from(planets)
+      return allPlanets
+    }),
+
+  createPlanet: o
+    .input(
+      z.object({
+        name: z.string().min(1),
+        description: z.string().optional(),
+        distanceFromSun: z.number(),
+        diameter: z.number(),
+        hasRings: z.boolean().default(false),
+        atmosphere: z.string().optional(),
+      }),
+    )
+    .handler(async ({ input }) => {
+      const [newPlanet] = await db.insert(planets).values(input).returning()
+      return newPlanet
+    }),
+
+  updatePlanet: o
+    .input(
+      z.object({
+        id: z.number(),
+        name: z.string().min(1),
+        description: z.string().optional(),
+        distanceFromSun: z.number(),
+        diameter: z.number(),
+        hasRings: z.boolean(),
+        atmosphere: z.string().optional(),
+      }),
+    )
+    .handler(async ({ input }) => {
+      const { id, ...data } = input
+      const results = await db
+        .update(planets)
+        .set({ ...data, updatedAt: new Date() })
+        .where(eq(planets.id, id))
+        .returning()
+      
+      if (results.length === 0) {
+        throw new ORPCError('NOT_FOUND')
+      }
+      
+      return results[0]
+    }),
+
+  deletePlanet: o
+    .input(
+      z.object({
+        id: z.number(),
+      }),
+    )
+    .handler(async ({ input }) => {
+      const results = await db
+        .delete(planets)
+        .where(eq(planets.id, input.id))
+        .returning()
+      
+      if (results.length === 0) {
+        throw new ORPCError('NOT_FOUND')
+      }
+      
+      return results[0]
+    }),
+})

package/template/packages/orpc/src/lib/router.ts

@@ -1,18 +1,17 @@
 import { ORPCError, os } from '@orpc/server'
-import { db, schema } from '@workspace/db'
-import { eq } from 'drizzle-orm'
 import { z } from 'zod'
+import { planetRouter } from './planets'
 import type { Session } from '@workspace/auth/lib/auth'
 
 export type RPCContext = {
   session: Session | null
 }
 
-const { planets } = schema
-
 const o = os.$context<RPCContext>()
 
 export const router = o.router({
+  planets: planetRouter,
+
   hello: o
     .input(
       z.object({
@@ -25,12 +24,6 @@ export const router = o.router({
       }
     }),
 
-  getPlanets: o
-    .handler(async () => {
-      const allPlanets = await db.select().from(planets)
-      return allPlanets
-    }),
-
   getSecretData: o
     .use(async ({ context, next }) => {
       if (!context.session) {
@@ -48,68 +41,6 @@ export const router = o.router({
         email: context.session.user.email,
       }
     }),
-
-  createPlanet: o
-    .input(
-      z.object({
-        name: z.string().min(1),
-        description: z.string().optional(),
-        distanceFromSun: z.number(),
-        diameter: z.number(),
-        hasRings: z.boolean().default(false),
-        atmosphere: z.string().optional(),
-      }),
-    )
-    .handler(async ({ input }) => {
-      const [newPlanet] = await db.insert(planets).values(input).returning()
-      return newPlanet
-    }),
-
-  updatePlanet: o
-    .input(
-      z.object({
-        id: z.number(),
-        name: z.string().min(1),
-        description: z.string().optional(),
-        distanceFromSun: z.number(),
-        diameter: z.number(),
-        hasRings: z.boolean(),
-        atmosphere: z.string().optional(),
-      }),
-    )
-    .handler(async ({ input }) => {
-      const { id, ...data } = input
-      const results = await db
-        .update(planets)
-        .set({ ...data, updatedAt: new Date() })
-        .where(eq(planets.id, id))
-        .returning()
-      
-      if (results.length === 0) {
-        throw new ORPCError('NOT_FOUND')
-      }
-      
-      return results[0]
-    }),
-
-  deletePlanet: o
-    .input(
-      z.object({
-        id: z.number(),
-      }),
-    )
-    .handler(async ({ input }) => {
-      const results = await db
-        .delete(planets)
-        .where(eq(planets.id, input.id))
-        .returning()
-      
-      if (results.length === 0) {
-        throw new ORPCError('NOT_FOUND')
-      }
-      
-      return results[0]
-    }),
 })
 
 export type AppRouter = typeof router