@jhits/dashboard 0.0.7 → 0.0.8

package/package.json

@@ -1,17 +1,15 @@
 {
   "name": "@jhits/dashboard",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "A comprehensive dashboard system built to manage custom built websites - plugin based SaaS system.",
   "main": "./src/index.tsx",
   "types": "./src/index.tsx",
   "browser": {
-    "./src/lib/mongodb.ts": false,
     "./src/lib/auth.ts": false,
     "./src/server.ts": false,
     "./src/index.server.tsx": false,
     "./src/api/masterRouter.ts": false,
     "./src/api/pluginRouter.ts": false,
-    "mongodb": false,
     "bcrypt": false,
     "jsonwebtoken": false,
     "server-only": false
@@ -51,13 +49,7 @@
       "default": "./src/empty.js"
     }
   },
-  "scripts": {
-    "lint": "eslint",
-    "type-check": "tsc --noEmit",
-    "type-check:all": "bash ../check-types.sh"
-  },
   "dependencies": {
-    "@jhits/plugin-core": "^0.0.1",
     "@types/jsonwebtoken": "^9.0.10",
     "bcrypt": "^6.0.0",
     "framer-motion": "^12.23.26",
@@ -66,19 +58,21 @@
     "mongodb": "^7.0.0",
     "next-auth": "^4.24.13",
     "next-intl": "^4.6.1",
-    "next-themes": "^0.4.6"
+    "next-themes": "^0.4.6",
+    "@jhits/plugin-core": "0.0.1"
   },
   "peerDependencies": {
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@jhits/plugin-blog": "*",
-    "@jhits/plugin-content": "*",
-    "@jhits/plugin-images": "*",
-    "@jhits/plugin-users": "*",
-    "@jhits/plugin-website": "*",
-    "@jhits/plugin-newsletter": "*",
-    "@jhits/plugin-telemetry": "*"
+    "@jhits/plugin-blog": "0.0.6",
+    "@jhits/plugin-dep": "0.0.3",
+    "@jhits/plugin-content": "0.0.3",
+    "@jhits/plugin-images": "0.0.5",
+    "@jhits/plugin-users": "0.0.3",
+    "@jhits/plugin-website": "0.0.3",
+    "@jhits/plugin-newsletter": "0.0.3",
+    "@jhits/plugin-telemetry": "0.0.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
@@ -104,5 +98,10 @@
     "next.config.ts",
     "postcss.config.mjs",
     "tailwind.config.ts"
-  ]
-}
+  ],
+  "scripts": {
+    "lint": "eslint",
+    "type-check": "tsc --noEmit",
+    "type-check:all": "bash ../check-types.sh"
+  }
+}

package/src/api/pluginRouter.ts

@@ -4,6 +4,7 @@
  */
 import { NextRequest, NextResponse } from 'next/server';
 import { getToken } from 'next-auth/jwt';
