mycontext-cli 4.2.7 → 4.2.8

package/dist/templates/components/ui/theme-provider.tsx.hbs

@@ -0,0 +1,66 @@
+'use client'
+
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type Theme = 'dark' | 'light' | 'system'
+
+interface ThemeContextType {
+theme: Theme
+setTheme: (theme: Theme) => void
+resolvedTheme: 'dark' | 'light'
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+  export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'theme',
+  }: {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+  }) {
+  const [theme, setTheme] = useState<Theme>(defaultTheme)
+    const [resolvedTheme, setResolvedTheme] = useState<'dark' | 'light'>('light')
+
+      useEffect(() => {
+      const stored = localStorage.getItem(storageKey) as Theme | null
+      if (stored) setTheme(stored)
+      }, [storageKey])
+
+      useEffect(() => {
+      const root = document.documentElement
+      root.classList.remove('light', 'dark')
+
+      const resolved = theme === 'system'
+      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : theme
+
+      root.classList.add(resolved)
+      setResolvedTheme(resolved)
+
+      // Update meta theme-color for mobile browsers
+      const metaThemeColor = document.querySelector('meta[name="theme-color"]')
+      if (metaThemeColor) {
+      metaThemeColor.setAttribute('content', resolved === 'dark' ? '#09090b' : '#ffffff')
+      }
+      }, [theme])
+
+      return (
+      <ThemeContext.Provider value={ { theme, setTheme: (newTheme)=> {
+        localStorage.setItem(storageKey, newTheme)
+        setTheme(newTheme)
+        },
+        resolvedTheme,
+        } }>
+        {children}
+      </ThemeContext.Provider>
+      )
+      }
+
+      export const useTheme = () => {
+      const context = useContext(ThemeContext)
+      if (!context) throw new Error('useTheme must be used within ThemeProvider')
+      return context
+      }

package/dist/templates/components/ui/theme-toggle.tsx.hbs

