super-svelte-skeleton 0.0.3

package/.env.example

@@ -0,0 +1,17 @@
+# =========================================================================
+# SVELTEKIT ENVIRONMENT CONFIGURATION (.env)
+# =========================================================================
+# RULES FOR FORMATTING:
+# 1. NO SPACES around the '=' sign (e.g., KEY=VALUE not KEY = VALUE).
+# 2. USE QUOTES ("") if your value contains spaces (e.g., NAME="My App").
+# 3. PUBLIC VARIABLES: Must start with 'PUBLIC_' (Available to browser & server).
+# 4. PRIVATE VARIABLES: Do NOT start with 'PUBLIC_' (Available ONLY to server).
+# 5. RESTART: You MUST stop and restart 'npm run dev' after editing .env.
+# =========================================================================
+
+# --- 1. PUBLIC (Accessible by browser and server) ---
+PUBLIC_SITE_NAME="My Svelte 5 App"
+PUBLIC_SITE_DESCRIPTION="A high-performance SvelteKit application."
+PUBLIC_API_URL="https://api.myapp.com"
+PUBLIC_CONFIG_ENV="local"
+PUBLIC_BASE_PATH="/app"

package/.github/workflows/ninja_i18n.yml

@@ -0,0 +1,23 @@
+
+name: Ninja i18n action
+
+on: pull_request_target
+
+# explicitly configure permissions, in case your GITHUB_TOKEN workflow permissions are set to read-only in repository settings
+permissions:
+  pull-requests: write # Necessary to comment on PRs
+  issues: read         # Necessary to read issue comments
+  contents: read       # Necessary to access the repo content
+
+jobs:
+  ninja-i18n:
+    name: Ninja i18n - GitHub Lint Action
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Run Ninja i18n
+        # @main ensures that the latest version of the action is used
+        uses: opral/ninja-i18n-action@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    

package/.prettierignore

@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/

package/.prettierrc

@@ -0,0 +1,12 @@
+{
+    "plugins": [
+        "prettier-plugin-svelte",
+        "prettier-plugin-tailwindcss"
+    ],
+
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "useTabs": true,
+    "printWidth": 100
+}

package/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "inlang.vs-code-extension"
+  ]
+}

package/.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "SvelteKit Debug",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
+      "args": ["dev"],
+      "cwd": "${workspaceFolder}",
+      "sourceMaps": true,
+      "skipFiles": ["<node_internals>/**"]
+    }
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,30 @@
+{
+    "editor.formatOnSave": true,
+
+    "[svelte]": {
+        "editor.defaultFormatter": "svelte.svelte-vscode"
+    },
+
+    "[typescript]": {
+        "editor.defaultFormatter": "TypeScriptTeam.native-preview"
+    },
+
+    "[javascript]": {
+        "editor.defaultFormatter": "TypeScriptTeam.native-preview"
+    },
+
+    "[css]": {
+        "editor.defaultFormatter": "michelemelluso.code-beautifier"
+    },
+
+    "[scss]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+
+    "[html]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+
+    "prettier.requireConfig": true,
+    "css.lint.unknownAtRules": "ignore"
+}

package/README.md