+// Type declarations for plugins are in ./plugin-types.d.ts
 
 export interface PluginRouterConfig {
     mongoClient?: Promise<MongoClient>;
@@ -28,13 +29,13 @@ async function getUserIdFromRequest(req: NextRequest, jwtSecret?: string): Promi
     try {
         // Use NextAuth's getToken to get the session token
         // This works with NextAuth's cookie-based sessions
-        const token = await getToken({ 
-            req, 
-            secret: process.env.NEXTAUTH_SECRET || jwtSecret 
+        const token = await getToken({
+            req,
+            secret: process.env.NEXTAUTH_SECRET || jwtSecret
         });
-        
+
         if (!token || !token.sub) return null;
-        
+
         // NextAuth stores user ID in token.sub
         return token.sub;
     } catch {
@@ -125,7 +126,7 @@ export async function handlePluginApi(
             emailConfig: config.emailConfig,
             baseUrl: config.baseUrl,
         };
-        
+
         // Debug logging for plugin-users to verify authOptions are present
         if (normalizedId === 'plugin-users' && !adaptedConfig.authOptions) {
             console.warn('[PluginRouter] WARNING: authOptions missing for plugin-users');

package/src/app/[locale]/dashboard/[...pluginRoute]/page.tsx

@@ -1,7 +1,8 @@
 // packages/jhits-dashboard/src/app/[locale]/dashboard/[...pluginRoute]/page.tsx
 'use client';
 
-import React, { use, useState, useEffect, useRef, useMemo } from 'react';
+import React, { use, useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { usePathname } from '@/i18n/navigation';
 import { PluginRegistry } from "../../../../lib/plugin-registry";
 import { PluginNotFound } from "../../../../components/PluginNotFound";
 import { PluginProps } from "../../../../types/plugin";
@@ -28,8 +29,9 @@ export default function DynamicPluginPage({
     const [prefix, ...subPath] = resolvedParams.pluginRoute;
     const locale = resolvedParams.locale;
     const siteId = "current-site-id";
+    const pathname = usePathname();
 
-    const manifest = PluginRegistry.getDefinition(prefix);
+    const manifest = useMemo(() => PluginRegistry.getDefinition(prefix), [prefix]);
 
     // FIX: Store the component in useMemo, but type it as 'any' or 'React.ElementType' 
     // to prevent the linter from thinking we are creating a component type.
@@ -51,28 +53,40 @@ export default function DynamicPluginPage({
         return null;
     });
 
-    const hasUpdatedFromEffect = useRef(false);
+    const propsCheckedRef = useRef<string | null>(null);
 
+    // Only check props when pathname changes to this plugin route
     useEffect(() => {
         if (typeof window === 'undefined' || !manifest) return;
+        
+        // Only check if we're actually on this plugin's route and haven't checked for this pathname yet
+        const isOnPluginRoute = pathname?.includes(`/dashboard/${prefix}`);
+        if (!isOnPluginRoute || !pathname || propsCheckedRef.current === pathname) {
+            return;
+        }
+        
+        propsCheckedRef.current = pathname;
 
-        const checkProps = () => {
+        // Check for plugin props
+        if (window.__JHITS_PLUGIN_PROPS__) {
+            const props = window.__JHITS_PLUGIN_PROPS__[manifest.repo];
+            if (props && (!clientProps || JSON.stringify(props) !== JSON.stringify(clientProps))) {
+                setClientProps(props);
+            }
+        }
+        
+        // Also check after a short delay in case props are set asynchronously
+        const timeoutId = setTimeout(() => {
             if (window.__JHITS_PLUGIN_PROPS__) {
                 const props = window.__JHITS_PLUGIN_PROPS__[manifest.repo];
                 if (props && (!clientProps || JSON.stringify(props) !== JSON.stringify(clientProps))) {
                     setClientProps(props);
-                    hasUpdatedFromEffect.current = true;
                 }
             }
-        };
-
-        checkProps();
-        const timeoutId = setTimeout(() => {
-            if (!hasUpdatedFromEffect.current) checkProps();
         }, 0);
 
         return () => clearTimeout(timeoutId);
-    }, [manifest, clientProps]);
+    }, [manifest, clientProps, pathname, prefix]);
 
     if (!manifest || !manifest.enabled || !PluginComponent) {
         return <PluginNotFound requestedPath={prefix} />;

package/src/app/[locale]/dashboard/layout.tsx

@@ -1,42 +1,42 @@
+import { memo, Suspense } from 'react';
 import Sidebar from '../../../components/dashboard/Sidebar';
 import Topbar from '../../../components/dashboard/Topbar';
-import { Providers, AuthGuard } from '../../../components/Providers';
+import { AuthGuard } from '../../../components/Providers';
 import '../../../app/globals.css';
 
-export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+const DashboardLayout = memo(function DashboardLayout({ children }: { children: React.ReactNode }) {
     return (
-        <Providers>
-            <AuthGuard>
-                {/* 1. Main container uses a soft neutral background (slate/neutral) */}
-                {/* Dashboard font and styles are applied via globals.css */}
-                <div
-                    data-dashboard="true"
-                    className="flex h-screen bg-dashboard-bg transition-colors duration-300 font-sans"
-                >
+        <AuthGuard>
+            <div
+                data-dashboard="true"
+                className="flex h-screen bg-dashboard-bg transition-colors duration-300 font-sans"
+            >
+                {/* Sidebar sits on the neutral background */}
+                <Sidebar />
 
-                    {/* Sidebar sits on the neutral background */}
-                    <Sidebar />
+                {/* 2. Content Area Wrapper */}
+                <div className="flex-1 flex flex-col min-w-0 overflow-hidden relative z-40">
+                    <Topbar />
 
-                    {/* 2. Content Area Wrapper */}
-                    <div className="flex-1 flex flex-col min-w-0 overflow-hidden relative z-40">
-                        <Topbar />
+                    {/* 3. The "Stage": This creates the visual separation. 
+                We add a margin, rounded corners, and a solid background to 
+                make the content look like it's sitting on a paper/plate.
 
-                        {/* 3. The "Stage": This creates the visual separation. 
-                    We add a margin, rounded corners, and a solid background to 
-                    make the content look like it's sitting on a paper/plate.
-
-                    bg-white dark:bg-neutral-900 border border-neutral-200/50 dark:border-neutral-800/50 p-6 md:p-10
-                */}
-                        <main className="flex-1 overflow-hidden p-2 md:p-4">
-                            <div className="h-full w-full shadow-sm overflow-hidden">
-                                <div className="h-full w-full mx-auto overflow-hidden">
+                bg-white dark:bg-neutral-900 border border-neutral-200/50 dark:border-neutral-800/50 p-6 md:p-10
+            */}
+                    <main className="flex-1 overflow-hidden p-2 md:p-4">
+                        <div className="h-full w-full shadow-sm overflow-hidden">
+                            <div className="h-full w-full mx-auto overflow-hidden">
+                                <Suspense fallback={<div className="flex items-center justify-center h-full"><div className="size-8 border-4 border-primary border-t-transparent rounded-full animate-spin" /></div>}>
                                     {children}
-                                </div>
+                                </Suspense>
                             </div>
-                        </main>
-                    </div>
+                        </div>
+                    </main>
                 </div>
-            </AuthGuard>
-        </Providers>
+            </div>
+        </AuthGuard>
     );
-}
+});
+
+export default DashboardLayout;

package/src/app/[locale]/dashboard/preferences/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 import { useTheme } from "next-themes";
+import { usePathname } from '@/i18n/navigation';
 import { motion } from "framer-motion";
 import { createPortal } from "react-dom";
 import {
@@ -135,6 +136,15 @@ export default function PreferencesPage() {
     const [prefs, setPrefs] = useState<UserPreferences | null>(null);
     const [isSaving, setIsSaving] = useState(false);
     const { theme, setTheme } = useTheme();
+    const pathname = usePathname();
+    const dataLoadedRef = useRef<string | null>(null);
+
+    // Only load data when we're actually on the preferences page
+    // Note: pathname is typed from next-intl routing, but dynamic dashboard routes aren't in the type union
+    // Using includes() handles both typed and dynamic routes safely
+    const isPreferencesPage = useMemo(() => {
+        return pathname?.includes('/preferences') ?? false;
+    }, [pathname]);
 
     // 1. Listen for global theme changes (e.g. from Topbar) and sync local state
     useEffect(() => {
@@ -143,7 +153,13 @@ export default function PreferencesPage() {
         }
     }, [theme, prefs]);
 
-    useEffect(() => { getPreferences().then(setPrefs); }, []);
+    // Only load preferences when on preferences page and haven't loaded for this route yet
+    useEffect(() => {
+        if (isPreferencesPage && pathname && dataLoadedRef.current !== pathname) {
+            getPreferences().then(setPrefs);
+            dataLoadedRef.current = pathname;
+        }
+    }, [isPreferencesPage, pathname]);
 
     const handleSave = async () => {
         if (!prefs) return;

package/src/app/[locale]/dashboard/profile/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useMemo } from 'react';
 import { useTranslations } from 'next-intl';
+import { usePathname } from '@/i18n/navigation';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useSession } from 'next-auth/react';
 import {
@@ -41,6 +42,7 @@ interface SessionLog {
 export default function ProfilePage() {
     const t = useTranslations('common.profile');
     const { data: session, update } = useSession();
+    const pathname = usePathname();
     const fileInputRef = useRef<HTMLInputElement>(null);
 
     // Global States
@@ -56,9 +58,30 @@ export default function ProfilePage() {
     const [isChangingPwd, setIsChangingPwd] = useState(false);
     const [passwords, setPasswords] = useState({ current: '', new: '', confirm: '' });
 
-    useEffect(() => { loadData(); }, []);
+    // Track if we've loaded data for this route
+    const dataLoadedRef = useRef<string | null>(null);
+    const isLoadingRef = useRef(false);
+    
+    // Only load data when we're actually on the profile page
+    // Note: pathname is typed from next-intl routing, but dynamic dashboard routes aren't in the type union
+    // Using includes() handles both typed and dynamic routes safely
+    const isProfilePage = useMemo(() => {
+        return pathname?.includes('/profile') ?? false;
+    }, [pathname]);
+    
+    useEffect(() => {
+        // Only load if we're on the profile page and haven't loaded data for this route yet
+        if (isProfilePage && pathname && dataLoadedRef.current !== pathname) {
+            loadData();
+            dataLoadedRef.current = pathname;
+        }
+    }, [isProfilePage, pathname]);
 
     async function loadData() {
+        // Skip if already loading (using ref to avoid stale closure)
+        if (isLoadingRef.current) return;
+        
+        isLoadingRef.current = true;
         setLoading(true);
         try {
             const [profile, activeSessions] = await Promise.all([
@@ -69,9 +92,10 @@ export default function ProfilePage() {
             setOriginalUser(profile);
             setSessions(activeSessions);
         } catch (e) {
-            console.error(e);
+            console.error('Failed to load profile data:', e);
         } finally {
             setLoading(false);
+            isLoadingRef.current = false;
         }
     }
 
@@ -266,9 +290,19 @@ function ProfileHero({ user, isUploading, fileInputRef, onImageChange, onRemoveI
         <header className="relative p-8 lg:p-10 rounded-[2.5rem] bg-neutral-100 dark:bg-neutral-700/50 border border-neutral-300 dark:border-neutral-700 overflow-hidden shadow-xl">
             <div className="relative z-10 flex flex-col md:flex-row items-center gap-8">
                 <div className="relative group">
-                    <input type="file" ref={fileInputRef} onChange={onImageChange} className="hidden" accept="image/*" />
+                    <label htmlFor="profile-image-upload" className="sr-only">Upload profile image</label>
+                    <input 
+                        id="profile-image-upload"
+                        name="profile-image"
+                        type="file" 
+                        ref={fileInputRef} 
+                        onChange={onImageChange} 
+                        className="hidden" 
+                        accept="image/*" 
+                        aria-label="Upload profile image"
+                    />
                     <div onClick={() => fileInputRef.current?.click()} className={`size-32 lg:size-40 rounded-[2.5rem] bg-primary flex items-center justify-center text-white text-4xl font-black shadow-2xl overflow-hidden cursor-pointer transition-all ${isUploading ? 'opacity-50 grayscale' : ''}`}>
-                        {user?.image ? <Image src={user.image} className="w-full h-full object-cover" alt="Profile" width={128} height={128} /> : initials}
+                        {user?.image ? <Image src={user.image} className="w-full h-full object-cover" alt="Profile" width={128} height={128} loading="eager" priority /> : initials}
                         <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"><Camera className="size-8" /></div>
                     </div>
                     {user?.image && (
@@ -389,11 +423,20 @@ function ActionButton({ label, icon: Icon, onClick }: { label: string, icon: Rea
 }
 
 function InputGroup({ label, value, onChange, type = "text" }: { label: string, value: string | undefined, onChange: (v: string) => void, type?: string }) {
+    // Generate a unique ID from the label
+    const inputId = `profile-${label.toLowerCase().replace(/\s+/g, '-')}`;
+    // Generate a name attribute from the label
+    const inputName = label.toLowerCase().replace(/\s+/g, '-');
+    
     return (
         <div className="space-y-2">
-            <label className="text-[10px] font-black uppercase tracking-widest text-neutral-400">{label}</label>
+            <label htmlFor={inputId} className="text-[10px] font-black uppercase tracking-widest text-neutral-400">{label}</label>
             <input
-                type={type} value={value || ""} onChange={(e) => onChange(e.target.value)}
+                id={inputId}
+                name={inputName}
+                type={type}
+                value={value || ""}
+                onChange={(e) => onChange(e.target.value)}
                 className="w-full bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 p-4 rounded-2xl text-sm font-bold outline-none focus:border-primary transition-all dark:text-neutral-100"
             />
         </div>

package/src/app/globals.css

@@ -41,42 +41,70 @@
   --color-neutral-800: oklch(18.67% 0 0);
   --color-neutral-900: oklch(10.67% 0 0);
 
-  /* Dashboard Mapping */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-border: var(--border);
-
-  /* Dashboard Semantic Variables */
+  /* Tailwind utility colors - these enable bg-background, text-foreground, etc. */
+  /* Default to light mode values, will be overridden by CSS variables for dark mode */
+  --color-background: oklch(98% 0 0);
+  --color-foreground: oklch(20% 0 0);
+  --color-card: oklch(100% 0 0);
+  --color-border: oklch(90% 0 0);
+
+  /* Dashboard Semantic Variables mapped to CSS variables */
   --color-dashboard-bg: var(--background);
   --color-dashboard-card: var(--card);
   --color-dashboard-text: var(--foreground);
-  --color-dashboard-sidebar: var(--card);
+  --color-dashboard-sidebar: var(--sidebar);
   --color-dashboard-border: var(--border);
 }
 
 :root {
   /* Light Mode: Soft warm off-white base with deep charcoal text */
-  --background: var(--color-neutral-50);
-  --foreground: var(--color-neutral-800);
-  --card: var(--color-neutral-50);
-  --border: var(--color-neutral-200);
-  /* Dashboard sidebar uses card color in light mode */
-  --color-dashboard-sidebar: var(--card);
+  --background: oklch(98% 0 0); /* Soft off-white */
+  --foreground: oklch(20% 0 0); /* Deep charcoal */
+  --card: oklch(100% 0 0);
+  --sidebar: oklch(100% 0 0);
+  --border: oklch(90% 0 0);
+  
+  /* Tailwind utility colors - default to light mode */
+  --color-background: oklch(98% 0 0);
+  --color-foreground: oklch(20% 0 0);
+  --color-card: oklch(100% 0 0);
+  --color-border: oklch(90% 0 0);
+}
+
+/* System preference fallback - applies immediately before script runs */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --background: oklch(15% 0 0);
+    --foreground: oklch(95% 0 0);
+    --card: oklch(25% 0 0);
+    --sidebar: oklch(20% 0 0);
+    --border: oklch(30% 0 0);
+    --color-background: oklch(15% 0 0);
+    --color-foreground: oklch(95% 0 0);
+    --color-card: oklch(25% 0 0);
+    --color-border: oklch(30% 0 0);
+  }
 }
 
 /* Ensure this is exactly as Tailwind v4 expects for dark mode */
-@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
+/* 2. Dark Variables - Scoped to the attribute */
+:root[data-theme="dark"],
 [data-theme="dark"] {
   color-scheme: dark;
-  /* Dark Mode: Deep midnight base with neutral-800 for cards/sidebars */
-  --background: var(--color-neutral-950);
-  --foreground: var(--color-neutral-100);
-  --card: var(--color-neutral-800);
-  --border: var(--color-neutral-700);
-  /* Dashboard sidebar uses card color in dark mode for depth */
-  --color-dashboard-sidebar: var(--card);
+  --background: oklch(15% 0 0); /* Midnight */
+  --foreground: oklch(95% 0 0); /* Off-white text */
+  --card: oklch(25% 0 0);      /* Lighter gray for cards */
+  --sidebar: oklch(20% 0 0);   /* Distinct sidebar dark */
+  --border: oklch(30% 0 0);
+  
+  /* Override Tailwind theme colors for dark mode */
+  --color-background: oklch(15% 0 0);
+  --color-foreground: oklch(95% 0 0);
+  --color-card: oklch(25% 0 0);
+  --color-border: oklch(30% 0 0);
 }
 
 /* --- Utilities --- */

package/src/components/DashboardCatchAll.tsx

@@ -8,6 +8,8 @@ import DashboardPluginRoute from '../app/[locale]/dashboard/[...pluginRoute]/pag
 import { WebsiteProvider } from '../lib/website-context';
 import { getWebsiteInfo } from '../lib/get-website-info';
 import { notFound } from 'next/navigation';
+import { getMessages } from 'next-intl/server';
+import { DashboardRootWrapper } from '../components/DashboardRootWrapper';
 
 export interface DashboardCatchAllProps {
     params: Promise<{ locale: string; path: string[] }>;
@@ -31,19 +33,22 @@ export default async function DashboardCatchAll({ params }: DashboardCatchAllPro
     const path = resolvedParams.path;
     const locale = resolvedParams.locale;
     
+    // Get messages for next-intl (dashboard builds its own intl context)
+    const messages = await getMessages();
+    
     // Handle login routes first (these should be accessible without auth)
     if (path.length > 0 && path[0] === 'login') {
         const { default: LoginPage } = await import('../app/[locale]/(auth)/login/page');
-        const { Providers } = await import('../components/Providers');
         const { WebsiteProvider } = await import('../lib/website-context');
         const websiteInfo = await getWebsiteInfo(locale);
         
+        // Build complete dashboard structure - all dashboard code stays in dashboard package
         return (
-            <Providers>
+            <DashboardRootWrapper messages={messages} locale={locale}>
                 <WebsiteProvider website={websiteInfo}>
                     <LoginPage />
                 </WebsiteProvider>
-            </Providers>
+            </DashboardRootWrapper>
         );
     }
     
@@ -80,12 +85,15 @@ export default async function DashboardCatchAll({ params }: DashboardCatchAllPro
                 })} />;
         }
         
+        // Build complete dashboard structure - all dashboard code stays in dashboard package
         return (
-            <WebsiteProvider website={websiteInfo}>
-                <DashboardLayout>
-                    {dashboardContent}
-                </DashboardLayout>
-            </WebsiteProvider>
+            <DashboardRootWrapper messages={messages} locale={locale}>
+                <WebsiteProvider website={websiteInfo}>
+                    <DashboardLayout>
+                        {dashboardContent}
+                    </DashboardLayout>
+                </WebsiteProvider>
+            </DashboardRootWrapper>
         );
     }
     

package/src/components/DashboardRootWrapper.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect } from 'react';
+import { NextIntlClientProvider } from 'next-intl';
+import { Providers } from './Providers';
+
+interface DashboardRootWrapperProps {
+    children: React.ReactNode;
+    locale: string;
+    messages: Record<string, Record<string, string>>;
+}
+
+/**
+ * DashboardRootWrapper - Handles all dashboard-specific HTML setup
+ * This component sets HTML attributes, injects theme script, and wraps with providers
+ * All dashboard-specific code stays in the dashboard package
+ */
+export function DashboardRootWrapper({ children, locale, messages }: DashboardRootWrapperProps) {
+    useEffect(() => {
+        // Set HTML attributes immediately on mount
+        if (typeof document !== 'undefined') {
+            document.documentElement.setAttribute('data-scroll-behavior', 'smooth');
+            
+            // Apply theme from localStorage or system preference
+            try {
+                const stored = localStorage.getItem('jhits-dashboard-theme');
+                let theme = 'light';
+                if (stored === 'dark' || stored === 'light') {
+                    theme = stored;
+                } else {
+                    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                    theme = systemPrefersDark ? 'dark' : 'light';
+                }
+                document.documentElement.setAttribute('data-theme', theme);
+            } catch {
+                // Ignore errors
+            }
+        }
+    }, []);
+
+    return (
+        <>
+            {/* Blocking script that runs before React hydrates - regular script tag works in body */}
+            <script
+                suppressHydrationWarning
+                dangerouslySetInnerHTML={{
+                    __html: `
+                        !function(){try{var e=localStorage.getItem('jhits-dashboard-theme'),t='light';if('dark'===e||'light'===e)t=e;else{var n=window.matchMedia('(prefers-color-scheme: dark)').matches;t=n?'dark':'light'}document.documentElement.setAttribute('data-theme',t);document.documentElement.setAttribute('data-scroll-behavior','smooth')}catch(e){}}();
+                    `,
+                }}
+            />
+            <NextIntlClientProvider messages={messages} locale={locale}>
+                <Providers>
+                    {children}
+                </Providers>
+            </NextIntlClientProvider>
+        </>
+    );
+}