create-nara 1.0.44 → 1.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nara",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "description": "CLI to scaffold NARA projects",
   "type": "module",
   "bin": {

package/templates/svelte/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/svelte/resources/js/components/Header.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { fly, fade } from 'svelte/transition';
   import { page, router, inertia } from '@inertiajs/svelte';
-  import { clickOutside, Toast } from '../components/helper';
+  import { clickOutside, apiFetch } from '../components/helper';
   import DarkModeToggle from '../components/DarkModeToggle.svelte';
 
   interface User {
@@ -35,22 +35,12 @@
   $: visibleMenuLinks = menuLinks.filter((item) => item.show);
 
   async function handleLogout(): Promise<void> {
-    try {
-      const response = await fetch('/api/auth/logout', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' }
-      });
-      const result = await response.json();
+    const result = await apiFetch('/api/auth/logout', {
+      method: 'POST'
+    });
 
-      if (result.success) {
-        Toast(result.message || 'Logged out successfully', 'success');
-        router.visit(result.data?.redirect || '/login');
-      } else {
-        Toast(result.message || 'Logout failed', 'error');
-      }
-    } catch (err: unknown) {
-      const errorMessage = err instanceof Error ? err.message : 'Network error';
-      Toast(errorMessage, 'error');
+    if (result.success || result.redirected) {
+      router.visit(result.redirectUrl || '/login');
     }
   }
 </script>

package/templates/svelte/resources/js/components/helper.ts

@@ -68,6 +68,18 @@ interface ApiOptions {
   showErrorToast?: boolean;
 }
 
+/**
+ * Fetch API response type
+ */
+export interface FetchApiResponse<T = unknown> {
+  success: boolean;
+  data?: T;
+  message: string;
+  redirected?: boolean;
+  redirectUrl?: string;
+  errors?: Record<string, string[]>;
+}
+
 /** 
  * Creates a click outside event listener for a DOM node
  */
@@ -252,6 +264,138 @@ export async function api<T = unknown>(
   }
 }
 
+/**
+ * Reusable fetch API helper that handles JSON responses, redirects, and errors
+ *
+ * @param url - The URL to fetch
+ * @param options - Fetch options (method, body, headers, etc.)
+ * @param apiOptions - API options for toast notifications
+ * @returns FetchApiResponse with success, data, message, and redirect info
+ *
+ * @example
+ * // POST request with JSON body
+ * const result = await apiFetch('/api/auth/logout', { method: 'POST' });
+ * if (result.success || result.redirected) {
+ *   router.visit(result.redirectUrl || '/login');
+ * }
+ *
+ * @example
+ * // POST request with body
+ * const result = await apiFetch('/api/auth/login', {
+ *   method: 'POST',
+ *   body: JSON.stringify({ email, password })
+ * });
+ */
+export async function apiFetch<T = unknown>(
+  url: string,
+  options: RequestInit = {},
+  apiOptions: ApiOptions = {}
+): Promise<FetchApiResponse<T>> {
+  const { showSuccessToast = true, showErrorToast = true } = apiOptions;
+
+  try {
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+    });
+
+    // Check if the response was a redirect (fetch follows redirects automatically)
+    // We detect this by checking if the final URL is different from the requested URL
+    // or if the URL matches common redirect targets
+    const isRedirected = response.redirected;
+    const finalUrl = response.url;
+
+    // Handle non-JSON responses (redirects, HTML error pages)
+    const contentType = response.headers.get('content-type');
+    if (!contentType || !contentType.includes('application/json')) {
+      // If redirected to a success page, treat as success
+      if (isRedirected || finalUrl.endsWith('/dashboard') || finalUrl.endsWith('/login')) {
+        const successMsg = finalUrl.includes('login') ? 'Logged out successfully' : 'Success';
+        if (showSuccessToast) {
+          Toast(successMsg, 'success');
+        }
+        return {
+          success: true,
+          message: successMsg,
+          redirected: true,
+          redirectUrl: finalUrl,
+        };
+      }
+
+      // Handle error status codes
+      if (!response.ok) {
+        const errorMsg = getHttpErrorMessage(response.status, response.statusText);
+        if (showErrorToast) {
+          Toast(errorMsg, 'error');
+        }
+        return {
+          success: false,
+          message: errorMsg,
+        };
+      }
+
+      // Unknown non-JSON response
+      return {
+        success: true,
+        message: 'Success',
+        redirected: isRedirected,
+        redirectUrl: finalUrl,
+      };
+    }
+
+    // Parse JSON response
+    const result = await response.json() as ApiResponse<T>;
+
+    if (result.success) {
+      if (showSuccessToast && result.message) {
+        Toast(result.message, 'success');
+      }
+      return {
+        success: true,
+        message: result.message,
+        data: result.data,
+        redirected: isRedirected,
+        redirectUrl: finalUrl,
+      };
+    } else {
+      if (showErrorToast) {
+        const errorMsg = result.errors
+          ? formatValidationErrors(result.errors) || result.message
+          : result.message;
+        if (errorMsg) Toast(errorMsg, 'error');
+      }
+      return {
+        success: false,
+        message: result.message,
+        errors: result.errors,
+      };
+    }
+  } catch (err: unknown) {
+    // Network or parsing error
+    let errorMessage: string;
+
+    if (err instanceof SyntaxError) {
+      errorMessage = 'Server returned an invalid response. Please try again.';
+    } else if (err instanceof TypeError && (err.message.includes('fetch') || err.message.includes('network'))) {
+      errorMessage = 'Unable to connect to server. Please check your connection.';
+    } else {
+      errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred.';
+    }
+
+    if (showErrorToast) {
+      Toast(errorMessage, 'error');
+    }
+
+    return {
+      success: false,
+      message: errorMessage,
+    };
+  }
+}
+
 type ToastType = 'success' | 'error' | 'warning' | 'info';
 
 /**

package/templates/svelte/resources/js/index.css

@@ -1,233 +1,94 @@
 @import url('https://rsms.me/inter/inter.css');
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');
-@import "tailwindcss";
-
-/* Custom theme colors using CSS variables */
-@theme {
-  --color-primary-50: #ecfdf5;
-  --color-primary-100: #d1fae5;
-  --color-primary-200: #a7f3d0;
-  --color-primary-300: #6ee7b7;
-  --color-primary-400: #34d399;
-  --color-primary-500: #10b981;
-  --color-primary-600: #059669;
-  --color-primary-700: #047857;
-  --color-primary-800: #065f46;
-  --color-primary-900: #064e3b;
-  --color-primary-950: #022c22;
-
-  --color-secondary-50: #fffbeb;
-  --color-secondary-100: #fef3c7;
-  --color-secondary-200: #fde68a;
-  --color-secondary-300: #fcd34d;
-  --color-secondary-400: #fbbf24;
-  --color-secondary-500: #f59e0b;
-  --color-secondary-600: #d97706;
-  --color-secondary-700: #b45309;
-  --color-secondary-800: #92400e;
-  --color-secondary-900: #78350f;
-  --color-secondary-950: #451a03;
-
-  --color-accent-50: #faf5ff;
-  --color-accent-100: #f3e8ff;
-  --color-accent-200: #e9d5ff;
-  --color-accent-300: #d8b4fe;
-  --color-accent-400: #c084fc;
-  --color-accent-500: #a855f7;
-  --color-accent-600: #9333ea;
-  --color-accent-700: #7c3aed;
-  --color-accent-800: #6b21a8;
-  --color-accent-900: #581c87;
-  --color-accent-950: #3b0764;
-
-  --color-info-50: #ecfeff;
-  --color-info-100: #cffafe;
-  --color-info-200: #a5f3fc;
-  --color-info-300: #67e8f9;
-  --color-info-400: #22d3ee;
-  --color-info-500: #06b6d4;
-  --color-info-600: #0891b2;
-  --color-info-700: #0e7490;
-  --color-info-800: #155e75;
-  --color-info-900: #164e63;
-  --color-info-950: #083344;
-
-  --color-warning-50: #fff7ed;
-  --color-warning-100: #ffedd5;
-  --color-warning-200: #fed7aa;
-  --color-warning-300: #fdba74;
-  --color-warning-400: #fb923c;
-  --color-warning-500: #f97316;
-  --color-warning-600: #ea580c;
-  --color-warning-700: #c2410c;
-  --color-warning-800: #9a3412;
-  --color-warning-900: #7c2d12;
-  --color-warning-950: #431407;
-
-  --color-danger-50: #fef2f2;
-  --color-danger-100: #fee2e2;
-  --color-danger-200: #fecaca;
-  --color-danger-300: #fca5a5;
-  --color-danger-400: #f87171;
-  --color-danger-500: #ef4444;
-  --color-danger-600: #dc2626;
-  --color-danger-700: #b91c1c;
-  --color-danger-800: #991b1b;
-  --color-danger-900: #7f1d1d;
-  --color-danger-950: #450a0a;
-
-  --color-success-50: #ecfdf5;
-  --color-success-100: #d1fae5;
-  --color-success-200: #a7f3d0;
-  --color-success-300: #6ee7b7;
-  --color-success-400: #34d399;
-  --color-success-500: #10b981;
-  --color-success-600: #059669;
-  --color-success-700: #047857;
-  --color-success-800: #065f46;
-  --color-success-900: #064e3b;
-  --color-success-950: #022c22;
-
-  --color-surface-light: #f8f8f8;
-  --color-surface-dark: #0a0a0a;
-  --color-surface-card-light: #f1f5f9;
-  --color-surface-card-dark: #0f0f0f;
-
-  --font-family-sans: 'Inter var', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-family-serif: 'Playfair Display', Georgia, Cambria, 'Times New Roman', Times, serif;
-
-  --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
-}
-
-/* Base styles */
-html {
-  font-family: var(--font-family-sans);
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-body::-webkit-scrollbar {
-  width: 4px;
-}
-
-body::-webkit-scrollbar-track {
-  background: transparent;
-}
+@layer base {
+  html {
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
 
-body::-webkit-scrollbar-thumb {
-  background-color: var(--color-primary-500);
-  border-radius: 3px;
-}
+  body::-webkit-scrollbar {
+    width: 4px;
+  }
 
-/* Component utilities */
-@utility card-hover {
-  transition-property: all;
-  transition-duration: 300ms;
-  &:hover {
-    box-shadow: var(--shadow-soft);
-    transform: translateY(-0.25rem);
+  body::-webkit-scrollbar-track {
+    background: transparent;
   }
-}
 
-@utility nav-link {
-  padding: 0.5rem 1rem;
-  color: rgb(75 85 99);
-  border-radius: 0.5rem;
-  transition-property: color, background-color;
-  transition-duration: 300ms;
-  &:hover {
-    color: rgb(17 24 39);
-    background-color: rgb(243 244 246);
+  body::-webkit-scrollbar-thumb {
+    background-color: theme('colors.primary.500');
+    border-radius: 3px;
   }
 }
 
-@utility gradient-text {
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
-  background-image: linear-gradient(to right, var(--color-primary-600), var(--color-primary-400));
-}
+@layer components {
+  .card-hover {
+    @apply transition-all duration-300 hover:shadow-soft hover:-translate-y-1;
+  }
 
-@utility btn-primary {
-  background-color: var(--color-primary-600);
-  color: white;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-  transition-property: all;
-  transition-duration: 300ms;
-  &:hover {
-    background-color: var(--color-primary-700);
+  .nav-link {
+    @apply px-4 py-2 text-gray-600 dark:text-gray-200 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-300;
   }
-  &:active {
-    background-color: var(--color-primary-800);
+
+  .nav-link.active {
+    @apply bg-primary-50 dark:bg-gray-800 text-primary-600;
   }
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+
+  .gradient-text {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-primary-400;
   }
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-primary-500);
+
+  .mobile-nav-link {
+    @apply block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50;
   }
-}
 
-@utility btn-secondary {
-  background-color: white;
-  color: rgb(17 24 39);
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-  border: 1px solid rgb(209 213 219);
-  transition-property: all;
-  transition-duration: 300ms;
-  &:hover {
-    background-color: rgb(249 250 251);
+  .mobile-nav-link.active {
+    @apply text-primary-600 font-semibold;
   }
-  &:active {
-    background-color: rgb(243 244 246);
+
+  .btn-primary {
+    @apply bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700
+           transition-all duration-300 active:bg-primary-800
+           disabled:opacity-50 disabled:cursor-not-allowed
+           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
   }
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+
+  .btn-secondary {
+    @apply bg-white text-gray-900 px-4 py-2 rounded-lg border border-gray-300
+           hover:bg-gray-50 transition-all duration-300 active:bg-gray-100
+           disabled:opacity-50 disabled:cursor-not-allowed
+           focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
   }
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px white, 0 0 0 4px rgb(107 114 128);
+
+  .btn-danger {
+    @apply bg-danger-600 text-white px-4 py-2 rounded-lg hover:bg-danger-700
+           transition-all duration-300 active:bg-danger-800
+           disabled:opacity-50 disabled:cursor-not-allowed
+           focus:outline-none focus:ring-2 focus:ring-danger-500 focus:ring-offset-2;
   }
-}
 
-@utility btn-danger {
-  background-color: var(--color-danger-600);
-  color: white;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-  transition-property: all;
-  transition-duration: 300ms;
-  &:hover {
-    background-color: var(--color-danger-700);
+  .card {
+    @apply bg-white rounded-xl shadow-soft p-6 transition-all duration-300
+           shadow-lg hover:shadow-xl hover:-translate-y-0.5;
   }
-  &:active {
-    background-color: var(--color-danger-800);
+
+  /* Surface backgrounds */
+  .bg-surface {
+    @apply bg-surface-light dark:bg-surface-dark;
   }
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+
+  .bg-surface-card {
+    @apply bg-surface-card-light dark:bg-surface-card-dark;
   }
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-danger-500);
+
+  /* Gradient text utilities */
+  .gradient-text-accent {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-accent-600 to-accent-400;
   }
-}
 
-@utility card {
-  background-color: white;
-  border-radius: 0.75rem;
-  box-shadow: var(--shadow-soft);
-  padding: 1.5rem;
-  transition-property: all;
-  transition-duration: 300ms;
-  &:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    transform: translateY(-0.125rem);
+  .gradient-text-info {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-info-600 to-info-400;
   }
 }
-
-/* Surface utilities - use standard Tailwind classes instead */
-/* bg-surface-light, bg-surface-dark, bg-surface-card-light, bg-surface-card-dark are available */

package/templates/svelte/resources/js/pages/auth/login.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { inertia, router } from '@inertiajs/svelte'
-  import { Toast } from '../../components/helper';
+  import { apiFetch, Toast } from '../../components/helper';
   import NaraIcon from '../../components/NaraIcon.svelte';
   import { fade, fly } from 'svelte/transition';
 
@@ -28,63 +28,15 @@
 
   async function submitForm(): Promise<void> {
     loading = true;
-    try {
-      const response = await fetch('/api/auth/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: form.email, password: form.password })
-      });
-
-      // Check if login was successful via redirect (backend returns 302 on success)
-      // fetch follows redirects automatically, so we check if we ended up at dashboard
-      if (response.redirected || response.url.endsWith('/dashboard')) {
-        Toast('Login successful', 'success');
-        router.visit('/dashboard');
-        return;
-      }
-
-      // Handle non-JSON responses (server errors returning HTML)
-      const contentType = response.headers.get('content-type');
-      if (!contentType || !contentType.includes('application/json')) {
-        const statusMessages: Record<number, string> = {
-          401: 'Invalid email or password.',
-          403: 'Access denied.',
-          404: 'Login service not available.',
-          500: 'Server error. Please try again later.',
-          502: 'Server is temporarily unavailable.',
-          503: 'Service unavailable. Please try again later.',
-        };
-        Toast(statusMessages[response.status] || `Server error (${response.status})`, 'error');
-        return;
-      }
-
-      const result = await response.json();
-
-      if (result.success) {
-        Toast(result.message || 'Login successful', 'success');
-        router.visit(result.data?.redirect || '/dashboard');
-      } else {
-        // Handle validation errors
-        if (result.errors) {
-          const errorMessages = Object.values(result.errors).flat() as string[];
-          Toast(errorMessages[0] || result.message || 'Invalid email or password.', 'error');
-        } else {
-          Toast(result.message || 'Invalid email or password.', 'error');
-        }
-      }
-    } catch (err: unknown) {
-      // Network or parsing error
-      if (err instanceof SyntaxError) {
-        Toast('Server returned an invalid response. Please try again.', 'error');
-      } else if (err instanceof TypeError && (err.message.includes('fetch') || err.message.includes('network'))) {
-        Toast('Unable to connect to server. Please check your connection.', 'error');
-      } else {
-        const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred.';
-        Toast(errorMessage, 'error');
-      }
-    } finally {
-      loading = false;
+    const result = await apiFetch('/api/auth/login', {
+      method: 'POST',
+      body: JSON.stringify({ email: form.email, password: form.password })
+    });
+
+    if (result.success || result.redirected) {
+      router.visit(result.redirectUrl || '/dashboard');
     }
+    loading = false;
   }
 </script>
 

package/templates/svelte/tailwind.config.js

@@ -0,0 +1,122 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./resources/**/*.{svelte,html,js,ts}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', 'Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
+        serif: ['Playfair Display', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
+      },
+      colors: {
+        primary: {
+          50: '#ecfdf5',
+          100: '#d1fae5',
+          200: '#a7f3d0',
+          300: '#6ee7b7',
+          400: '#34d399',
+          500: '#10b981',
+          600: '#059669',
+          700: '#047857',
+          800: '#065f46',
+          900: '#064e3b',
+          950: '#022c22',
+        },
+        secondary: {
+          50: '#fffbeb',
+          100: '#fef3c7',
+          200: '#fde68a',
+          300: '#fcd34d',
+          400: '#fbbf24',
+          500: '#f59e0b',
+          600: '#d97706',
+          700: '#b45309',
+          800: '#92400e',
+          900: '#78350f',
+          950: '#451a03',
+        },
+        accent: {
+          50: '#faf5ff',
+          100: '#f3e8ff',
+          200: '#e9d5ff',
+          300: '#d8b4fe',
+          400: '#c084fc',
+          500: '#a855f7',
+          600: '#9333ea',
+          700: '#7c3aed',
+          800: '#6b21a8',
+          900: '#581c87',
+          950: '#3b0764',
+        },
+        info: {
+          50: '#ecfeff',
+          100: '#cffafe',
+          200: '#a5f3fc',
+          300: '#67e8f9',
+          400: '#22d3ee',
+          500: '#06b6d4',
+          600: '#0891b2',
+          700: '#0e7490',
+          800: '#155e75',
+          900: '#164e63',
+          950: '#083344',
+        },
+        warning: {
+          50: '#fff7ed',
+          100: '#ffedd5',
+          200: '#fed7aa',
+          300: '#fdba74',
+          400: '#fb923c',
+          500: '#f97316',
+          600: '#ea580c',
+          700: '#c2410c',
+          800: '#9a3412',
+          900: '#7c2d12',
+          950: '#431407',
+        },
+        danger: {
+          50: '#fef2f2',
+          100: '#fee2e2',
+          200: '#fecaca',
+          300: '#fca5a5',
+          400: '#f87171',
+          500: '#ef4444',
+          600: '#dc2626',
+          700: '#b91c1c',
+          800: '#991b1b',
+          900: '#7f1d1d',
+          950: '#450a0a',
+        },
+        success: {
+          50: '#ecfdf5',
+          100: '#d1fae5',
+          200: '#a7f3d0',
+          300: '#6ee7b7',
+          400: '#34d399',
+          500: '#10b981',
+          600: '#059669',
+          700: '#047857',
+          800: '#065f46',
+          900: '#064e3b',
+          950: '#022c22',
+        },
+        surface: {
+          light: '#f8f8f8',
+          dark: '#0a0a0a',
+          card: {
+            light: '#f1f5f9',
+            dark: '#0f0f0f',
+          }
+        },
+      },
+      boxShadow: {
+        'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+}

package/templates/svelte/vite.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig, loadEnv } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
-import tailwindcss from '@tailwindcss/vite';
 import path from 'path';
 
 export default defineConfig(({ mode }) => {
@@ -8,7 +7,7 @@ export default defineConfig(({ mode }) => {
   const vitePort = parseInt(env.VITE_PORT || '5173');
 
   return {
-    plugins: [svelte(), tailwindcss()],
+    plugins: [svelte()],
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './resources/js')