@@ -0,0 +1,30 @@
+'use client'
+
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from './theme-provider'
+import { Button } from './button'
+
+export function ThemeToggle() {
+  const { theme, setTheme, resolvedTheme } = useTheme()
+
+  const toggleTheme = () => {
+    if (theme === 'system') {
+      setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+    } else {
+      setTheme(theme === 'dark' ? 'light' : 'dark')
+    }
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleTheme}
+      aria-label="Toggle theme"
+    >
+      <Sun className="size-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute size-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

package/dist/templates/config/app.css.hbs

@@ -0,0 +1,150 @@
+@import "tailwindcss";
+
+/* Tailwind v4 CSS-first configuration with design tokens */
+@theme {
+  /* Semantic color tokens using OKLCH for better color perception */
+  --color-background: oklch(100% 0 0);
+  --color-foreground: oklch(14.5% 0.025 264);
+
+  --color-primary: oklch(14.5% 0.025 264);
+  --color-primary-foreground: oklch(98% 0.01 264);
+
+  --color-secondary: oklch(96% 0.01 264);
+  --color-secondary-foreground: oklch(14.5% 0.025 264);
+
+  --color-muted: oklch(96% 0.01 264);
+  --color-muted-foreground: oklch(46% 0.02 264);
+
+  --color-accent: oklch(96% 0.01 264);
+  --color-accent-foreground: oklch(14.5% 0.025 264);
+
+  --color-destructive: oklch(53% 0.22 27);
+  --color-destructive-foreground: oklch(98% 0.01 264);
+
+  --color-border: oklch(91% 0.01 264);
+  --color-ring: oklch(14.5% 0.025 264);
+
+  --color-card: oklch(100% 0 0);
+  --color-card-foreground: oklch(14.5% 0.025 264);
+
+  --color-ring-offset: oklch(100% 0 0);
+
+  /* Radius tokens */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+
+  /* Animation tokens */
+  --animate-fade-in: fade-in 0.2s ease-out;
+  --animate-fade-out: fade-out 0.2s ease-in;
+  --animate-slide-in: slide-in 0.3s ease-out;
+  --animate-slide-out: slide-out 0.3s ease-in;
+  --animate-dialog-in: dialog-fade-in 0.2s ease-out;
+  --animate-dialog-out: dialog-fade-out 0.15s ease-in;
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes slide-in {
+    from {
+      transform: translateY(-0.5rem);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-out {
+    from {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateY(-0.5rem);
+      opacity: 0;
+    }
+  }
+
+  @keyframes dialog-fade-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(-0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  @keyframes dialog-fade-out {
+    from {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95) translateY(-0.5rem);
+    }
+  }
+}
+
+/* Dark mode variant */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Dark mode theme overrides */
+.dark {
+  --color-background: oklch(14.5% 0.025 264);
+  --color-foreground: oklch(98% 0.01 264);
+
+  --color-primary: oklch(98% 0.01 264);
+  --color-primary-foreground: oklch(14.5% 0.025 264);
+
+  --color-secondary: oklch(22% 0.02 264);
+  --color-secondary-foreground: oklch(98% 0.01 264);
+
+  --color-muted: oklch(22% 0.02 264);
+  --color-muted-foreground: oklch(65% 0.02 264);
+
+  --color-accent: oklch(22% 0.02 264);
+  --color-accent-foreground: oklch(98% 0.01 264);
+
+  --color-destructive: oklch(42% 0.15 27);
+  --color-destructive-foreground: oklch(98% 0.01 264);
+
+  --color-border: oklch(22% 0.02 264);
+  --color-ring: oklch(83% 0.02 264);
+
+  --color-card: oklch(14.5% 0.025 264);
+  --color-card-foreground: oklch(98% 0.01 264);
+
+  --color-ring-offset: oklch(14.5% 0.025 264);
+}
+
+/* Base styles */
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+}

package/dist/templates/layouts/dashboard-layout.tsx.hbs

@@ -0,0 +1,69 @@
+import { redirect } from 'next/navigation'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { ThemeToggle } from '@/components/ui/theme-toggle'
+import { getCurrentUser, logout } from '@/app/actions/auth'
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const { user } = await getCurrentUser()
+
+  if (!user) {
+    redirect('/login')
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      {/* Header */}
+      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container flex h-14 items-center">
+          <div className="mr-4 flex">
+            <Link href="/dashboard" className="mr-6 flex items-center space-x-2">
+              <span className="font-bold">{{projectName}}</span>
+            </Link>
+            <nav className="flex items-center space-x-6 text-sm font-medium">
+              <Link
+                href="/dashboard"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Dashboard
+              </Link>
+{{#each entities}}
+              <Link
+                href="/{{lowercase name}}s"
+                className="transition-colors hover:text-foreground/80"
+              >
+                {{capitalize name}}s
+              </Link>
+{{/each}}
+            </nav>
+          </div>
+          <div className="ml-auto flex items-center space-x-4">
+            <ThemeToggle />
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground">{user.name || user.email}</span>
+              <form action={logout}>
+                <Button type="submit" variant="ghost" size="sm">
+                  Log out
+                </Button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-1">{children}</main>
+
+      {/* Footer */}
+      <footer className="border-t py-6">
+        <div className="container text-center text-sm text-muted-foreground">
+          <p>&copy; {new Date().getFullYear()} {{projectName}}. All rights reserved.</p>
+        </div>
+      </footer>
+    </div>
+  )
+}

package/dist/templates/layouts/error.tsx.hbs

@@ -0,0 +1,51 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error)
+  }, [error])
+
+  return (
+    <div className="container mx-auto flex min-h-screen items-center justify-center px-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Something went wrong</CardTitle>
+          <CardDescription>
+            An error occurred while loading this page
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {error.message && (
+            <div className="rounded-md bg-destructive/10 p-3">
+              <p className="text-sm text-destructive">{error.message}</p>
+            </div>
+          )}
+          {error.digest && (
+            <p className="text-xs text-muted-foreground">
+              Error ID: {error.digest}
+            </p>
+          )}
+          <div className="flex gap-2">
+            <Button onClick={reset} className="flex-1">
+              Try again
+            </Button>
+            <Button variant="outline" asChild className="flex-1">
+              <a href="/">Go home</a>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/layouts/loading.tsx.hbs

@@ -0,0 +1,22 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function Loading() {
+  return (
+    <div className="container mx-auto py-10">
+      <div className="space-y-8">
+        {/* Header skeleton */}
+        <div className="space-y-2">
+          <Skeleton className="h-10 w-64" />
+          <Skeleton className="h-4 w-96" />
+        </div>
+
+        {/* Content skeleton */}
+        <div className="space-y-4">
+          <Skeleton className="h-32 w-full" />
+          <Skeleton className="h-32 w-full" />
+          <Skeleton className="h-32 w-full" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/templates/layouts/not-found.tsx.hbs

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+
+export default function NotFound() {
+  return (
+    <div className="container mx-auto flex min-h-screen items-center justify-center px-4">
+      <Card className="w-full max-w-md text-center">
+        <CardHeader>
+          <div className="mb-4 text-6xl font-bold text-muted-foreground">404</div>
+          <CardTitle>Page not found</CardTitle>
+          <CardDescription>
+            Sorry, we couldn't find the page you're looking for
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button asChild>
+            <Link href="/">Go back home</Link>
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/layouts/root-layout.tsx.hbs

@@ -0,0 +1,40 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import { ThemeProvider } from '@/components/ui/theme-provider'
+import '@/app.css'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+export const metadata: Metadata = {
+  title: {
+    default: '{{projectName}}',
+    template: '%s | {{projectName}}',
+  },
+  description: '{{projectDescription}}',
+  metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'),
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.variable}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}

package/dist/templates/lib/instant.ts.hbs

@@ -0,0 +1,19 @@
+import { init } from "@instantdb/react"
+import schema from "@/instant.schema"
+
+const APP_ID = process.env.NEXT_PUBLIC_INSTANT_APP_ID!
+
+if (!APP_ID) {
+  throw new Error(
+    "Missing NEXT_PUBLIC_INSTANT_APP_ID environment variable. " +
+    "Get your app ID from https://instantdb.com/dash"
+  )
+}
+
+/**
+ * InstantDB client instance
+ *
+ * Usage:
+ * const { data, isLoading, error } = db.useQuery({ {{entityName}}s: {} })
+ */
+export const db = init({ appId: APP_ID, schema })

package/dist/templates/lib/utils.ts.hbs

@@ -0,0 +1,24 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+/**
+ * Merge Tailwind CSS classes with proper precedence
+ * @param inputs - Class values to merge
+ * @returns Merged class string
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+/**
+ * Focus ring utility for consistent focus styles
+ */
+export const focusRing = cn(
+  "focus-visible:outline-none focus-visible:ring-2",
+  "focus-visible:ring-ring focus-visible:ring-offset-2"
+)
+
+/**
+ * Disabled utility for consistent disabled states
+ */
+export const disabled = "disabled:pointer-events-none disabled:opacity-50"

package/dist/templates/pages/auth/login-page.tsx.hbs

@@ -0,0 +1,30 @@
+import { Metadata } from 'next'
+import { Suspense } from 'react'
+import { LoginForm } from '@/components/auth/LoginForm'
+import { LoginSkeleton } from '@/components/auth/LoginSkeleton'
+
+export const metadata: Metadata = {
+  title: 'Login',
+  description: 'Sign in to your account',
+}
+
+export default function LoginPage() {
+  return (
+    <div className="container mx-auto flex min-h-screen items-center justify-center px-4">
+      <div className="w-full max-w-md space-y-8">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold tracking-tight">
+            Welcome back
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Sign in to your account to continue
+          </p>
+        </div>
+
+        <Suspense fallback={<LoginSkeleton />}>
+          <LoginForm />
+        </Suspense>
+      </div>
+    </div>
+  )
+}

package/dist/templates/pages/auth/register-page.tsx.hbs

@@ -0,0 +1,38 @@
+import { Metadata } from 'next'
+import { Suspense } from 'react'
+import Link from 'next/link'
+import { RegisterForm } from '@/components/auth/RegisterForm'
+import { LoginSkeleton } from '@/components/auth/LoginSkeleton'
+
+export const metadata: Metadata = {
+  title: 'Register',
+  description: 'Create a new account',
+}
+
+export default function RegisterPage() {
+  return (
+    <div className="container mx-auto flex min-h-screen items-center justify-center px-4">
+      <div className="w-full max-w-md space-y-8">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold tracking-tight">
+            Create an account
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Sign up to get started
+          </p>
+        </div>
+
+        <Suspense fallback={<LoginSkeleton />}>
+          <RegisterForm />
+        </Suspense>
+
+        <p className="text-center text-sm text-muted-foreground">
+          Already have an account?{' '}
+          <Link href="/login" className="font-medium text-primary hover:underline">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  )
+}

package/dist/templates/pages/crud/create-page.tsx.hbs

@@ -0,0 +1,42 @@
+import { Metadata } from 'next'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { EntityForm } from '@/components/crud/entity-form'
+import { create{{entityName}} } from '@/app/actions/crud'
+
+export const metadata: Metadata = {
+title: 'Create {{entityName}}',
+description: 'Create a new {{entityLower}}',
+}
+
+export default function Create{{entityName}}Page() {
+const fields = [
+{{#each fields}}
+{
+name: '{{name}}',
+type: '{{type}}',
+label: '{{capitalize name}}',
+required: {{#if required}}true{{else}}false{{/if}},
+},
+{{/each}}
+]
+
+return (
+<div className="container mx-auto py-10">
+  <div className="mb-8">
+    <h1 className="text-3xl font-bold tracking-tight">Create {{entityName}}</h1>
+    <p className="text-muted-foreground">Add a new {{entityLower}} to your collection</p>
+  </div>
+
+  <Card className="mx-auto max-w-2xl">
+    <CardHeader>
+      <CardTitle>{{entityName}} Information</CardTitle>
+      <CardDescription>Enter the details for your new {{entityLower}}</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <EntityForm entityName="{{entityName}}" entityLower="{{entityLower}}" fields={fields} action={create{{entityName}}
+        } submitLabel="Create {{entityName}}" />
+    </CardContent>
+  </Card>
+</div>
+)
+}