super-svelte-skeleton 0.0.3

package/src/lib/widgets/topbar/Topbar.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { asset, resolve } from '$app/paths';
+	import { goto } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
+	import * as m from '$paraglide/messages';
+	import { MENU_ITEMS } from './constants';
+	import { LOGOUT_ROUTE, PROFILE_ROUTE } from '$shared/config';
+	import {
+		Search,
+		CaretDownFill,
+		Person,
+		BoxArrowRight,
+		Sun,
+		Moon,
+	} from 'svelte-bootstrap-icons';
+	import Globe2 from 'svelte-bootstrap-icons/lib/Globe2.svelte';
+	import { page } from '$app/state';
+	import { getLocale, setLocale, locales } from '$paraglide/runtime';
+	import { ELocale, EStorageKey, ETheme } from '@aryagg/types';
+	import { getItem, setItem, setTheme } from '@aryagg/utils';
+	import { Avatar, DropdownMenu } from '@aryagg/ui-kit';
+
+	const profileItems = [
+		{ label: 'Profile', icon: Person,       onclick: () => goto(resolve(PROFILE_ROUTE, {})) },
+		{ label: 'Logout',  icon: BoxArrowRight, danger: true, divider: true, onclick: () => goto(resolve(LOGOUT_ROUTE, {})) },
+	];
+
+	let currentLocale: ELocale = $state(ELocale.EN);
+	let activeTheme: ETheme    = $state((getItem(EStorageKey.THEME) as ETheme) || ETheme.LIGHT);
+
+	onMount(() => {
+		if (browser) {
+			const savedLocale = getItem(EStorageKey.LANGUAGE) as ELocale | null;
+			currentLocale = (savedLocale ?? getLocale()) as ELocale;
+			if (savedLocale) setLocale(savedLocale);
+		}
+	});
+
+	const handleLanguageChange = (locale: ELocale) => {
+		currentLocale = locale;
+		setLocale(locale);
+		setItem(EStorageKey.LANGUAGE, locale);
+	};
+
+	let languageItems = $derived(
+		locales.map((locale) => ({
+			label:   locale.toUpperCase(),
+			onclick: () => handleLanguageChange(locale as ELocale),
+		})),
+	);
+
+	function handleThemeChange() {
+		activeTheme = activeTheme === ETheme.DARK ? ETheme.LIGHT : ETheme.DARK;
+		setTheme(activeTheme, EStorageKey.THEME);
+	}
+</script>
+
+<header class="h-14 bg-transparent px-2 shadow-2xs backdrop-blur-sm">
+	<div class="container mx-auto flex items-center justify-between">
+		<div class="flex flex-none items-center gap-3 py-2">
+			<a href={resolve('/', {})} class="flex aspect-square size-10 items-center justify-center rounded-md transition-colors" aria-label="Home" title="Home">
+				<img alt="Logo" class="size-full object-contain" src={asset('/logo.svg')} />
+			</a>
+			<h5 class="font-bold whitespace-nowrap">{m.app_name()}</h5>
+
+			<div class="relative min-w-45 sm:min-w-60 md:min-w-75">
+				<Search class="text-tertiary/70 absolute top-1/2 left-3 size-4 -translate-y-1/2" />
+				<input type="search" placeholder="Search..." class="text-secondary/80 rounded-2xl py-2 pl-8" />
+			</div>
+		</div>
+
+		<div class="flex items-center gap-2">
+			<nav class="flex items-end justify-center">
+				{#each MENU_ITEMS as menu (menu.id)}
+					{@const isActive = page.url.pathname === resolve(menu.href, {})}
+					<a
+						href={resolve(menu.href, {})}
+						class="group hover:text-accent/80! relative flex flex-col items-center justify-between pb-1 text-[11px]! font-medium transition-colors {isActive ? 'text-accent' : 'text-secondary'}"
+					>
+						{#if isActive}
+							<menu.selectedIcon class="size-5" />
+						{:else}
+							<menu.icon class="size-5" />
+						{/if}
+						<span class="hidden px-4 pt-1 sm:block">{menu.label}</span>
+						<span class="absolute -bottom-1 h-0.5 w-full rounded-full transition-opacity {isActive ? 'bg-accent opacity-100' : 'bg-transparent opacity-0'}"></span>
+					</a>
+				{/each}
+			</nav>
+
+			<DropdownMenu items={languageItems} align="right">
+				{#snippet trigger({ open, toggle })}
+					<button onclick={toggle} aria-label="Switch language" aria-expanded={open} class="btn-ghost text-secondary hover:text-primary flex flex-col items-center gap-1 border-0 px-2 text-[11px] font-semibold">
+						<Globe2 class="size-5" />
+						<div class="hidden uppercase sm:block">{currentLocale}</div>
+					</button>
+				{/snippet}
+			</DropdownMenu>
+
+			<button onclick={handleThemeChange} aria-label="Toggle theme" class="btn-ghost text-secondary hover:text-primary flex flex-col items-center gap-1 border-0 px-4 py-1 text-[11px] font-semibold">
+				{#if activeTheme === ETheme.LIGHT}
+					<Sun class="size-5" /><span class="hidden sm:block">Light</span>
+				{:else}
+					<Moon class="size-5" /><span class="hidden sm:block">Dark</span>
+				{/if}
+			</button>
+
+			<DropdownMenu items={profileItems} align="right">
+				{#snippet trigger({ open, toggle })}
+					<button onclick={toggle} aria-label="User menu" aria-expanded={open} class="group text-secondary hover:text-accent/80! flex flex-col items-center gap-1 border-0 px-4 pt-0 pb-1 text-[11px] font-medium transition-colors">
+						<Avatar src={asset('/profile.avif')} name="Romeo & Juliet" size="xs" />
+						<div class="flex items-center gap-1">
+							<span class="hidden sm:block">Me</span>
+							<CaretDownFill class="mt-0.5 size-3 transition-transform {open ? 'rotate-180' : ''}" />
+						</div>
+					</button>
+				{/snippet}
+			</DropdownMenu>
+		</div>
+	</div>
+</header>

package/src/lib/widgets/topbar/constants.ts

@@ -0,0 +1,16 @@
+import type { INavItem } from '@aryagg/types';
+import {
+	Grid3x3Gap, Grid3x3GapFill,
+	Gear, GearFill,
+	Grid, ListUl,
+} from 'svelte-bootstrap-icons';
+
+export const MENU_ITEMS: INavItem[] = [
+	{ label: 'Dashboard', id: 'dashboard', href: '/', icon: Grid3x3Gap, selectedIcon: Grid3x3GapFill },
+	{ label: 'Theme', id: 'theme', href: '/theme', icon: Gear, selectedIcon: GearFill },
+];
+
+export const VIEW_TABS = [
+	{ id: 'list', label: '', icon: ListUl },
+	{ id: 'grid', label: '', icon: Grid },
+];

package/src/lib/widgets/topbar/index.ts

@@ -0,0 +1,2 @@
+export { default as Topbar } from './Topbar.svelte';
+export { MENU_ITEMS, VIEW_TABS } from './constants';

package/src/params/integer.ts

@@ -0,0 +1,5 @@
+import { REGEX } from "@aryagg/types";
+
+export const match = ((param: string) => {
+    return REGEX.NUMBER.test(param);
+})

package/src/routes/(app)/(admin)/+layout.server.ts

@@ -0,0 +1,14 @@
+import { redirect } from '@sveltejs/kit';
+import { LOGIN_ROUTE, DASHBOARD_ROUTE } from '$shared/config';
+import { EUserRole } from '@aryagg/types';
+
+export async function load({ locals }) {
+	if (!locals.isAuthenticated || !locals.user) {
+		throw redirect(303, LOGIN_ROUTE);
+	}
+	const { role } = locals.user;
+	if (role !== EUserRole.ADMIN && role !== EUserRole.SUPER_ADMIN) {
+		throw redirect(303, DASHBOARD_ROUTE);
+	}
+	return {};
+}

package/src/routes/(app)/(admin)/admin/+page.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import {
+		PeopleFill, BoxSeam, EnvelopeFill, CurrencyDollar,
+		ArrowUpRight, ArrowDownRight,
+		PersonPlusFill, ShieldLockFill, FileTextFill, GearFill,
+	} from 'svelte-bootstrap-icons';
+
+	const stats = [
+		{ label: 'Total Users', value: '2,847', change: '+12%', up: true,  icon: PeopleFill,    color: 'text-info',    bg: 'bg-info/10'    },
+		{ label: 'Orders',      value: '1,293', change: '+8%',  up: true,  icon: BoxSeam,       color: 'text-success', bg: 'bg-success/10' },
+		{ label: 'Messages',    value: '348',   change: '-3%',  up: false, icon: EnvelopeFill,  color: 'text-warning', bg: 'bg-warning/10' },
+		{ label: 'Revenue',     value: '$48,200', change: '+21%', up: true, icon: CurrencyDollar, color: 'text-accent', bg: 'bg-accent/10' },
+	] as const;
+
+	const activity = [
+		{ user: 'Alice Johnson',  action: 'Registered',         time: '2 min ago',  status: 'success' },
+		{ user: 'Bob Martinez',   action: 'Placed order #8821',  time: '15 min ago', status: 'info'    },
+		{ user: 'Carol White',    action: 'Sent message',        time: '32 min ago', status: 'info'    },
+		{ user: 'David Kim',      action: 'Password reset',      time: '1 hr ago',   status: 'warning' },
+		{ user: 'Eva Nguyen',     action: 'Account suspended',   time: '3 hrs ago',  status: 'error'   },
+		{ user: 'Frank Schmidt',  action: 'Profile updated',     time: '5 hrs ago',  status: 'success' },
+	] as const;
+
+	const statusClass: Record<string, string> = {
+		success: 'bg-success/15 text-success',
+		info:    'bg-info/15 text-info',
+		warning: 'bg-warning/20 text-warning',
+		error:   'bg-error/15 text-error',
+	};
+
+	const actions = [
+		{ label: 'Add User',    icon: PersonPlusFill,  href: '/admin/users',      color: 'text-info'    },
+		{ label: 'Permissions', icon: ShieldLockFill,  href: '/settings/security', color: 'text-accent'  },
+		{ label: 'Content',     icon: FileTextFill,    href: '/content/pages',     color: 'text-success' },
+		{ label: 'Settings',    icon: GearFill,        href: '/settings',          color: 'text-warning' },
+	] as const;
+</script>
+
+<div class="flex size-full flex-col overflow-y-auto p-6">
+	<div class="mb-6">
+		<h2 class="text-xl font-bold text-content-primary">Admin Dashboard</h2>
+		<p class="text-sm text-content-secondary mt-0.5">Overview of your application's key metrics.</p>
+	</div>
+
+	<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mb-8">
+		{#each stats as s}
+			<div class="bg-surface-primary rounded-xl border p-5 flex items-start gap-4 shadow-sm">
+				<div class="p-2.5 rounded-lg {s.bg} {s.color} shrink-0"><s.icon width={20} height={20} /></div>
+				<div class="min-w-0">
+					<p class="text-xs text-content-secondary font-medium truncate">{s.label}</p>
+					<p class="text-2xl font-bold text-content-primary leading-tight mt-0.5">{s.value}</p>
+					<span class="inline-flex items-center gap-0.5 text-xs font-medium mt-1 {s.up ? 'text-success' : 'text-error'}">
+						{#if s.up}<ArrowUpRight width={12} height={12} />{:else}<ArrowDownRight width={12} height={12} />{/if}
+						{s.change} this month
+					</span>
+				</div>
+			</div>
+		{/each}
+	</div>
+
+	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+		<div class="lg:col-span-2 bg-surface-primary rounded-xl border shadow-sm overflow-hidden">
+			<div class="px-5 py-4 border-b"><h3 class="text-sm font-semibold text-content-primary">Recent Activity</h3></div>
+			<div class="overflow-x-auto">
+				<table class="w-full text-sm">
+					<thead>
+						<tr class="bg-surface-secondary/50">
+							<th class="text-left px-5 py-2.5 text-xs font-semibold text-content-secondary uppercase tracking-wide">User</th>
+							<th class="text-left px-4 py-2.5 text-xs font-semibold text-content-secondary uppercase tracking-wide">Action</th>
+							<th class="text-left px-4 py-2.5 text-xs font-semibold text-content-secondary uppercase tracking-wide">Time</th>
+							<th class="text-left px-4 py-2.5 text-xs font-semibold text-content-secondary uppercase tracking-wide">Status</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each activity as row, i}
+							<tr class="border-t /60 {i % 2 === 1 ? 'bg-surface-secondary/20' : ''}">
+								<td class="px-5 py-3 font-medium text-content-primary whitespace-nowrap">{row.user}</td>
+								<td class="px-4 py-3 text-content-secondary">{row.action}</td>
+								<td class="px-4 py-3 text-content-tertiary whitespace-nowrap">{row.time}</td>
+								<td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs font-medium {statusClass[row.status]}">{row.status}</span></td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+
+		<div class="bg-surface-primary rounded-xl border shadow-sm">
+			<div class="px-5 py-4 border-b"><h3 class="text-sm font-semibold text-content-primary">Quick Actions</h3></div>
+			<div class="p-4 flex flex-col gap-2">
+				{#each actions as a}
+					<a href={a.href} class="flex items-center gap-3 px-4 py-3 rounded-lg border hover:bg-surface-secondary transition-colors group">
+						<span class="{a.color} group-hover:scale-110 transition-transform"><a.icon width={18} height={18} /></span>
+						<span class="text-sm font-medium text-content-primary">{a.label}</span>
+						<ArrowUpRight width={13} height={13} class="ml-auto text-content-tertiary group-hover:text-content-secondary transition-colors" />
+					</a>
+				{/each}
+			</div>
+		</div>
+	</div>
+</div>

package/src/routes/(app)/+layout.server.ts

@@ -0,0 +1,9 @@
+import { redirect } from '@sveltejs/kit';
+import { LOGIN_ROUTE } from '$shared/config';
+
+export async function load({ locals }) {
+	if (!locals.isAuthenticated || !locals.user) {
+		throw redirect(303, LOGIN_ROUTE);
+	}
+	return { user: locals.user };
+}

package/src/routes/(app)/+layout.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Topbar } from '$widgets/topbar';
+
+	let { children } = $props();
+</script>
+
+<div class="flex h-screen w-screen flex-col overflow-hidden">
+	<Topbar />
+	<main class="relative min-h-0 flex-1 overflow-hidden">
+		{@render children()}
+	</main>
+</div>

package/src/routes/(app)/settings/+page.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { ArrowClockwise } from 'svelte-bootstrap-icons';
+	import { snackStore, Form } from '@aryagg/ui-kit';
+	import { THEME_INPUTS } from '$features/theme-editor';
+	import type { IForm } from '@aryagg/types';
+
+	const initialForm: IForm = {
+		sections: [{ id: 'branding', fields: structuredClone(THEME_INPUTS) }]
+	};
+
+	let form = $state<IForm>(structuredClone(initialForm));
+
+	function saveTheme(_: FormData) { snackStore.showSuccess('Theme applied to page'); }
+	function resetTheme() {
+		form = structuredClone(initialForm);
+		snackStore.showInfo('Theme reset to saved state');
+	}
+</script>
+
+<div class="bg-surface-secondary flex size-full flex-col overflow-hidden">
+	<div class="bg-surface-secondary shrink-0 px-10 py-2.5">
+		<div class="flex items-center gap-4">
+			<div>
+				<h1 class="text-primary text-3xl font-bold tracking-widest">Settings</h1>
+				<p class="text-tertiary pl-2 text-xs leading-tight">Title · description · logo · favicon</p>
+			</div>
+			<div class="ml-auto flex items-center gap-1.5">
+				<button onclick={resetTheme} class="btn btn-sm">
+					<ArrowClockwise width="13" /> Reset
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<div class="container mx-auto max-w-5xl flex-1 px-10 pt-2.5 pb-4">
+		<div class="card">
+			<h1 class="text-accent uppercase tracking-wide text-sm mb-4">Branding</h1>
+			<Form
+				bind:form
+				formClass="grid-cols-1 sm:grid-cols-2"
+				hideReset
+				hideCancel
+				submitLabel="Save & Apply"
+				onSubmit={saveTheme}
+			/>
+		</div>
+	</div>
+</div>

package/src/routes/(app)/theme/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { ThemeEditorWidget } from '$features/theme-editor';
+</script>
+
+<ThemeEditorWidget />

package/src/routes/(auth)/forgot-password/+page.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    import { resolve } from '$app/paths';
+import * as m from '$lib/paraglide/messages';
+    import { EnvelopeFill } from 'svelte-bootstrap-icons';
+
+    let email = $state('');
+    let submitted = $state(false);
+
+    const handleSubmit = async (e: Event) => {
+        e.preventDefault();
+        // TODO: call authApi.forgotPassword(email)
+        submitted = true;
+    };
+</script>
+
+<svelte:head>
+    <title>{m.forgot_title()}</title>
+</svelte:head>
+
+<div class="min-h-screen bg-surface-tertiary flex items-center justify-center px-4 py-12">
+
+    <!-- Ambient blob -->
+    <div class="fixed inset-0 -z-10 pointer-events-none overflow-hidden" aria-hidden="true">
+        <div class="absolute w-96 h-96 rounded-full bg-accent/5 top-0 right-0 blur-3xl"></div>
+    </div>
+
+    <div class="w-full max-w-md">
+
+        <!-- Logo -->
+        <a href={resolve("/",{})} class="flex items-center justify-center gap-2 mb-8">
+            <span class="text-accent text-xl leading-none">✦</span>
+            <span class="font-semibold text-content-primary tracking-wide text-lg">{m.app_name()}</span>
+        </a>
+
+        <div class="bg-surface-primary rounded-2xl shadow-xl border  p-8">
+
+            {#if submitted}
+                <!-- Success state -->
+                <div class="flex flex-col items-center gap-4 text-center py-4">
+                    <div class="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center">
+                        <EnvelopeFill width={32} height={32} class="text-success" />
+                    </div>
+                    <h2 class="text-xl font-bold text-content-primary">{m.forgot_sent()}</h2>
+                    <p class="text-sm text-content-secondary">{m.forgot_sent_hint()}</p>
+                    <a href={resolve("/login",{})} class="btn btn-primary mt-4 w-full py-2.5">{m.forgot_back()}</a>
+                </div>
+
+            {:else}
+                <!-- Form state -->
+                <div class="mb-8 text-center">
+                    <h1 class="text-2xl font-bold text-content-primary mb-1">{m.forgot_title()}</h1>
+                    <p class="text-sm text-content-secondary">{m.forgot_subtitle()}</p>
+                </div>
+
+                <form onsubmit={handleSubmit} class="flex flex-col gap-5">
+                    <div class="flex flex-col gap-1.5">
+                        <label for="email" class="text-sm font-medium text-content-primary">
+                            {m.register_email_label()}
+                        </label>
+                        <input
+                            id="email"
+                            type="email"
+                            bind:value={email}
+                            placeholder={m.register_email_placeholder()}
+                            required
+                            autocomplete="email"
+                            class="w-full px-4 py-2.5 rounded-lg border  bg-surface-secondary text-content-primary placeholder:text-content-tertiary focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition"
+                        />
+                    </div>
+
+                    <button type="submit" class="btn btn-primary w-full py-3 text-base font-semibold mt-1">
+                        {m.forgot_submit()}
+                    </button>
+                </form>
+
+                <p class="mt-6 text-center text-sm">
+                    <a href={resolve("/login",{})} class="text-accent hover:underline">{m.forgot_back()}</a>
+                </p>
+            {/if}
+
+        </div>
+    </div>
+</div>

package/src/routes/(auth)/login/+page.server.ts

@@ -0,0 +1,66 @@
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions } from '@sveltejs/kit';
+import { AUTH_COOKIE_NAME, DASHBOARD_ROUTE } from '$shared/config';
+import { PUBLIC_API_URL } from '$env/static/public';
+import type { AuthToken, IAuthUser } from '$entities/auth';
+
+export const actions: Actions = {
+    default: async ({ request, cookies, fetch }) => {
+        const form = await request.formData();
+        const email = String(form.get('email') ?? '').trim();
+        const password = String(form.get('password') ?? '');
+
+        if (!email || !password) {
+            return fail(400, { error: 'Email and password are required.' });
+        }
+
+        // ── 1. Exchange credentials for tokens ────────────────────
+        let token: AuthToken;
+        try {
+            const res = await fetch(`${PUBLIC_API_URL}/auth/login`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email, password }),
+            });
+
+            if (res.status === 401 || res.status === 403) {
+                return fail(401, { error: 'Invalid email or password.' });
+            }
+            if (!res.ok) {
+                return fail(res.status, { error: 'Login failed. Please try again.' });
+            }
+
+            token = await res.json() as AuthToken;
+        } catch {
+            return fail(503, { error: 'Cannot reach the server. Please try again later.' });
+        }
+
+        // ── 2. Fetch the user's profile ───────────────────────────
+        let user: IAuthUser;
+        try {
+            const meRes = await fetch(`${PUBLIC_API_URL}/auth/me`, {
+                headers: { Authorization: `Bearer ${token.accessToken}` },
+            });
+            user = await meRes.json() as IAuthUser;
+        } catch {
+            return fail(503, { error: 'Could not load user profile. Please try again.' });
+        }
+
+        // ── 3. Write the session cookie ───────────────────────────
+        const session = {
+            user,
+            accessToken: token.accessToken,
+            expiresAt: Date.now() + token.expiresIn * 1000,
+        };
+
+        cookies.set(AUTH_COOKIE_NAME, btoa(JSON.stringify(session)), {
+            path: '/',
+            httpOnly: true,
+            secure: process.env.NODE_ENV === 'production',
+            maxAge: token.expiresIn,
+            sameSite: 'lax',
+        });
+
+        throw redirect(303, DASHBOARD_ROUTE);
+    },
+};

package/src/routes/(auth)/login/+page.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+    import * as m from '$lib/paraglide/messages';
+    import { enhance } from '$app/forms';
+    import { Eye, EyeSlash } from 'svelte-bootstrap-icons';
+    import { resolve } from '$app/paths';
+
+    let { form }: { form?: { error?: string } | null } = $props();
+
+    let showPassword = $state(false);
+    let loading      = $state(false);
+</script>
+
+<svelte:head>
+    <title>{m.login_title()}</title>
+</svelte:head>
+
+<div class="min-h-screen bg-surface-tertiary flex items-center justify-center px-4 py-12">
+
+    <!-- Ambient blobs -->
+    <div class="fixed inset-0 -z-10 pointer-events-none overflow-hidden" aria-hidden="true">
+        <div class="absolute w-96 h-96 rounded-full bg-accent/5 -top-32 -left-32 blur-3xl"></div>
+        <div class="absolute w-80 h-80 rounded-full bg-info/5 -bottom-24 -right-24 blur-3xl"></div>
+    </div>
+
+    <div class="w-full max-w-md">
+
+        <!-- Logo -->
+        <a href={resolve("/",{})} class="flex items-center justify-center gap-2 mb-8">
+            <span class="text-accent text-xl leading-none">✦</span>
+            <span class="font-semibold text-content-primary tracking-wide text-lg">{m.app_name()}</span>
+        </a>
+
+        <!-- Card -->
+        <div class="bg-surface-primary rounded-2xl shadow-xl border  p-8">
+
+            <!-- Heading -->
+            <div class="mb-8 text-center">
+                <h1 class="text-2xl font-bold text-content-primary mb-1">{m.login_title()}</h1>
+                <p class="text-sm text-content-secondary">{m.login_subtitle()}</p>
+            </div>
+
+            <!-- Server error -->
+            {#if form?.error}
+                <div class="mb-5 px-4 py-3 rounded-lg bg-error/10 border border-error/30 text-sm text-error">
+                    {form.error}
+                </div>
+            {/if}
+
+            <form
+                method="POST"
+                use:enhance={() => {
+                    loading = true;
+                    return async ({ update }) => {
+                        loading = false;
+                        await update();
+                    };
+                }}
+                class="flex flex-col gap-5"
+            >
+
+                <!-- Email -->
+                <div class="flex flex-col gap-1.5">
+                    <label for="email" class="text-sm font-medium text-content-primary">
+                        {m.register_email_label()}
+                    </label>
+                    <input
+                        id="email"
+                        name="email"
+                        type="email"
+                        placeholder={m.register_email_placeholder()}
+                        required
+                        autocomplete="email"
+                        class="w-full px-4 py-2.5 rounded-lg border  bg-surface-secondary text-content-primary placeholder:text-content-tertiary focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition"
+                    />
+                </div>
+
+                <!-- Password -->
+                <div class="flex flex-col gap-1.5">
+                    <div class="flex items-center justify-between">
+                        <label for="password" class="text-sm font-medium text-content-primary">
+                            {m.register_password_label()}
+                        </label>
+                        <a href={resolve("/forgot-password",{})} class="text-xs text-accent hover:underline">
+                            {m.login_forgot_password()}
+                        </a>
+                    </div>
+                    <div class="relative">
+                        <input
+                            id="password"
+                            name="password"
+                            type={showPassword ? 'text' : 'password'}
+                            placeholder={m.register_password_placeholder()}
+                            required
+                            autocomplete="current-password"
+                            class="w-full px-4 py-2.5 pr-11 rounded-lg border  bg-surface-secondary text-content-primary placeholder:text-content-tertiary focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition"
+                        />
+                        <button
+                            type="button"
+                            onclick={() => showPassword = !showPassword}
+                            class="absolute right-3 top-1/2 -translate-y-1/2 text-content-tertiary hover:text-content-primary transition"
+                            aria-label="Toggle password visibility"
+                        >
+                            {#if showPassword}
+                                <EyeSlash width={16} height={16} />
+                            {:else}
+                                <Eye width={16} height={16} />
+                            {/if}
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Remember me -->
+                <label class="flex items-center gap-2.5 cursor-pointer group">
+                    <input
+                        type="checkbox"
+                        name="rememberMe"
+                        class="w-4 h-4 rounded  accent-accent cursor-pointer"
+                    />
+                    <span class="text-sm text-content-secondary group-hover:text-content-primary transition">
+                        {m.login_remember_me()}
+                    </span>
+                </label>
+
+                <!-- Submit -->
+                <button
+                    type="submit"
+                    disabled={loading}
+                    class="btn btn-primary w-full py-3 text-base font-semibold mt-1 disabled:opacity-60"
+                >
+                    {#if loading}
+                        <span class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
+                    {/if}
+                    {m.login_submit()}
+                </button>
+
+            </form>
+
+            <!-- Divider -->
+            <div class="relative my-6">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-border-primary"></div>
+                </div>
+                <div class="relative flex justify-center text-xs">
+                    <span class="px-3 bg-surface-primary text-content-tertiary">{m.divider_text()}</span>
+                </div>
+            </div>
+
+            <!-- Sign up link -->
+            <p class="text-center text-sm text-content-secondary">
+                {m.login_no_account()}
+                <a href={resolve("/register",{})} class="text-accent font-medium hover:underline ml-1">{m.login_sign_up()}</a>
+            </p>
+
+        </div>
+    </div>
+</div>