create-kuckit-app 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-kuckit-app",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"description": "Create a new Kuckit application",
 	"type": "module",
 	"license": "MIT",

package/templates/base/apps/web/src/components/KuckitModuleRoute.tsx

@@ -3,13 +3,25 @@ import { useKuckit } from '@/providers/KuckitProvider'
 import { useServices } from '@/providers/ServicesProvider'
 import { useEffect, useState } from 'react'
 
+/**
+ * Helper to determine if a route path is a root-level route (outside dashboard).
+ * Root routes start with '/' but NOT '/dashboard'.
+ */
+function isRootLevelRoute(path: string): boolean {
+	return path.startsWith('/') && !path.startsWith('/dashboard')
+}
+
 /**
  * Dynamic route renderer for Kuckit module routes.
  *
  * This component looks up the current path in the RouteRegistry
  * and renders the corresponding module component if found.
  *
- * For routes with meta.requiresAuth: true, redirects to /login if not authenticated.
+ * Route resolution is context-aware:
+ * - When rendered under /dashboard/*: matches dashboard routes
+ * - When rendered at root level: matches root-level routes (paths starting with '/' but not '/dashboard/')
+ *
+ * For root routes with meta.requiresAuth: true, redirects to /login if not authenticated.
  */
 export function KuckitModuleRoute() {
 	const { routeRegistry } = useKuckit()
@@ -21,10 +33,28 @@ export function KuckitModuleRoute() {
 	const [authChecked, setAuthChecked] = useState(false)
 	const [isAuthenticated, setIsAuthenticated] = useState(false)
 
-	// Find matching route in registry
-	const routeDef = routeRegistry.getAll().find((r) => r.path === pathname)
+	// Determine if we're in dashboard context
+	const isDashboardContext = pathname.startsWith('/dashboard')
+
+	// Filter routes based on context
+	const contextRoutes = routeRegistry.getAll().filter((r) => {
+		const isRoot = isRootLevelRoute(r.path)
+		// In dashboard context: show non-root routes
+		// In root context: show root routes
+		return isDashboardContext ? !isRoot : isRoot
+	})
+
+	// For dashboard context, also try matching with /dashboard prefix stripped
+	const modulePathname = isDashboardContext ? pathname.replace('/dashboard', '') || '/' : pathname
 
-	// Check auth for routes with requiresAuth
+	// Find matching route
+	let routeDef = contextRoutes.find((r) => r.path === pathname)
+	if (!routeDef && isDashboardContext) {
+		// For dashboard routes, also try matching stripped path
+		routeDef = contextRoutes.find((r) => r.path === modulePathname)
+	}
+
+	// Check auth for root routes with requiresAuth
 	useEffect(() => {
 		async function checkAuth() {
 			if (!routeDef) {
@@ -32,7 +62,14 @@ export function KuckitModuleRoute() {
 				return
 			}
 
-			// Check if auth is required
+			// Dashboard routes are already protected by the dashboard layout
+			if (isDashboardContext) {
+				setAuthChecked(true)
+				setIsAuthenticated(true)
+				return
+			}
+
+			// For root routes, check if auth is required
 			if (routeDef.meta?.requiresAuth) {
 				const session = await authClient.getSession()
 				if (!session.data) {
@@ -49,10 +86,10 @@ export function KuckitModuleRoute() {
 		}
 
 		checkAuth()
-	}, [routeDef, pathname, navigate, authClient])
+	}, [routeDef, isDashboardContext, pathname, navigate, authClient])
 
-	// Show loading while checking auth for protected routes
-	if (routeDef?.meta?.requiresAuth && !authChecked) {
+	// Show loading while checking auth for protected root routes
+	if (!isDashboardContext && routeDef?.meta?.requiresAuth && !authChecked) {
 		return (
 			<div className="flex items-center justify-center min-h-screen">
 				<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
@@ -60,8 +97,8 @@ export function KuckitModuleRoute() {
 		)
 	}
 
-	// Protected route - waiting for redirect
-	if (routeDef?.meta?.requiresAuth && !isAuthenticated) {
+	// Protected root route - waiting for redirect
+	if (!isDashboardContext && routeDef?.meta?.requiresAuth && !isAuthenticated) {
 		return null
 	}
 

package/templates/base/apps/web/src/components/dashboard/app-sidebar.tsx

@@ -0,0 +1,120 @@
+import { Link, useRouterState } from '@tanstack/react-router'
+import { LayoutDashboard, Settings, Blocks, type LucideIcon } from 'lucide-react'
+import { useKuckitNav } from '@kuckit/sdk-react'
+import {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarRail,
+} from '@/components/ui/sidebar'
+import { NavUser } from './nav-user'
+
+const iconMap: Record<string, LucideIcon> = {
+	'layout-dashboard': LayoutDashboard,
+	settings: Settings,
+	blocks: Blocks,
+}
+
+const coreNavItems = [
+	{ label: 'Dashboard', path: '/dashboard', icon: LayoutDashboard },
+	{ label: 'Settings', path: '/dashboard/settings', icon: Settings },
+]
+
+export function AppSidebar() {
+	const navRegistry = useKuckitNav()
+	const pathname = useRouterState({ select: (s) => s.location.pathname })
+
+	const mainNavModuleItems = navRegistry.getMainNavItems()
+	const moduleItems = navRegistry.getModuleNavItems()
+
+	return (
+		<Sidebar collapsible="icon">
+			<SidebarHeader>
+				<div className="flex items-center gap-2 px-2 py-2">
+					<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary/80">
+						<span className="text-sm font-bold text-primary-foreground">K</span>
+					</div>
+					<span className="font-semibold group-data-[collapsible=icon]:hidden">__APP_TITLE__</span>
+				</div>
+			</SidebarHeader>
+
+			<SidebarContent>
+				<SidebarGroup>
+					<SidebarGroupLabel>Navigation</SidebarGroupLabel>
+					<SidebarGroupContent>
+						<SidebarMenu>
+							{coreNavItems.map((item) => (
+								<SidebarMenuItem key={item.path}>
+									<SidebarMenuButton asChild isActive={pathname === item.path} tooltip={item.label}>
+										<Link to={item.path}>
+											<item.icon className="h-4 w-4" />
+											<span>{item.label}</span>
+										</Link>
+									</SidebarMenuButton>
+								</SidebarMenuItem>
+							))}
+
+							{mainNavModuleItems.map((item) => {
+								const Icon = item.icon ? iconMap[item.icon] : Blocks
+								return (
+									<SidebarMenuItem key={item.id}>
+										<SidebarMenuButton
+											asChild
+											isActive={pathname === item.path || pathname.startsWith(item.path + '/')}
+											tooltip={item.label}
+										>
+											<Link to={item.path}>
+												{Icon && <Icon className="h-4 w-4" />}
+												<span>{item.label}</span>
+											</Link>
+										</SidebarMenuButton>
+									</SidebarMenuItem>
+								)
+							})}
+						</SidebarMenu>
+					</SidebarGroupContent>
+				</SidebarGroup>
+
+				{moduleItems.length > 0 && (
+					<SidebarGroup>
+						<SidebarGroupLabel>Modules</SidebarGroupLabel>
+						<SidebarGroupContent>
+							<SidebarMenu>
+								{moduleItems.map((item) => {
+									const Icon = item.icon ? iconMap[item.icon] : Blocks
+									return (
+										<SidebarMenuItem key={item.id}>
+											<SidebarMenuButton
+												asChild
+												isActive={pathname === item.path || pathname.startsWith(item.path + '/')}
+												tooltip={item.label}
+											>
+												<Link to={item.path}>
+													{Icon && <Icon className="h-4 w-4" />}
+													<span>{item.label}</span>
+												</Link>
+											</SidebarMenuButton>
+										</SidebarMenuItem>
+									)
+								})}
+							</SidebarMenu>
+						</SidebarGroupContent>
+					</SidebarGroup>
+				)}
+			</SidebarContent>
+
+			<SidebarFooter>
+				<NavUser />
+			</SidebarFooter>
+
+			<SidebarRail />
+		</Sidebar>
+	)
+}

package/templates/base/apps/web/src/components/dashboard/dashboard-layout.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react'
+import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
+import { AppSidebar } from './app-sidebar'
+import { Separator } from '@/components/ui/separator'
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbList,
+	BreadcrumbPage,
+} from '@/components/ui/breadcrumb'
+import { useRouterState } from '@tanstack/react-router'
+
+interface DashboardLayoutProps {
+	children: ReactNode
+}
+
+export function DashboardLayout({ children }: DashboardLayoutProps) {
+	const pathname = useRouterState({ select: (s) => s.location.pathname })
+
+	const pathSegments = pathname.split('/').filter(Boolean)
+	const pageTitle =
+		pathSegments.length > 1
+			? pathSegments[pathSegments.length - 1].charAt(0).toUpperCase() +
+				pathSegments[pathSegments.length - 1].slice(1)
+			: 'Dashboard'
+
+	return (
+		<SidebarProvider>
+			<AppSidebar />
+			<SidebarInset>
+				<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+					<SidebarTrigger className="-ml-1" />
+					<Separator orientation="vertical" className="mr-2 h-4" />
+					<Breadcrumb>
+						<BreadcrumbList>
+							<BreadcrumbItem>
+								<BreadcrumbPage>{pageTitle}</BreadcrumbPage>
+							</BreadcrumbItem>
+						</BreadcrumbList>
+					</Breadcrumb>
+				</header>
+				<main className="flex-1 overflow-auto p-4">{children}</main>
+			</SidebarInset>
+		</SidebarProvider>
+	)
+}

package/templates/base/apps/web/src/components/dashboard/dashboard-overview.tsx

@@ -0,0 +1,24 @@
+import { useServices } from '@/providers/ServicesProvider'
+
+export function DashboardOverview() {
+	const { authClient } = useServices()
+	const { data: session } = authClient.useSession()
+
+	return (
+		<div className="space-y-6">
+			<div>
+				<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+				<p className="text-muted-foreground">Welcome back, {session?.user?.name || 'User'}</p>
+			</div>
+
+			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+				<div className="rounded-lg border bg-card p-6">
+					<h3 className="font-semibold">Getting Started</h3>
+					<p className="text-sm text-muted-foreground">
+						Your Kuckit application is ready. Start building!
+					</p>
+				</div>
+			</div>
+		</div>
+	)
+}

package/templates/base/apps/web/src/components/dashboard/index.ts

@@ -0,0 +1,2 @@
+export { DashboardLayout } from './dashboard-layout'
+export { DashboardOverview } from './dashboard-overview'

package/templates/base/apps/web/src/components/dashboard/nav-user.tsx

@@ -0,0 +1,77 @@
+import { ChevronsUpDown, LogOut, User } from 'lucide-react'
+import { useNavigate } from '@tanstack/react-router'
+import { useServices } from '@/providers/ServicesProvider'
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from '@/components/ui/sidebar'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+
+export function NavUser() {
+	const { isMobile } = useSidebar()
+	const navigate = useNavigate()
+	const { authClient } = useServices()
+	const { data: session } = authClient.useSession()
+
+	const user = session?.user
+	const initials =
+		user?.name
+			?.split(' ')
+			.map((n) => n[0])
+			.join('')
+			.toUpperCase() || 'U'
+
+	const handleLogout = async () => {
+		await authClient.signOut()
+		navigate({ to: '/' })
+	}
+
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<SidebarMenuButton size="lg" className="data-[state=open]:bg-sidebar-accent">
+							<Avatar className="h-8 w-8 rounded-lg">
+								<AvatarImage src={user?.image || undefined} alt={user?.name || ''} />
+								<AvatarFallback className="rounded-lg bg-gradient-to-br from-primary to-primary/80 text-primary-foreground">
+									{initials}
+								</AvatarFallback>
+							</Avatar>
+							<div className="grid flex-1 text-left text-sm leading-tight">
+								<span className="truncate font-semibold">{user?.name || 'User'}</span>
+								<span className="truncate text-xs text-muted-foreground">{user?.email || ''}</span>
+							</div>
+							<ChevronsUpDown className="ml-auto size-4" />
+						</SidebarMenuButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent
+						className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+						side={isMobile ? 'bottom' : 'right'}
+						align="end"
+						sideOffset={4}
+					>
+						<DropdownMenuItem onClick={() => navigate({ to: '/dashboard/settings' })}>
+							<User className="mr-2 h-4 w-4" />
+							Settings
+						</DropdownMenuItem>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem onClick={handleLogout}>
+							<LogOut className="mr-2 h-4 w-4" />
+							Log out
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	)
+}

package/templates/base/apps/web/src/components/ui/avatar.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { cn } from '@/lib/utils'
+
+function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+	return (
+		<AvatarPrimitive.Root
+			data-slot="avatar"
+			className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
+			{...props}
+		/>
+	)
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+	return (
+		<AvatarPrimitive.Image
+			data-slot="avatar-image"
+			className={cn('aspect-square size-full', className)}
+			{...props}
+		/>
+	)
+}
+
+function AvatarFallback({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+	return (
+		<AvatarPrimitive.Fallback
+			data-slot="avatar-fallback"
+			className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

package/templates/base/apps/web/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+	return (
+		<ol
+			data-slot="breadcrumb-list"
+			className={cn(
+				'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+	return (
+		<li
+			data-slot="breadcrumb-item"
+			className={cn('inline-flex items-center gap-1.5', className)}
+			{...props}
+		/>
+	)
+}
+
+function BreadcrumbLink({
+	asChild,
+	className,
+	...props
+}: React.ComponentProps<'a'> & {
+	asChild?: boolean
+}) {
+	const Comp = asChild ? Slot : 'a'
+
+	return (
+		<Comp
+			data-slot="breadcrumb-link"
+			className={cn('hover:text-foreground transition-colors', className)}
+			{...props}
+		/>
+	)
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="breadcrumb-page"
+			role="link"
+			aria-disabled="true"
+			aria-current="page"
+			className={cn('text-foreground font-normal', className)}
+			{...props}
+		/>
+	)
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
+	return (
+		<li
+			data-slot="breadcrumb-separator"
+			role="presentation"
+			aria-hidden="true"
+			className={cn('[&>svg]:size-3.5', className)}
+			{...props}
+		>
+			{children ?? <ChevronRight />}
+		</li>
+	)
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="breadcrumb-ellipsis"
+			role="presentation"
+			aria-hidden="true"
+			className={cn('flex size-9 items-center justify-center', className)}
+			{...props}
+		>
+			<MoreHorizontal className="size-4" />
+			<span className="sr-only">More</span>
+		</span>
+	)
+}
+
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+}

package/templates/base/apps/web/src/components/ui/collapsible.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+	return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />
+}
+
+function CollapsibleContent({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+	return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/templates/base/apps/web/src/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@/lib/utils'
+
+function Separator({
+	className,
+	orientation = 'horizontal',
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Separator }