@@ -0,0 +1,237 @@
+# SvelteKit 5 Enterprise Application
+
+A production-ready, fully-featured SvelteKit 5 application with Runes, Tailwind CSS v3, TypeScript, multi-language support (i18n), dark/light theming, authentication, and more.
+
+## 🚀 Quick Start
+
+```bash
+# 1. Install dependencies
+npm install
+
+# 2. Copy environment file
+cp .env.example .env.local
+
+# 3. Start dev server
+npm run dev
+```
+
+Open [http://localhost:5173](http://localhost:5173)
+
+---
+
+## 📁 Project Structure
+
+```
+src/
+├── app.css              # Global styles + Tailwind directives
+├── app.html             # HTML template (theme init script)
+├── app.d.ts             # TypeScript app-level declarations
+├── hooks.server.ts      # Server hooks: auth, security headers, route protection
+├── hooks.client.ts      # Client hooks: error handling
+│
+├── lib/
+│   ├── components/
+│   │   ├── ui/          # Reusable UI components (Button, Input, IToast, etc.)
+│   │   ├── layout/      # Layout components (Sidebar, Header)
+│   │   └── forms/       # Form-specific components
+│   │
+│   ├── stores/          # Svelte 5 Runes stores (reactive state)
+│   │   ├── auth.store.svelte.ts    # User authentication state
+│   │   ├── theme.store.svelte.ts   # Dark/light mode + accent color
+│   │   ├── i18n.store.svelte.ts    # Language / translations
+│   │   ├── toast.store.svelte.ts   # IToast notifications
+│   │   └── ui.store.svelte.ts      # UI state (sidebar, modals)
+│   │
+│   ├── types/           # TypeScript types, interfaces, enums
+│   │   ├── auth.types.ts
+│   │   ├── api.types.ts
+│   │   ├── ui.types.ts
+│   │   └── user.types.ts
+│   │
+│   ├── constants/       # App-wide constants (routes, config)
+│   ├── utils/           # Utility functions (cn, format, validation)
+│   ├── services/        # API service layer
+│   └── i18n/            # Translations (en, ar, fr, de, es)
+│
+└── routes/
+    ├── +layout.svelte            # Root layout (theme init, toast container)
+    ├── +layout.ts                # Root layout load
+    ├── +layout.server.ts         # Root layout server load (auth)
+    ├── +page.svelte              # Landing page
+    ├── +error.svelte             # Global error page
+    │
+    ├── (auth)/                   # Auth route group (login, register)
+    │   ├── +layout.svelte        # Auth layout (centered card)
+    │   ├── login/
+    │   ├── register/
+    │   └── forgot-password/
+    │
+    ├── (app)/                    # App route group (requires auth)
+    │   ├── +layout.svelte        # App layout (sidebar + header)
+    │   ├── +layout.server.ts     # Auth guard
+    │   ├── dashboard/
+    │   ├── profile/
+    │   └── settings/
+    │
+    └── api/                      # API endpoints
+        └── auth/
+            └── logout/
+```
+
+---
+
+## ✨ Features
+
+### 🔐 Authentication
+- Login with email + password
+- Registration with validation
+- Forgot password flow
+- ISession cookies (HTTP-only, secure)
+- Auto-redirect (protected routes → login, auth routes → dashboard)
+- Role-based access control (RBAC) with `EUserRole` enum
+
+### 🌍 Internationalization (i18n)
+- 5 languages: English, Arabic (RTL!), French, German, Spanish
+- Auto-detects browser language
+- Persists to `localStorage`
+- RTL layout support (Arabic)
+- Reactive via `i18nStore`
+
+### 🌙 Theming
+- Light / Dark / System theme
+- 4 accent colors: Blue, Purple, Green, Rose
+- CSS custom properties (easy to extend)
+- Persists to `localStorage`
+- FOUC prevention script in `app.html`
+
+### 📦 State Management (Svelte 5 Runes)
+- `$state` for reactive variables
+- `$derived` for computed values
+- `$effect` for side effects
+- No external state library needed
+
+### 🛡️ Security
+- CSRF protection (SvelteKit built-in)
+- HTTP-only session cookies
+- Security headers (X-Frame-Options, etc.)
+- Input validation with Zod schemas
+- Server-side auth guards
+
+### 📐 TypeScript
+- Strict mode enabled
+- Full type coverage
+- Enums: `EUserRole`, `Theme`, `ESnackType`, `ColorVariant`, etc.
+- Interfaces for all data shapes
+- Zod schemas for runtime validation
+
+---
+
+## 🛠️ Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start development server |
+| `npm run build` | Build for production |
+| `npm run preview` | Preview production build |
+| `npm run check` | TypeScript + Svelte checks |
+| `npm run lint` | ESLint |
+| `npm run format` | Prettier |
+
+---
+
+## 🔧 Adding New Pages
+
+### 1. Public page
+```
+src/routes/about/+page.svelte
+```
+
+### 2. Protected page (requires login)
+```
+src/routes/(app)/reports/+page.svelte
+src/routes/(app)/reports/+page.server.ts
+```
+
+### 3. API endpoint
+```
+src/routes/api/users/+server.ts
+```
+
+---
+
+## 🌐 Adding a New Language
+
+1. Create `src/lib/i18n/locales/de.ts` (copy from `en.ts`)
+2. Add translations
+3. Import in `src/lib/i18n/index.ts`:
+   ```ts
+   import de from './locales/de';
+   const locales = { en, ar, fr, de };
+   ```
+4. Add to `SUPPORTED_LANGUAGES` in `src/lib/constants/index.ts`
+
+---
+
+## 🎨 Changing Theme Colors
+
+Edit `THEME_COLORS` in `src/lib/constants/index.ts` and add RGB values.
+The settings page automatically shows all available colors.
+
+---
+
+## 🚀 Deployment
+
+This app uses `@sveltejs/adapter-auto` which auto-detects:
+- **Vercel** → serverless functions
+- **Netlify** → edge functions
+- **Node.js** → node server
+
+For specific targets, replace `adapter-auto` with:
+- `@sveltejs/adapter-node`
+- `@sveltejs/adapter-vercel`
+- `@sveltejs/adapter-netlify`
+- `@sveltejs/adapter-static` (for SSG)
+
+---
+
+## 🔑 Environment Variables
+
+| Variable | Description |
+|----------|-------------|
+| `PUBLIC_APP_NAME` | App display name |
+| `PUBLIC_APP_URL` | App URL |
+| `AUTH_SECRET` | Secret for session signing (min 32 chars) |
+
+---
+
+## 🏗️ Production Checklist
+
+- [ ] Replace demo auth with real database
+- [ ] Use JWT or DB-backed sessions instead of base64 cookies
+- [ ] Set `AUTH_SECRET` to a strong random string
+- [ ] Enable HTTPS
+- [ ] Set up error tracking (Sentry, etc.)
+- [ ] Add rate limiting to auth endpoints
+- [ ] Configure proper CORS if needed
+- [ ] Remove demo data from dashboard
+
+---
+
+## 📚 Prerender
+📝 Prerendering (SvelteKit)
+SvelteKit can prerender routes, generating static HTML at build time.
+export const prerender = true;   // enable prerender
+export const prerender = false;  // disable prerender
+export const prerender = 'auto'; // prerender if possible, otherwise SSR
+A route can be prerendered only if all users receive the same content. Pages with actions, user‑specific data, or server‑only logic cannot be prerendered.
+
+## 🌍 Paraglide (i18n) — How It Works
+Paraglide adds simple multilingual support to SvelteKit. When you run npx sv add paraglide, it automatically sets up everything needed for translations:
+Creates src/lib/paraglide/ → contains the translation engine and helper functions.
+Adds i18n runtime + server middleware → detects the user’s language on each request.
+Updates app.html → adds %paraglide.lang% so the correct <html lang=""> is injected.
+Configures hooks.server.ts → connects Paraglide to SvelteKit’s request pipeline.
+Creates a translation project → where your en.json, ar.json, etc. live.
+Installs required dependencies → so translations work on both server and client.
+Workflow:  
+Add your messages → import t() in components → Paraglide auto‑detects the user’s language and shows the right text.

package/_gitignore

@@ -0,0 +1,27 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+.svelte-kit
+.claude
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+# Paraglide
+src/lib/paraglide
+project.inlang/cache/

package/eslint.config.js

@@ -0,0 +1,40 @@
+import prettier from 'eslint-config-prettier';
+import path from 'node:path';
+import { includeIgnoreFile } from '@eslint/compat';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = path.resolve(import.meta.dirname, '.gitignore');
+
+export default defineConfig(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: { globals: { ...globals.browser, ...globals.node } },
+		rules: {
+			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+			'no-undef': 'off',
+			'@typescript-eslint/no-explicit-any': 'off'
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);

package/messages/ar.json

@@ -0,0 +1,70 @@
+{
+  "home_title": "مرحباً",
+  "home_description": "سجّل الدخول أو أنشئ حساباً للمتابعة",
+  "home_welcome": "مرحباً بك في التطبيق",
+  "home_subtitle": "يرجى تسجيل الدخول أو إنشاء حساب جديد للمتابعة.",
+  "home_login_btn": "تسجيل الدخول",
+  "home_register_btn": "إنشاء حساب",
+  "app_name": "AppName",
+  "app_tagline": "بناء أشياء مذهلة",
+  "theme_toggle": "تبديل المظهر",
+  "language_label": "اللغة",
+  "divider_text": "أو",
+  "language_hint": "اختر لغتك والمظهر المفضل لديك",
+  "footer_copyright": "جميع الحقوق محفوظة",
+  "hero_eyebrow": "أعمال أصلية مختارة",
+  "hero_stat1_value": "٢٬٤٠٠+",
+  "hero_stat1_label": "أعمال أصلية",
+  "hero_stat2_value": "٣٤٠",
+  "hero_stat2_label": "فنانون",
+  "hero_stat3_value": "٩٨٪",
+  "hero_stat3_label": "موثّقة",
+  "hero_featured_label": "عمل مميز",
+  "hero_artwork_title": "صمت الجبل",
+  "hero_price_from": "يبدأ من",
+  "hero_price": "٤٩٩$",
+  "hero_card1_title": "عمل أصلي",
+  "hero_card1_subtitle": "موقّع من الفنان",
+  "hero_card2_title": "إصدار محدود",
+  "hero_card2_subtitle": "٥٠ نسخة فقط",
+  "marquee_1": "أعمال أصلية",
+  "marquee_2": "إصدارات محدودة",
+  "marquee_3": "فن موثّق",
+  "marquee_4": "معرض مختار",
+  "register_title": "إنشاء حساب",
+  "register_subtitle": "انضم إلى آلاف محبي الفن اليوم",
+  "register_name_label": "الاسم الكامل",
+  "register_name_placeholder": "جين دو",
+  "register_email_label": "البريد الإلكتروني",
+  "register_email_placeholder": "you@example.com",
+  "register_password_label": "كلمة المرور",
+  "register_password_placeholder": "٨ أحرف على الأقل",
+  "register_confirm_label": "تأكيد كلمة المرور",
+  "register_confirm_placeholder": "أعد كتابة كلمة المرور",
+  "register_submit": "إنشاء حساب",
+  "register_have_account": "هل لديك حساب بالفعل؟",
+  "register_sign_in": "سجّل الدخول",
+
+  "login_title": "تسجيل الدخول",
+  "login_subtitle": "مرحباً بعودتك، سجّل دخولك إلى حسابك",
+  "login_forgot_password": "نسيت كلمة المرور؟",
+  "login_remember_me": "تذكّرني",
+  "login_submit": "تسجيل الدخول",
+  "login_no_account": "ليس لديك حساب؟",
+  "login_sign_up": "إنشاء حساب",
+
+  "forgot_title": "نسيت كلمة المرور",
+  "forgot_subtitle": "أدخل بريدك الإلكتروني وسنرسل لك رابط إعادة التعيين",
+  "forgot_submit": "إرسال رابط الإعادة",
+  "forgot_back": "العودة إلى تسجيل الدخول",
+  "forgot_sent": "راجع بريدك الوارد!",
+  "forgot_sent_hint": "لقد أرسلنا رابط إعادة تعيين كلمة المرور إلى بريدك الإلكتروني.",
+
+  "reset_title": "إعادة تعيين كلمة المرور",
+  "reset_subtitle": "أدخل كلمة المرور الجديدة أدناه",
+  "reset_new_label": "كلمة المرور الجديدة",
+  "reset_new_placeholder": "٨ أحرف على الأقل",
+  "reset_confirm_label": "تأكيد كلمة المرور",
+  "reset_confirm_placeholder": "أعد كتابة كلمة المرور",
+  "reset_submit": "إعادة تعيين كلمة المرور"
+}

package/messages/en.json

@@ -0,0 +1,70 @@
+{
+  "home_title": "Welcome",
+  "home_description": "Login or register to continue",
+  "home_welcome": "Welcome to the App",
+  "home_subtitle": "Please login or create an account to continue.",
+  "home_login_btn": "Login",
+  "home_register_btn": "Register",
+  "app_name": "AppName",
+  "app_tagline": "Build amazing things",
+  "theme_toggle": "Toggle theme",
+  "language_label": "Language",
+  "divider_text": "or",
+  "language_hint": "Choose your preferred language and theme",
+  "footer_copyright": "All rights reserved",
+  "hero_eyebrow": "Curated Originals",
+  "hero_stat1_value": "2,400+",
+  "hero_stat1_label": "Originals",
+  "hero_stat2_value": "340",
+  "hero_stat2_label": "Artists",
+  "hero_stat3_value": "98%",
+  "hero_stat3_label": "Authenticated",
+  "hero_featured_label": "Featured Work",
+  "hero_artwork_title": "Mountain Silence",
+  "hero_price_from": "From",
+  "hero_price": "$499",
+  "hero_card1_title": "Original Work",
+  "hero_card1_subtitle": "Signed by Artist",
+  "hero_card2_title": "Limited Edition",
+  "hero_card2_subtitle": "Only 50 Prints",
+  "marquee_1": "Original Works",
+  "marquee_2": "Limited Editions",
+  "marquee_3": "Authenticated Art",
+  "marquee_4": "Curated Gallery",
+  "register_title": "Create Account",
+  "register_subtitle": "Join thousands of art lovers today",
+  "register_name_label": "Full Name",
+  "register_name_placeholder": "Jane Doe",
+  "register_email_label": "Email",
+  "register_email_placeholder": "you@example.com",
+  "register_password_label": "Password",
+  "register_password_placeholder": "Min. 8 characters",
+  "register_confirm_label": "Confirm Password",
+  "register_confirm_placeholder": "Repeat your password",
+  "register_submit": "Create Account",
+  "register_have_account": "Already have an account?",
+  "register_sign_in": "Sign in",
+
+  "login_title": "Sign In",
+  "login_subtitle": "Welcome back, sign in to your account",
+  "login_forgot_password": "Forgot password?",
+  "login_remember_me": "Remember me",
+  "login_submit": "Sign In",
+  "login_no_account": "Don't have an account?",
+  "login_sign_up": "Sign up",
+
+  "forgot_title": "Forgot Password",
+  "forgot_subtitle": "Enter your email and we'll send you a reset link",
+  "forgot_submit": "Send Reset Link",
+  "forgot_back": "Back to login",
+  "forgot_sent": "Check your inbox!",
+  "forgot_sent_hint": "We've sent a password reset link to your email.",
+
+  "reset_title": "Reset Password",
+  "reset_subtitle": "Enter your new password below",
+  "reset_new_label": "New Password",
+  "reset_new_placeholder": "Min. 8 characters",
+  "reset_confirm_label": "Confirm Password",
+  "reset_confirm_placeholder": "Repeat your password",
+  "reset_submit": "Reset Password"
+}

package/messages/es.json

@@ -0,0 +1,70 @@
+{
+  "home_title": "Bienvenido",
+  "home_description": "Inicia sesión o regístrate para continuar",
+  "home_welcome": "Bienvenido a la aplicación",
+  "home_subtitle": "Por favor inicia sesión o crea una cuenta para continuar.",
+  "home_login_btn": "Iniciar sesión",
+  "home_register_btn": "Registrarse",
+  "app_name": "AppName",
+  "app_tagline": "Construye cosas increíbles",
+  "theme_toggle": "Cambiar tema",
+  "language_label": "Idioma",
+  "divider_text": "o",
+  "language_hint": "Elige tu idioma y tema preferidos",
+  "footer_copyright": "Todos los derechos reservados",
+  "hero_eyebrow": "Originales Seleccionados",
+  "hero_stat1_value": "2.400+",
+  "hero_stat1_label": "Originales",
+  "hero_stat2_value": "340",
+  "hero_stat2_label": "Artistas",
+  "hero_stat3_value": "98%",
+  "hero_stat3_label": "Autenticados",
+  "hero_featured_label": "Obra Destacada",
+  "hero_artwork_title": "Silencio de Montaña",
+  "hero_price_from": "Desde",
+  "hero_price": "$499",
+  "hero_card1_title": "Obra Original",
+  "hero_card1_subtitle": "Firmada por el Artista",
+  "hero_card2_title": "Edición Limitada",
+  "hero_card2_subtitle": "Solo 50 Copias",
+  "marquee_1": "Obras Originales",
+  "marquee_2": "Ediciones Limitadas",
+  "marquee_3": "Arte Autenticado",
+  "marquee_4": "Galería Curada",
+  "register_title": "Crear Cuenta",
+  "register_subtitle": "Únete a miles de amantes del arte hoy",
+  "register_name_label": "Nombre Completo",
+  "register_name_placeholder": "Jane Doe",
+  "register_email_label": "Correo Electrónico",
+  "register_email_placeholder": "tú@ejemplo.com",
+  "register_password_label": "Contraseña",
+  "register_password_placeholder": "Mín. 8 caracteres",
+  "register_confirm_label": "Confirmar Contraseña",
+  "register_confirm_placeholder": "Repite tu contraseña",
+  "register_submit": "Crear Cuenta",
+  "register_have_account": "¿Ya tienes una cuenta?",
+  "register_sign_in": "Inicia sesión",
+
+  "login_title": "Iniciar Sesión",
+  "login_subtitle": "Bienvenido de nuevo, inicia sesión en tu cuenta",
+  "login_forgot_password": "¿Olvidaste tu contraseña?",
+  "login_remember_me": "Recuérdame",
+  "login_submit": "Iniciar Sesión",
+  "login_no_account": "¿No tienes cuenta?",
+  "login_sign_up": "Regístrate",
+
+  "forgot_title": "Olvidé mi Contraseña",
+  "forgot_subtitle": "Ingresa tu correo y te enviaremos un enlace de restablecimiento",
+  "forgot_submit": "Enviar Enlace",
+  "forgot_back": "Volver al inicio de sesión",
+  "forgot_sent": "¡Revisa tu bandeja de entrada!",
+  "forgot_sent_hint": "Hemos enviado un enlace de restablecimiento a tu correo.",
+
+  "reset_title": "Restablecer Contraseña",
+  "reset_subtitle": "Ingresa tu nueva contraseña a continuación",
+  "reset_new_label": "Nueva Contraseña",
+  "reset_new_placeholder": "Mín. 8 caracteres",
+  "reset_confirm_label": "Confirmar Contraseña",
+  "reset_confirm_placeholder": "Repite tu contraseña",
+  "reset_submit": "Restablecer Contraseña"
+}