@club-employes/utopia 4.22.0 → 4.24.0

package/README.md

@@ -175,6 +175,53 @@ const toggleTheme = () => {
 </script>
 ```
 
+## 🌍 Domain-Based Theme Initialization (No FOUC)
+
+For multi-tenant applications with different domains, you can initialize the theme **before** Vue mounts to prevent Flash of Unstyled Content (FOUC):
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import { initializeTheme } from '@club-employes/utopia'
+import '@club-employes/utopia/styles'
+import App from './App.vue'
+
+// Detect theme from domain
+function getThemeFromDomain(): string {
+  const hostname = window.location.hostname
+  
+  if (hostname.includes('gifteo')) {
+    return 'gifteo-light'
+  }
+  
+  if (hostname.includes('club-employes')) {
+    return 'club-employes-light'
+  }
+  
+  return 'club-employes-light' // Default
+}
+
+// Initialize theme BEFORE creating Vue app
+async function bootstrap() {
+  const themeName = getThemeFromDomain()
+  
+  try {
+    await initializeTheme(themeName)
+    console.log('✅ Theme initialized:', themeName)
+  } catch (error) {
+    console.error('❌ Failed to initialize theme:', error)
+  }
+  
+  // Create Vue app (no FOUC!)
+  const app = createApp(App)
+  app.mount('#app')
+}
+
+bootstrap()
+```
+
+> 📖 **[See full documentation](./THEME_INITIALIZATION.md)** for advanced patterns and examples.
+
 ## 📦 Package Exports
 
 ```javascript

package/dist/icons-list.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2025-10-03T09:21:51.005Z",
+  "generated": "2025-10-10T13:30:12.317Z",
   "count": 1238,
   "icons": [
     "Accessibility",

package/dist/index.d.ts

@@ -252,6 +252,11 @@ export declare const gifteoDark: ThemeConfig
 // Composable types
 export type BrandTheme = 'club-employes' | 'gifteo'
 export type ThemeMode = 'light' | 'dark'
+export type ThemeName = 
+  | 'club-employes-light'
+  | 'club-employes-dark'
+  | 'gifteo-light'
+  | 'gifteo-dark'
 
 export interface UseThemeReturn {
   currentTheme: ComputedRef<ThemeConfig>
@@ -259,10 +264,14 @@ export interface UseThemeReturn {
   currentMode: ComputedRef<ThemeMode>
   currentBrandName: ComputedRef<string>
   availableBrands: ComputedRef<Array<{ key: BrandTheme; name: string }>>
+  menuCollapsed: ComputedRef<boolean>
+  isBrandLocked: ComputedRef<boolean>
   toggleBrand: () => void
   toggleMode: () => void
   setBrand: (brand: BrandTheme) => void
   setMode: (mode: ThemeMode) => void
+  toggleMenuCollapsed: () => void
+  setMenuCollapsed: (collapsed: boolean) => void
 }
 
 export interface UseFaviconReturn {
@@ -275,6 +284,12 @@ export interface UseFaviconReturn {
 export declare function useTheme(): UseThemeReturn
 export declare function useFavicon(): UseFaviconReturn
 
+// Theme initialization exports
+export declare function initializeTheme(themeName: string): Promise<void>
+export declare function getActiveTheme(): ThemeName | null
+export declare function isValidThemeName(themeName: string): themeName is ThemeName
+export declare function unlockBrand(): void
+
 // Type exports
 export type BadgeVariant = 'default' | 'success' | 'warning' | 'danger'
 export type BadgeSize = 'small' | 'medium'