create-varity-app 2.0.0-beta.1 → 2.0.0-beta.11

package/README.md

@@ -3,7 +3,7 @@
 [![npm](https://img.shields.io/npm/v/create-varity-app)](https://www.npmjs.com/package/create-varity-app)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/varity-labs/varity-sdk/blob/main/LICENSE)
 
-Create production-ready apps with auth, database, and payments built in.
+Create production-ready apps with auth and database built in. Payments coming soon.
 
 ## Quick Start
 
@@ -23,12 +23,12 @@ yarn create varity-app my-app
 ## What You Get
 
 - **Next.js 15** app with TypeScript and Tailwind CSS
-- **Authentication** — email, social login, and more (zero config)
-- **Database** — ready-to-use collections with typed queries
-- **Dashboard** — professional layout with sidebar navigation
-- **Landing page** — hero, features, pricing, testimonials
-- **Settings** — profile, preferences, security, billing sections
-- **6 pages** — dashboard, projects, tasks, team, settings, login
+- **Authentication** -- email, social login, and more (zero config)
+- **Database** -- ready-to-use collections with typed queries
+- **Dashboard** -- professional layout with sidebar navigation
+- **Landing page** -- hero, features, pricing, how it works, testimonials, CTA
+- **Settings** -- General, Security, Billing, and Account tabs
+- **8 pages** -- landing, login, dashboard, projects, tasks, team, settings, 404
 
 ## Project Structure
 
@@ -36,15 +36,16 @@ yarn create varity-app my-app
 my-app/
 ├── src/
 │   └── app/
-│       ├── (auth)/login/     # Login page
-│       ├── (dashboard)/      # Protected dashboard pages
-│       │   ├── dashboard/    # Overview with KPIs
+│       ├── login/            # Login page
+│       ├── dashboard/        # Protected dashboard pages
+│       │   ├── page.tsx      # Overview with KPIs
 │       │   ├── projects/     # Project management
 │       │   ├── tasks/        # Task tracking
 │       │   ├── team/         # Team members
-│       │   └── settings/     # App settings (6 sections)
+│       │   └── settings/     # App settings (4 tabs)
+│       ├── not-found.tsx     # 404 page
 │       └── page.tsx          # Landing page
-├── tailwind.config.ts
+├── tailwind.config.js
 ├── next.config.js
 └── package.json
 ```
@@ -60,26 +61,26 @@ varitykit app deploy
 
 Your app will be live in under 60 seconds.
 
-Or deploy from your AI editor with the [Varity MCP server](../../cli/varity-mcp/) (`@varity-labs/mcp`) — just ask "deploy this project".
+Or deploy from your AI editor with the [Varity MCP server](https://www.npmjs.com/package/@varity-labs/mcp) -- just ask "deploy this project".
 
 ## Related Packages
 
-- **[@varity-labs/sdk](../../core/varity-sdk/)** — Core SDK (database, credentials)
-- **[@varity-labs/ui-kit](../../ui/varity-ui-kit/)** — React UI components
-- **[@varity-labs/mcp](../../cli/varity-mcp/)** — MCP server for AI editors (Cursor, Claude Code, VS Code)
+- **[@varity-labs/sdk](https://www.npmjs.com/package/@varity-labs/sdk)** -- Core SDK (database, credentials)
+- **[@varity-labs/ui-kit](https://www.npmjs.com/package/@varity-labs/ui-kit)** -- React UI components
+- **[@varity-labs/mcp](https://www.npmjs.com/package/@varity-labs/mcp)** -- MCP server for AI editors (Cursor, Claude Code, VS Code)
 
 ## Learn More
 
 - [Documentation](https://docs.varity.so)
 - [GitHub](https://github.com/varity-labs/varity-sdk)
-- [Discord](https://discord.gg/varity)
+- [Discord](https://discord.gg/7vWsdwa2Bg)
 
 ---
 
-**Part of the [Varity SDK](https://github.com/varity-labs/varity-sdk)** — Build, deploy, and monetize apps 70% cheaper than AWS.
+**Part of the [Varity SDK](https://github.com/varity-labs/varity-sdk)** -- Build, deploy, and monetize apps 70% cheaper than AWS.
 
-[Documentation](https://docs.varity.so) · [GitHub](https://github.com/varity-labs/varity-sdk) · [Discord](https://discord.gg/varity)
+[Documentation](https://docs.varity.so) | [GitHub](https://github.com/varity-labs/varity-sdk) | [Discord](https://discord.gg/7vWsdwa2Bg)
 
 ## License
 
-MIT — [Varity Labs](https://varity.so)
+MIT -- [Varity Labs](https://www.varity.so)

package/dist/create.js

@@ -7,11 +7,10 @@ import ora from "ora";
 import { getInstallCommand } from "./utils.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const VARITY_PACKAGE_VERSION = "^2.0.0-alpha.1";
 const WORKSPACE_DEPS = {
-    "@varity-labs/sdk": VARITY_PACKAGE_VERSION,
-    "@varity-labs/types": VARITY_PACKAGE_VERSION,
-    "@varity-labs/ui-kit": VARITY_PACKAGE_VERSION,
+    "@varity-labs/sdk": "2.0.0-beta.6",
+    "@varity-labs/types": "2.0.0-beta.4",
+    "@varity-labs/ui-kit": "2.0.0-beta.7",
 };
 const EXCLUDED_FILES = new Set([
     ".env.local",
@@ -33,7 +32,7 @@ function rewritePackageJson(content, projectName) {
         for (const [name, version] of Object.entries(deps)) {
             if (typeof version === "string" &&
                 version.startsWith("workspace:")) {
-                deps[name] = WORKSPACE_DEPS[name] || VARITY_PACKAGE_VERSION;
+                deps[name] = WORKSPACE_DEPS[name] || "2.0.0-beta.4";
             }
         }
     }
@@ -136,6 +135,6 @@ export async function createApp(projectName, packageManager) {
     console.log(chalk.cyan("    varitykit app deploy"));
     console.log();
     console.log(`  Docs:  ${chalk.underline("https://docs.varity.so")}`);
-    console.log(`  Help:  ${chalk.underline("https://discord.gg/varity")}`);
+    console.log(`  Help:  ${chalk.underline("https://discord.gg/7vWsdwa2Bg")}`);
     console.log();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-varity-app",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.11",
   "description": "Create production-ready apps with auth, database, and payments built in",
   "license": "MIT",
   "repository": {

package/template/.turbo/turbo-build.log

@@ -0,0 +1,6 @@
+
+> my-saas-app@0.1.0 build /home/macoding/varity-workspace/varity-sdk-private/templates/saas-starter
+> next build
+
+   ▲ Next.js 15.5.11
+

package/template/KNOWN_ISSUES.md

@@ -1,6 +1,6 @@
 # Known Issues — SaaS Starter Template
 
-> **Last Updated:** February 14, 2026
+> **Last Updated:** March 8, 2026
 > **Template:** `saas-starter` (TaskFlow)
 > **Status:** All features functional, builds with 0 errors (8 routes + _not-found)
 
@@ -10,60 +10,50 @@
 
 | Feature | Status | Notes |
 |---------|--------|-------|
-| Landing Page | Working | 6 sections, scroll animations, social proof, testimonials, dashboard mockup |
-| Login | Working | Privy email/Google auth, zero-config with dev credentials, auto-redirect |
-| Dashboard | Working | KPI cards, getting started checklist, recent activity feed |
-| Projects CRUD | Working | Master-detail, nested tasks, CSV export, validation, optimistic updates |
-| Tasks CRUD | Working | Status cycling (click to advance), filtering, CSV export, cross-references projects |
-| Team CRUD | Working | Invite members, role management, email validation, role badges |
-| Settings | Working | 4 tabs (General, Security, Billing, Account), backend persistence via DB Proxy, skeleton loading |
-| Command Palette | Working | Cmd+K / Ctrl+K, searches pages and actions |
-| Toast Notifications | Working | Success/error/info with progress bar, exit animation, max 3 stack |
-| Protected Routes | Working | Automatic redirect for unauthenticated users |
-| Color Themes | Working | 4 built-in presets (Blue, Purple, Green, Orange) via CSS variables |
+| Landing Page | Working | 6 sections, scroll animations, social proof |
+| Auth (Login) | Working | Email/Google via Privy, zero-config dev credentials |
+| Dashboard | Working | KPI cards, checklist, activity feed |
+| Projects/Tasks/Team CRUD | Working | Full create, read, update, delete with validation |
+| Settings | Working | 4 tabs with backend persistence via DB Proxy |
+| Command Palette | Working | Cmd+K / Ctrl+K |
+| Color Themes | Working | 4 presets (Blue, Purple, Green, Orange) |
 | Static Export | Working | `output: 'export'` for IPFS deployment |
-| Mobile Nav | Working | Hamburger menu with responsive sidebar |
-| CSV Export | Working | One-click export for tasks and projects |
-| SEO | Working | OpenGraph, Twitter cards, robots.txt, sitemap template |
+| Mobile Nav | Working | Responsive sidebar with hamburger menu |
 
 ## Known Issues
 
-### 1. Navigation Flash (UI-Kit Limitation)
-Brief "Initializing Dashboard" screen when navigating between dashboard pages. Caused by `PrivyReadyGate` in UI-Kit re-checking auth state on each route change. Resolves in <1 second. This is a UI-Kit issue, not template-side.
+### 1. Auth Uses Privy Directly (Abstraction Coming Post-Beta)
+The template uses `usePrivy()` and `NEXT_PUBLIC_PRIVY_APP_ID`. The planned `useAuth()` hook and `NEXT_PUBLIC_VARITY_AUTH_ID` env var are post-beta tasks. No action required -- current auth works correctly.
 
-### 2. DashboardLayout Mobile Support
-The `DashboardLayout` from `@varity-labs/ui-kit` does not include mobile navigation. The template provides its own responsive sidebar in `src/app/dashboard/layout.tsx` as a workaround. UI-Kit mobile improvements are planned post-MVP.
+### 2. Payments Section is Placeholder
+Settings > Billing shows mock UI. Credit card payment integration (on/off ramp) is coming soon. Wire your own billing provider (Stripe, etc.) if needed now.
 
-### 3. Billing Section is Mock
-The Settings > Billing tab shows a mock UI (plan name, usage bars, payment method). Developers should wire their own billing provider (Stripe, etc.).
+### 3. No Server-Side Rendering
+All pages are statically exported. No SSR, API routes, or middleware. Do not use dynamic routes (`[id]` patterns) -- use client-side state for detail views instead.
 
-### 4. Sessions Are Mock
-The Settings > Security tab shows active sessions with a "Revoke" button. Session data is client-side mock — real session management is handled by Privy (the auth provider).
+### 4. Navigation Flash
+Brief "Initializing Dashboard" screen when navigating between pages. Caused by `PrivyReadyGate` re-checking auth state. Resolves in under 1 second.
 
-### 5. Password & Profile Managed by Auth Provider
-"Change password" and profile photo are managed by Privy (the auth provider). The Settings page shows informational dialogs explaining this.
+### 5. Team Email Invites Are Local Only
+No SMTP integration. Team members are added to the database but no invitation email is sent. Integrate your own email service if needed.
 
-### 6. No Server-Side Rendering
-All pages are statically exported (`output: 'export'`). No server-side rendering, API routes, or middleware. Data fetching happens client-side via the SDK.
-
-### 7. Team Email Invites
-No SMTP integration — team members are added to the database only. No invitation email is sent. Developers should integrate their own email service.
+### 6. Sessions and Password Are Auth-Provider Managed
+Settings > Security shows mock session data. Password changes and profile photos are managed by the auth provider (Privy), not the template.
 
 ## Environment
 
 ### Development (Zero Config)
 ```bash
-npm install
-npm run dev
+npm install && npm run dev
 ```
-No `.env` file, API keys, or accounts needed. Shared development credentials are built in.
+No `.env` file, API keys, or accounts needed.
 
 ### Production
 ```bash
 varitykit app deploy
 ```
-The CLI provisions a private database, injects production credentials, and deploys automatically.
 
 ## Reporting Issues
 
-Please report issues at: https://github.com/varity-labs/varity-sdk/issues
+- GitHub: https://github.com/varity-labs/varity-sdk/issues
+- Discord: https://discord.gg/7vWsdwa2Bg

package/template/README.md

@@ -1,8 +1,8 @@
 # TaskFlow — SaaS Starter Template
 
-[![Built with Varity](https://img.shields.io/badge/built%20with-Varity-7C3AED)](https://varity.so)
+[![Built with Varity](https://img.shields.io/badge/built%20with-Varity-7C3AED)](https://www.varity.so)
 
-A full-featured project management app built with [Varity](https://varity.so). Everything works immediately — no configuration, no API keys, no setup.
+A full-featured project management app built with [Varity](https://www.varity.so). Everything works immediately — no configuration, no API keys, no setup.
 
 ## Quick Start
 
@@ -60,7 +60,7 @@ Switch your entire app's color scheme by editing `src/app/globals.css`:
 This template works immediately with **zero setup**:
 
 ### Instant Auth
-- ✅ Email login (Privy)
+- ✅ Email login (built-in)
 - ✅ Google/Apple social login
 - ✅ Dev credentials built-in
 - ❌ No env vars needed
@@ -75,9 +75,9 @@ This template works immediately with **zero setup**:
 ```bash
 npm run deploy
 ```
-- ✅ Deploys to IPFS
+- ✅ Deploys to production
 - ✅ Auto-fetches credentials
-- ❌ No thirdweb account needed
+- ❌ No extra accounts needed
 
 ---
 
@@ -103,7 +103,7 @@ This template uses `workspace:^` protocol for Varity packages:
 - ✅ `output: 'export'` in next.config.js
 - ✅ All pages pre-rendered to static HTML
 - ✅ No server-side dependencies
-- ✅ IPFS/CDN deployable
+- ✅ CDN deployable
 
 ### Type Safety
 - ✅ TypeScript strict mode enabled
@@ -215,8 +215,7 @@ The database collection is created automatically on first use — no migrations
 
 | Variable | Required | Notes |
 |----------|----------|-------|
-| `NEXT_PUBLIC_PRIVY_APP_ID` | No | Auth provider (auto-configured) |
-| `NEXT_PUBLIC_THIRDWEB_CLIENT_ID` | No | Infrastructure (auto-configured) |
+| `NEXT_PUBLIC_VARITY_AUTH_ID` | No | Auth provider (auto-configured) |
 | `NEXT_PUBLIC_VARITY_APP_TOKEN` | No | Database token (auto-configured) |
 | `NEXT_PUBLIC_VARITY_APP_ID` | No | App ID (auto-configured) |
 

package/template/src/app/dashboard/layout.tsx

@@ -113,8 +113,8 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
   const privy = usePrivyHook ? usePrivyHook() : { user: null, logout: async () => {} };
   const { user, logout } = privy;
-  const pathname = usePathname();
   const router = useRouter();
+  const pathname = usePathname();
   const isMobile = useIsMobile();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
@@ -154,7 +154,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
 
   const handleLogout = async () => {
     await logout();
-    router.push('/');
+    window.location.href = '/';
   };
 
   // Fallback layout when DashboardLayout from ui-kit isn't available
@@ -257,6 +257,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
             name: userName,
             address: userEmail,
           }}
+          onNavigate={(path: string) => router.push(path)}
           onLogout={handleLogout}
           onNavigateToProfile={() => router.push('/dashboard/settings')}
           onNavigateToSettings={() => router.push('/dashboard/settings')}
@@ -288,7 +289,7 @@ export default function DashboardRootLayout({
       appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
       thirdwebClientId={process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID}
       loginMethods={['email', 'google']}
-      appearance={{ theme: 'light', accentColor: '#2563EB', logo: '/logo.svg' }}
+      appearance={{ theme: 'light', accentColor: '#2563EB' }}
     >
       <PrivyProtectedRoute fallback={<RedirectToLogin />}>
         <DashboardShell>{children}</DashboardShell>

package/template/src/app/dashboard/page.tsx

@@ -9,7 +9,6 @@ import { FolderKanban, ListTodo, Users, ArrowRight } from 'lucide-react';
 
 function QuickActions() {
   const router = useRouter();
-
   const actions = [
     {
       label: 'New Project',
@@ -138,7 +137,6 @@ function GettingStarted({
 }
 
 export default function DashboardPage() {
-  const router = useRouter();
   const { name } = useCurrentUser();
   const { data: projects, loading: projectsLoading, error: projectsError, refresh: refreshProjects } = useProjects();
   const { data: tasks, loading: tasksLoading, error: tasksError, refresh: refreshTasks } = useTasks();
@@ -163,14 +161,14 @@ export default function DashboardPage() {
         </p>
       </div>
 
-      {error && (
-        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3">
-          <p className="text-sm text-red-700">Failed to load data. Please check your connection and try again.</p>
+      {error && !loading && (
+        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
+          <p className="text-sm text-amber-700">Syncing your data...</p>
           <button
             onClick={() => { refreshProjects(); refreshTasks(); refreshTeam(); }}
-            className="text-sm font-medium text-red-700 hover:text-red-800 underline"
+            className="text-sm font-medium text-amber-700 hover:text-amber-800 underline"
           >
-            Retry
+            Refresh
           </button>
         </div>
       )}

package/template/src/app/dashboard/projects/page.tsx

@@ -606,10 +606,10 @@ export default function ProjectsPage() {
         </div>
       </Dialog>
 
-      {error && (
-        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3">
-          <p className="text-sm text-red-700">Failed to load projects. Please check your connection and try again.</p>
-          <button onClick={refresh} className="text-sm font-medium text-red-700 hover:text-red-800 underline">Retry</button>
+      {error && !loading && (
+        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
+          <p className="text-sm text-amber-700">Syncing your projects...</p>
+          <button onClick={refresh} className="text-sm font-medium text-amber-700 hover:text-amber-800 underline">Refresh</button>
         </div>
       )}
 

package/template/src/app/dashboard/tasks/page.tsx

@@ -258,10 +258,10 @@ export default function TasksPage() {
         )}
       </div>
 
-      {error && (
-        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3">
-          <p className="text-sm text-red-700">Failed to load tasks. Please check your connection and try again.</p>
-          <button onClick={refresh} className="text-sm font-medium text-red-700 hover:text-red-800 underline">Retry</button>
+      {error && !loading && (
+        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
+          <p className="text-sm text-amber-700">Syncing your tasks...</p>
+          <button onClick={refresh} className="text-sm font-medium text-amber-700 hover:text-amber-800 underline">Refresh</button>
         </div>
       )}
 

package/template/src/app/dashboard/team/page.tsx

@@ -246,10 +246,10 @@ export default function TeamPage() {
         loading={removeSubmitting}
       />
 
-      {error && (
-        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3">
-          <p className="text-sm text-red-700">Failed to load team data. Please check your connection and try again.</p>
-          <button onClick={refresh} className="text-sm font-medium text-red-700 hover:text-red-800 underline">Retry</button>
+      {error && !loading && (
+        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
+          <p className="text-sm text-amber-700">Syncing your team data...</p>
+          <button onClick={refresh} className="text-sm font-medium text-amber-700 hover:text-amber-800 underline">Refresh</button>
         </div>
       )}
 

package/template/src/app/layout.tsx

@@ -1,20 +1,23 @@
 import type { Metadata } from 'next';
 import { Providers } from '@/components/providers';
+import { APP_NAME } from '@/lib/constants';
 import './globals.css';
 
+const description = 'Built with Varity — auth, database, and deployment included.';
+
 export const metadata: Metadata = {
-  title: 'TaskFlow - Project Management',
-  description: 'Manage projects, track tasks, and collaborate with your team.',
-  metadataBase: new URL('https://example.com'),
+  title: APP_NAME,
+  description,
+  metadataBase: new URL('https://varity.app'),
   openGraph: {
-    title: 'TaskFlow - Project Management',
-    description: 'Manage projects, track tasks, and collaborate with your team.',
+    title: APP_NAME,
+    description,
     type: 'website',
   },
   twitter: {
     card: 'summary',
-    title: 'TaskFlow - Project Management',
-    description: 'Manage projects, track tasks, and collaborate with your team.',
+    title: APP_NAME,
+    description,
   },
 };
 

package/template/src/app/login/page.tsx

@@ -15,6 +15,12 @@ try {
   usePrivyHook = uiKit.usePrivy;
 } catch {}
 
+function loginButtonLabel(privy: { ready: boolean; authenticated: boolean }): string {
+  if (!privy.ready) return 'Loading...';
+  if (privy.authenticated) return 'Already Signed In';
+  return 'Sign In with Email or Social';
+}
+
 function LoginContent() {
   const router = useRouter();
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
@@ -55,11 +61,7 @@ function LoginContent() {
               disabled={!privy.ready || privy.authenticated}
               className="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors shadow-sm"
             >
-              {!privy.ready
-                ? 'Loading...'
-                : privy.authenticated
-                ? 'Already Signed In'
-                : 'Sign In with Email or Social'}
+              {loginButtonLabel(privy)}
             </button>
           ) : (
             <div className="text-center space-y-4">
@@ -79,20 +81,18 @@ function LoginContent() {
 }
 
 export default function LoginPage() {
-  // Always wrap in PrivyStack - it uses dev credentials automatically when no appId is provided
   if (PrivyStackComponent) {
     return (
       <PrivyStackComponent
         appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
         thirdwebClientId={process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID}
         loginMethods={['email', 'google']}
-        appearance={{ theme: 'light', accentColor: '#2563EB', logo: '/logo.svg' }}
+        appearance={{ theme: 'light', accentColor: '#2563EB' }}
       >
         <LoginContent />
       </PrivyStackComponent>
     );
   }
 
-  // Fallback if ui-kit package isn't installed
   return <LoginContent />;
 }

package/template/src/app/not-found.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import Link from 'next/link';
 
 export default function NotFound() {

package/template/src/app/page.tsx

@@ -2,7 +2,6 @@ import { Navbar } from '@/components/shared/Navbar';
 import { Hero } from '@/components/landing/Hero';
 import { Features } from '@/components/landing/Features';
 import { HowItWorks } from '@/components/landing/HowItWorks';
-import { Testimonials } from '@/components/landing/Testimonials';
 import { Pricing } from '@/components/landing/Pricing';
 import { CTA } from '@/components/landing/CTA';
 import { Footer } from '@/components/shared/Footer';
@@ -14,7 +13,7 @@ export default function HomePage() {
       <Hero />
       <Features />
       <HowItWorks />
-      <Testimonials />
+
       <Pricing />
       <CTA />
       <Footer />

package/template/src/components/dashboard/RecentActivity.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { DataTable } from '@varity-labs/ui-kit';
-import { TaskStatusBadge, PriorityBadge } from '@varity-labs/ui-kit';
+import { DataTable, TaskStatusBadge, PriorityBadge } from '@varity-labs/ui-kit';
 import { formatRelativeDate } from '@/lib/utils';
 import { ArrowRight } from 'lucide-react';
 import type { Task } from '@/types';

package/template/src/components/landing/Pricing.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { Check } from 'lucide-react';
 
 const plans = [
@@ -52,6 +53,12 @@ const plans = [
   },
 ];
 
+function buttonStyle(plan: (typeof plans)[number]): string {
+  if (plan.popular) return 'bg-primary-600 text-white hover:bg-primary-700';
+  if (plan.price === 0) return 'bg-gray-100 text-gray-900 hover:bg-gray-200';
+  return 'bg-gray-900 text-white hover:bg-gray-800';
+}
+
 export function Pricing() {
   return (
     <section id="pricing" className="py-24 bg-white">
@@ -102,18 +109,12 @@ export function Pricing() {
               </ul>
 
               <div className="mt-8">
-                <a
+                <Link
                   href="/login"
-                  className={`block w-full rounded-lg py-3 text-center font-medium transition-colors ${
-                    plan.popular
-                      ? 'bg-primary-600 text-white hover:bg-primary-700'
-                      : plan.price === 0
-                        ? 'bg-gray-100 text-gray-900 hover:bg-gray-200'
-                        : 'bg-gray-900 text-white hover:bg-gray-800'
-                  }`}
+                  className={`block w-full rounded-lg py-3 text-center font-medium transition-colors ${buttonStyle(plan)}`}
                 >
                   {plan.cta}
-                </a>
+                </Link>
               </div>
             </div>
           ))}

package/template/src/components/shared/Footer.tsx

@@ -31,7 +31,7 @@ export function Footer() {
         <div className="mt-8 border-t border-gray-100 pt-6 text-center text-sm text-gray-400">
           &copy; {year} {APP_NAME}. Built with{' '}
           <a
-            href="https://varity.so"
+            href="https://www.varity.so"
             target="_blank"
             rel="noopener noreferrer"
             className="inline-flex items-center gap-1 text-primary-500 hover:text-primary-600 transition-colors"

package/template/src/components/shared/Navbar.tsx

@@ -46,7 +46,6 @@ export function Navbar() {
             >
               Get Started
             </Link>
-            {/* Mobile menu toggle */}
             <button
               onClick={() => setMobileOpen(!mobileOpen)}
               className="rounded-lg p-2 text-gray-600 hover:bg-gray-100 sm:hidden"
@@ -58,7 +57,6 @@ export function Navbar() {
         </div>
       </div>
 
-      {/* Mobile dropdown */}
       {mobileOpen && (
         <div className="border-t border-gray-100 bg-white px-4 pb-4 pt-2 sm:hidden">
           <div className="space-y-1">

package/template/src/lib/constants.ts

@@ -1,6 +1,6 @@
 import type { NavigationItem } from '@varity-labs/ui-kit';
 
-export const APP_NAME = 'TaskFlow';
+export const APP_NAME = 'My App';
 
 export const NAVIGATION_ITEMS: NavigationItem[] = [
   { label: 'Dashboard', icon: 'dashboard', path: '/dashboard' },

package/template/src/lib/hooks.ts

@@ -10,6 +10,18 @@ try {
   usePrivyHook = uiKit.usePrivy;
 } catch {}
 
+async function fetchWithRetry<T>(fn: () => Promise<T>, retries = 3, delay = 1500): Promise<T> {
+  for (let i = 0; i < retries; i++) {
+    try {
+      return await fn();
+    } catch (err) {
+      if (i === retries - 1) throw err;
+      await new Promise((r) => setTimeout(r, delay));
+    }
+  }
+  throw new Error('Unexpected');
+}
+
 export function useCurrentUser() {
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
   const privy = usePrivyHook ? usePrivyHook() : { user: null, authenticated: false, logout: async () => {} };
@@ -54,7 +66,7 @@ export function useProjects(): UseCollectionReturn<Project> {
     try {
       setLoading(true);
       setError(null);
-      const result = await projects().get();
+      const result = await fetchWithRetry(() => projects().get());
       setData(result as Project[]);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load projects');
@@ -126,7 +138,7 @@ export function useTasks(projectId?: string): UseCollectionReturn<Task> {
     try {
       setLoading(true);
       setError(null);
-      const result = await tasks().get();
+      const result = await fetchWithRetry(() => tasks().get());
       setAllTasks(result as Task[]);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load tasks');
@@ -202,7 +214,7 @@ export function useTeam(): UseCollectionReturn<TeamMember> {
     try {
       setLoading(true);
       setError(null);
-      const result = await teamMembers().get();
+      const result = await fetchWithRetry(() => teamMembers().get());
       setData(result as TeamMember[]);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load team');
@@ -289,7 +301,7 @@ export function useUserSettings() {
     try {
       setLoading(true);
       setError(null);
-      const all = await userSettings().get();
+      const all = await fetchWithRetry(() => userSettings().get());
       const mine = (all as UserSettings[]).find((s) => s.user_id === userId);
       if (mine) {
         setSettings(mine);

package/template/src/services/dashboardService.ts

@@ -1,589 +0,0 @@
-/**
- * Dashboard Service
- *
- * Centralized service for dashboard-related API calls.
- * Provides type-safe interfaces and error handling.
- */
-
-import type { Project, Task, TeamMember } from '@/types';
-
-// ============================================================================
-// Type Definitions
-// ============================================================================
-
-export interface KPIMetric {
-  title: string;
-  value: string | number;
-  change?: {
-    value: number;
-    period: string;
-  };
-  trend?: 'up' | 'down' | 'neutral';
-  sparklineData?: number[];
-}
-
-export interface KPIResponse {
-  kpis: KPIMetric[];
-  has_data: boolean;
-  last_updated: string;
-}
-
-export interface Activity {
-  id: string;
-  type: 'project_created' | 'task_completed' | 'member_added' | 'comment_added';
-  title: string;
-  description: string;
-  timestamp: string;
-  user?: {
-    name: string;
-    avatar?: string;
-  };
-  metadata?: Record<string, any>;
-}
-
-export interface ActivityResponse {
-  activities: Activity[];
-  total_count: number;
-  has_more: boolean;
-}
-
-export interface ProjectResponse {
-  projects: Project[];
-  total_count: number;
-  active_count: number;
-}
-
-export interface TaskResponse {
-  tasks: Task[];
-  total_count: number;
-  completed_count: number;
-  by_status: {
-    todo: number;
-    in_progress: number;
-    done: number;
-  };
-}
-
-export interface TeamMemberResponse {
-  members: TeamMember[];
-  total_count: number;
-  roles: {
-    owner: number;
-    admin: number;
-    member: number;
-    viewer: number;
-  };
-}
-
-export interface DashboardOverviewResponse {
-  kpis: KPIResponse;
-  recent_activity: Activity[];
-  projects_summary: {
-    active: number;
-    total: number;
-    recent: Project[];
-  };
-  tasks_summary: {
-    open: number;
-    completed: number;
-    completion_rate: number;
-  };
-  team_summary: {
-    total: number;
-    active: number;
-  };
-}
-
-// ============================================================================
-// Error Handling
-// ============================================================================
-
-export class DashboardServiceError extends Error {
-  constructor(
-    message: string,
-    public statusCode?: number,
-    public originalError?: Error
-  ) {
-    super(message);
-    this.name = 'DashboardServiceError';
-  }
-}
-
-async function handleResponse<T>(response: Response): Promise<T> {
-  if (!response.ok) {
-    const errorText = await response.text().catch(() => 'Unknown error');
-    throw new DashboardServiceError(
-      `API request failed: ${response.statusText}`,
-      response.status,
-      new Error(errorText)
-    );
-  }
-
-  try {
-    return await response.json();
-  } catch (error) {
-    throw new DashboardServiceError(
-      'Failed to parse API response',
-      response.status,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-// ============================================================================
-// API Client
-// ============================================================================
-
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '/api';
-
-/**
- * Fetch dashboard KPIs
- */
-export async function getKPIs(userId: string): Promise<KPIResponse> {
-  try {
-    const response = await fetch(
-      `${API_BASE_URL}/dashboard/kpis?userId=${encodeURIComponent(userId)}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        cache: 'no-store', // Always fetch fresh data
-      }
-    );
-
-    return await handleResponse<KPIResponse>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to fetch KPIs',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Fetch recent activity
- */
-export async function getRecentActivity(
-  userId: string,
-  limit: number = 10
-): Promise<Activity[]> {
-  try {
-    const response = await fetch(
-      `${API_BASE_URL}/dashboard/activity?userId=${encodeURIComponent(userId)}&limit=${limit}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        cache: 'no-store',
-      }
-    );
-
-    const data = await handleResponse<ActivityResponse>(response);
-    return data.activities;
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to fetch recent activity',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Fetch all projects for a user
- */
-export async function getProjects(userId: string): Promise<Project[]> {
-  try {
-    const response = await fetch(
-      `${API_BASE_URL}/projects?userId=${encodeURIComponent(userId)}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        cache: 'no-store',
-      }
-    );
-
-    const data = await handleResponse<ProjectResponse>(response);
-    return data.projects;
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to fetch projects',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Fetch tasks, optionally filtered by project
- */
-export async function getTasks(
-  userId: string,
-  projectId?: string
-): Promise<Task[]> {
-  try {
-    const url = projectId
-      ? `${API_BASE_URL}/tasks?userId=${encodeURIComponent(userId)}&projectId=${encodeURIComponent(projectId)}`
-      : `${API_BASE_URL}/tasks?userId=${encodeURIComponent(userId)}`;
-
-    const response = await fetch(url, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      cache: 'no-store',
-    });
-
-    const data = await handleResponse<TaskResponse>(response);
-    return data.tasks;
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to fetch tasks',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Fetch team members
- */
-export async function getTeamMembers(userId: string): Promise<TeamMember[]> {
-  try {
-    const response = await fetch(
-      `${API_BASE_URL}/team?userId=${encodeURIComponent(userId)}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        cache: 'no-store',
-      }
-    );
-
-    const data = await handleResponse<TeamMemberResponse>(response);
-    return data.members;
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to fetch team members',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Fetch complete dashboard overview
- */
-export async function getDashboardOverview(
-  userId: string
-): Promise<DashboardOverviewResponse> {
-  try {
-    const response = await fetch(
-      `${API_BASE_URL}/dashboard/overview?userId=${encodeURIComponent(userId)}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        cache: 'no-store',
-      }
-    );
-
-    return await handleResponse<DashboardOverviewResponse>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to fetch dashboard overview',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Create a new project
- */
-export async function createProject(
-  userId: string,
-  data: Omit<Project, 'id' | 'createdAt' | 'updatedAt'>
-): Promise<Project> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/projects`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ userId, ...data }),
-    });
-
-    return await handleResponse<Project>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to create project',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Update an existing project
- */
-export async function updateProject(
-  projectId: string,
-  data: Partial<Project>
-): Promise<Project> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/projects/${projectId}`, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
-    });
-
-    return await handleResponse<Project>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to update project',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Delete a project
- */
-export async function deleteProject(projectId: string): Promise<void> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/projects/${projectId}`, {
-      method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    if (!response.ok) {
-      throw new DashboardServiceError(
-        `Failed to delete project: ${response.statusText}`,
-        response.status
-      );
-    }
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to delete project',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Create a new task
- */
-export async function createTask(
-  userId: string,
-  data: Omit<Task, 'id' | 'createdAt' | 'updatedAt'>
-): Promise<Task> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/tasks`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ userId, ...data }),
-    });
-
-    return await handleResponse<Task>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to create task',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Update an existing task
- */
-export async function updateTask(
-  taskId: string,
-  data: Partial<Task>
-): Promise<Task> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/tasks/${taskId}`, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
-    });
-
-    return await handleResponse<Task>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to update task',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Delete a task
- */
-export async function deleteTask(taskId: string): Promise<void> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/tasks/${taskId}`, {
-      method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    if (!response.ok) {
-      throw new DashboardServiceError(
-        `Failed to delete task: ${response.statusText}`,
-        response.status
-      );
-    }
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to delete task',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Invite a team member
- */
-export async function inviteTeamMember(
-  userId: string,
-  email: string,
-  role: TeamMember['role']
-): Promise<TeamMember> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/team/invite`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ userId, email, role }),
-    });
-
-    return await handleResponse<TeamMember>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to invite team member',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Remove a team member
- */
-export async function removeTeamMember(memberId: string): Promise<void> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/team/${memberId}`, {
-      method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    if (!response.ok) {
-      throw new DashboardServiceError(
-        `Failed to remove team member: ${response.statusText}`,
-        response.status
-      );
-    }
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to remove team member',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Update team member role
- */
-export async function updateTeamMemberRole(
-  memberId: string,
-  role: TeamMember['role']
-): Promise<TeamMember> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/team/${memberId}`, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ role }),
-    });
-
-    return await handleResponse<TeamMember>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to update team member role',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}