@serhii.olishevskyi/docs 1.0.3 → 1.0.4

package/dist/{chunk-CT3G3YSD.mjs → chunk-TCI2U35Q.mjs}

@@ -1,9 +1,32 @@
-// src/services/session.service.ts
-var getUserLastSeenAt = async (supabase, userId) => {
-  const { data, error } = await supabase.from("user_sessions").select("last_seen_at").eq("user_id", userId).order("last_seen_at", { ascending: false }).limit(1).maybeSingle();
-  if (error || !data) return null;
-  return data.last_seen_at;
-};
+// src/UI/components/data.display/UserPopoverComponent.tsx
+import { useEffect as useEffect8, useState as useState12 } from "react";
+import {
+  Popover,
+  Box as Box4,
+  Avatar,
+  Typography as Typography2,
+  Divider,
+  IconButton as IconButton4,
+  CircularProgress as CircularProgress2,
+  Stack,
+  Badge
+} from "@mui/material";
+import {
+  NotificationsNone as NotificationIcon,
+  AssignmentOutlined as TaskIcon,
+  ChatBubble as ChatIcon,
+  Work as WorkIcon,
+  CalendarToday as CalendarIcon,
+  Phone as PhoneIcon,
+  Close as CloseIcon,
+  Email as EmailIcon,
+  AccessTime as AccessTimeIcon,
+  Cake as CakeIcon
+} from "@mui/icons-material";
+
+// src/UI/components/data.display/UserStatusChipComponent.tsx
+import { Chip, IconButton as IconButton2 } from "@mui/material";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 
 // src/context/SupabaseProvider.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -34,20 +57,23 @@ var useSupabase = () => {
   return context.supabase;
 };
 
-// src/context/AuthProvider.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect, useState, useCallback, useRef } from "react";
+// src/context/TranslateProvider.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var AuthContext = createContext2(void 0);
-var useAuth = () => {
-  const context = useContext2(AuthContext);
-  if (!context) {
-    throw new Error("useAuth should be used within the AuthProvider");
-  }
-  return context;
+var TranslationNamespaceContext = createContext2({
+  namespace: "common"
+  // значение по умолчанию
+});
+var TranslateProvider = ({ namespace, children }) => {
+  return /* @__PURE__ */ jsx2(TranslationNamespaceContext.Provider, { value: { namespace }, children });
+};
+var useTranslationNamespace = (overrideNamespace) => {
+  const context = useContext2(TranslationNamespaceContext);
+  return overrideNamespace || context.namespace;
 };
 
 // src/context/TranslationEditProvider.tsx
-import { createContext as createContext3, useContext as useContext3, useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { createContext as createContext4, useContext as useContext4, useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
 
 // node_modules/i18next/dist/esm/i18next.js
 var isString = (obj) => typeof obj === "string";
@@ -2435,9 +2461,30 @@ var SupabaseCacheBackend = _SupabaseCacheBackend;
 // src/i18n/config.ts
 var config_default = instance;
 
-// src/context/TranslationEditProvider.tsx
+// src/context/AuthProvider.tsx
+import { createContext as createContext3, useContext as useContext3, useEffect, useState, useCallback, useRef } from "react";
+
+// src/services/session.service.ts
+var getUserLastSeenAt = async (supabase, userId) => {
+  const { data, error } = await supabase.from("user_sessions").select("last_seen_at").eq("user_id", userId).order("last_seen_at", { ascending: false }).limit(1).maybeSingle();
+  if (error || !data) return null;
+  return data.last_seen_at;
+};
+
+// src/context/AuthProvider.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-var TranslationEditContext = createContext3(void 0);
+var AuthContext = createContext3(void 0);
+var useAuth = () => {
+  const context = useContext3(AuthContext);
+  if (!context) {
+    throw new Error("useAuth should be used within the AuthProvider");
+  }
+  return context;
+};
+
+// src/context/TranslationEditProvider.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TranslationEditContext = createContext4(void 0);
 var TranslationEditProvider = ({ children }) => {
   const supabase = useSupabase();
   const { user } = useAuth();
@@ -2494,7 +2541,7 @@ var TranslationEditProvider = ({ children }) => {
       setIsTranslationMode(val);
     }
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     TranslationEditContext.Provider,
     {
       value: {
@@ -2509,1081 +2556,1035 @@ var TranslationEditProvider = ({ children }) => {
   );
 };
 var useTranslationEdit = () => {
-  const context = useContext3(TranslationEditContext);
+  const context = useContext4(TranslationEditContext);
   if (!context) throw new Error("useTranslationEdit must be used within TranslationEditProvider");
   return context;
 };
 
-// src/context/AIProvider.tsx
-import { createContext as createContext4, useContext as useContext4, useMemo as useMemo2 } from "react";
-import { GoogleGenAI } from "@google/genai";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var AIContext = createContext4(null);
-var AIProvider = ({
-  children,
-  config,
-  apiKey: directApiKey
-}) => {
-  const apiKey = directApiKey || config?.apiKey;
-  const provider = config?.provider || "gemini";
-  const modelName = config?.modelName || (provider === "gemini" ? "gemini-2.5-flash" : "gpt-4o-mini");
-  const contextValue = useMemo2(() => {
-    return {
-      apiKey,
-      provider,
-      modelName,
-      generate: async ({
-        prompt,
-        systemInstruction,
-        jsonMode = false,
-        temperature
-      }) => {
-        if (!apiKey) {
-          console.warn("[AIProvider]: API Key \u043D\u0435 \u0437\u0430\u0434\u0430\u043D.");
-          return null;
+// src/context/LocalizationProvider.tsx
+import { createContext as createContext5, useContext as useContext5, useMemo as useMemo2, useEffect as useEffect3, useState as useState3 } from "react";
+import { useTranslation } from "react-i18next";
+import moment from "moment/min/moment-with-locales";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DEFAULT_DATETIME_FORMATS = {
+  uk: "DD.MM.YYYY, HH:mm",
+  de: "DD.MM.YYYY, HH:mm",
+  en: "MM/DD/YYYY, hh:mm A",
+  es: "DD/MM/YYYY, HH:mm",
+  fr: "DD/MM/YYYY, HH:mm",
+  it: "DD/MM/YYYY, HH:mm"
+};
+var DEFAULT_DATE_FORMATS = {
+  uk: "DD.MM.YYYY",
+  de: "DD.MM.YYYY",
+  en: "MM/DD/YYYY",
+  es: "DD/MM/YYYY",
+  fr: "DD/MM/YYYY",
+  it: "DD/MM/YYYY"
+};
+var DEFAULT_TIME_FORMATS = {
+  uk: "HH:mm:ss",
+  de: "HH:mm:ss",
+  en: "hh:mm:ss A",
+  es: "HH:mm:ss",
+  fr: "HH:mm:ss",
+  it: "HH:mm:ss"
+};
+var LocalizationContext = createContext5(void 0);
+var LocalizationProvider = ({ children }) => {
+  const supabase = useSupabase();
+  const { i18n } = useTranslation();
+  const [languages, setLanguages] = useState3([]);
+  const [isLoadingLangs, setIsLoadingLangs] = useState3(true);
+  const [languagesError, setLanguagesError] = useState3(null);
+  useEffect3(() => {
+    let isMounted = true;
+    const fetchLanguages = async () => {
+      try {
+        setIsLoadingLangs(true);
+        setLanguagesError(null);
+        const { data: langs, error: langErr } = await supabase.from("languages").select("code, name, svg_flag, enabled, created_at").eq("enabled", true).order("code", { ascending: true });
+        if (langErr) {
+          throw langErr;
         }
-        if (provider === "gemini") {
-          try {
-            const ai = new GoogleGenAI({ apiKey });
-            const response = await ai.models.generateContent({
-              model: modelName,
-              contents: prompt,
-              config: {
-                systemInstruction,
-                temperature,
-                responseMimeType: jsonMode ? "application/json" : "text/plain"
-              }
-            });
-            const rawText = response.text?.trim() || "";
-            if (jsonMode) {
-              const cleanedText = rawText.replace(/^```(?:json)?\s*/i, "").replace(/\s*```$/, "").trim();
-              return JSON.parse(cleanedText);
-            }
-            return rawText;
-          } catch (err) {
-            console.error("[AIProvider Gemini Error]:", err);
-            return null;
-          }
+        if (isMounted && langs) {
+          setLanguages(langs);
         }
-        if (provider === "openai") {
-          try {
-            const messages = [];
-            if (systemInstruction) {
-              messages.push({ role: "system", content: systemInstruction });
-            }
-            messages.push({ role: "user", content: prompt });
-            const res = await fetch("https://api.openai.com/v1/chat/completions", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-                Authorization: `Bearer ${apiKey}`
-              },
-              body: JSON.stringify({
-                model: modelName,
-                messages,
-                temperature,
-                ...jsonMode ? { response_format: { type: "json_object" } } : {}
-              })
-            });
-            const data = await res.json();
-            const content = data.choices?.[0]?.message?.content?.trim() || "";
-            if (jsonMode) {
-              return JSON.parse(content);
-            }
-            return content;
-          } catch (err) {
-            console.error("[AIProvider OpenAI Error]:", err);
-            return null;
-          }
+      } catch (err) {
+        console.error("Failed to load languages from Supabase:", err);
+        if (isMounted) {
+          setLanguagesError(err.message || "Error loading languages");
+        }
+      } finally {
+        if (isMounted) {
+          setIsLoadingLangs(false);
         }
-        return null;
       }
     };
-  }, [apiKey, provider, modelName]);
-  return /* @__PURE__ */ jsx4(AIContext.Provider, { value: contextValue, children });
+    fetchLanguages();
+    return () => {
+      isMounted = false;
+    };
+  }, [supabase]);
+  const rawLang = i18n.language || "uk";
+  const currentLang = rawLang.split("-")[0].toLowerCase();
+  const getDateFormat = () => {
+    return DEFAULT_DATE_FORMATS[currentLang] || "DD.MM.YYYY";
+  };
+  const getTimeFormat = () => {
+    return DEFAULT_TIME_FORMATS[currentLang] || "HH:mm:ss";
+  };
+  const getDateTimeFormat = () => {
+    return DEFAULT_DATETIME_FORMATS[currentLang] || "DD.MM.YYYY, HH:mm";
+  };
+  const formatDateTime = (date, customPattern) => {
+    if (!date) return "\u2014";
+    const pattern = customPattern || DEFAULT_DATETIME_FORMATS[currentLang] || "DD.MM.YYYY, HH:mm";
+    return moment(date).locale(currentLang).format(pattern);
+  };
+  const formatDate = (date, customPattern) => {
+    if (!date) return "\u2014";
+    const pattern = customPattern || DEFAULT_DATE_FORMATS[currentLang] || "DD.MM.YYYY";
+    return moment(date).locale(currentLang).format(pattern);
+  };
+  const formatTime = (date, customPattern) => {
+    if (!date) return "\u2014";
+    const pattern = customPattern || DEFAULT_TIME_FORMATS[currentLang] || "HH:mm:ss";
+    return moment(date).locale(currentLang).format(pattern);
+  };
+  const formatRelativeTime = (date, withoutSuffix = false) => {
+    if (!date) return "\u2014";
+    return moment(date).locale(currentLang).fromNow(withoutSuffix);
+  };
+  const changeLanguage2 = async (lang) => {
+    await i18n.changeLanguage(lang);
+  };
+  const value = useMemo2(
+    () => ({
+      currentLang,
+      languages,
+      isLoadingLangs,
+      languagesError,
+      changeLanguage: changeLanguage2,
+      getDateFormat,
+      getTimeFormat,
+      getDateTimeFormat,
+      formatDateTime,
+      formatDate,
+      formatTime,
+      formatRelativeTime
+    }),
+    [currentLang, languages, isLoadingLangs, languagesError]
+  );
+  return /* @__PURE__ */ jsx5(LocalizationContext.Provider, { value, children });
 };
-var useAI = () => {
-  const context = useContext4(AIContext);
+var useLocalization = () => {
+  const context = useContext5(LocalizationContext);
   if (!context) {
-    throw new Error("useAI \u0434\u043E\u043B\u0436\u0435\u043D \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C\u0441\u044F \u0432\u043D\u0443\u0442\u0440\u0438 <AIProvider>");
+    throw new Error("useLocalization must be used within a LocalizationProvider");
   }
   return context;
 };
 
-// src/context/TranslateProvider.tsx
-import { createContext as createContext5, useContext as useContext5 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var TranslationNamespaceContext = createContext5({
-  namespace: "common"
-  // значение по умолчанию
-});
-var TranslateProvider = ({ namespace, children }) => {
-  return /* @__PURE__ */ jsx5(TranslationNamespaceContext.Provider, { value: { namespace }, children });
+// src/context/ThemeProvider.tsx
+import { createContext as createContext6, useContext as useContext6, useMemo as useMemo3, useState as useState4, useEffect as useEffect4 } from "react";
+import { createTheme, ThemeProvider as MuiThemeProvider, CssBaseline, useMediaQuery } from "@mui/material";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+var DEFAULT_LIGHT_COLORS = {
+  primary: "#1976d2",
+  secondary: "#9c27b0",
+  backgroundDefault: "#f5f5f5",
+  backgroundPaper: "#ffffff",
+  textPrimary: "#0f172a",
+  textSecondary: "#475569",
+  success: "#2e7d32",
+  error: "#d32f2f",
+  warning: "#ed6c02",
+  info: "#0288d1"
 };
-var useTranslationNamespace = (overrideNamespace) => {
-  const context = useContext5(TranslationNamespaceContext);
-  return overrideNamespace || context.namespace;
+var DEFAULT_DARK_COLORS = {
+  primary: "#90caf9",
+  secondary: "#ce93d8",
+  backgroundDefault: "#0f172a",
+  backgroundPaper: "#1e293b",
+  textPrimary: "#f8fafc",
+  textSecondary: "#94a3b8",
+  success: "#66bb6a",
+  error: "#f44336",
+  warning: "#ffa726",
+  info: "#29b6f6"
 };
-
-// src/i18n/TranslateText.tsx
-import { useState as useState4, useRef as useRef2, useEffect as useEffect4 } from "react";
-import { useTranslation } from "react-i18next";
-import { Box as Box2, Popper, Paper as Paper2, MenuList, MenuItem, ListItemIcon, ListItemText } from "@mui/material";
-import TranslateIcon2 from "@mui/icons-material/Translate";
-import LaunchIcon from "@mui/icons-material/Launch";
-
-// src/i18n/TranslationDialog.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Button,
-  TextField,
-  Box,
-  Typography,
-  CircularProgress,
-  IconButton,
-  Tooltip,
-  Paper,
-  Alert
-} from "@mui/material";
-import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
-import TranslateIcon from "@mui/icons-material/Translate";
-import LightbulbIcon from "@mui/icons-material/Lightbulb";
-
-// src/services/translation.service.ts
-var translationService = {
-  // 1. Принимаем client первым аргументом
-  incrementVersion: async (client, namespace, langCodes) => {
-    try {
-      const { data } = await client.from("translation_versions").select("version, lang_code").eq("namespace", namespace);
-      const currentVersion = data && data.length > 0 ? Math.max(...data.map((d) => d.version || 0)) : 0;
-      const nextVersion = currentVersion + 1;
-      const languagesToUpdate = langCodes && langCodes.length > 0 ? langCodes : ["uk"];
-      const updates = languagesToUpdate.map((lang_code) => ({
-        namespace,
-        lang_code,
-        version: nextVersion,
-        updated_at: (/* @__PURE__ */ new Date()).toISOString()
-      }));
-      const { error } = await client.from("translation_versions").upsert(updates, { onConflict: "namespace,lang_code" });
-      if (error) console.error("Error updating translation version:", error);
-      return nextVersion;
-    } catch (err) {
-      console.error("Failed to increment version in Supabase:", err);
-      return null;
-    }
+var INITIAL_THEME_CONFIG = {
+  name: "Base MUI Theme",
+  mode: "light",
+  borderRadius: 12,
+  colors: {
+    light: DEFAULT_LIGHT_COLORS,
+    dark: DEFAULT_DARK_COLORS
   },
-  translateSmart: async (client, aiGenerateFn, params) => {
-    const languagesToTranslate = params.targetLangs || (params.targetLang ? [params.targetLang] : []);
-    try {
-      const { data, error } = await client.functions.invoke("translate-smart", { body: params });
-      if (!error && data) return data;
-    } catch {
-      console.warn("Edge Function translate-smart \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C AIProvider...");
-    }
-    if (aiGenerateFn) {
-      const prompt = `Translate the source text into language codes: ${JSON.stringify(languagesToTranslate)}.
-Source Text: "${params.text}"
-${params.contextHint ? `Context Hint: "${params.contextHint}"` : ""}`;
-      const translations = await aiGenerateFn({
-        prompt,
-        systemInstruction: 'Respond STRICTLY with a valid JSON mapping lang code to text. Example: {"en": "Hello"}',
-        jsonMode: true
-      });
-      if (translations) {
-        if (params.targetLang) {
-          return { translatedText: translations[params.targetLang] || params.text };
+  typography: {
+    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+    fontSize: 14,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 600,
+    fontWeightBold: 700
+  }
+};
+var buildMuiTheme = (config) => {
+  const currentMode = config.mode;
+  const currentColors = config.colors?.[currentMode] || (currentMode === "light" ? DEFAULT_LIGHT_COLORS : DEFAULT_DARK_COLORS);
+  return createTheme({
+    palette: {
+      mode: currentMode,
+      primary: {
+        main: currentColors.primary,
+        light: currentMode === "light" ? "#63a4ff" : "#a1d2fa",
+        dark: currentMode === "light" ? "#004ba0" : "#42a5f5"
+      },
+      secondary: {
+        main: currentColors.secondary
+      },
+      background: {
+        default: currentColors.backgroundDefault,
+        paper: currentColors.backgroundPaper
+      },
+      text: {
+        primary: currentColors.textPrimary,
+        secondary: currentColors.textSecondary || (currentMode === "light" ? "#475569" : "#94a3b8")
+      },
+      success: { main: currentColors.success },
+      error: { main: currentColors.error },
+      warning: { main: currentColors.warning },
+      info: { main: currentColors.info }
+    },
+    shape: {
+      borderRadius: config.borderRadius
+    },
+    typography: {
+      fontFamily: config.typography?.fontFamily || INITIAL_THEME_CONFIG.typography.fontFamily,
+      fontSize: config.typography?.fontSize || INITIAL_THEME_CONFIG.typography.fontSize,
+      fontWeightLight: config.typography?.fontWeightLight || INITIAL_THEME_CONFIG.typography.fontWeightLight,
+      fontWeightRegular: config.typography?.fontWeightRegular || INITIAL_THEME_CONFIG.typography.fontWeightRegular,
+      fontWeightMedium: config.typography?.fontWeightMedium || INITIAL_THEME_CONFIG.typography.fontWeightMedium,
+      fontWeightBold: config.typography?.fontWeightBold || INITIAL_THEME_CONFIG.typography.fontWeightBold,
+      h5: { fontWeight: 700, fontSize: "1.25rem" },
+      subtitle1: { fontWeight: 600, fontSize: "0.95rem" },
+      body2: { fontSize: "0.85rem" }
+    },
+    components: {
+      MuiAutocomplete: {
+        defaultProps: {
+          noOptionsText: "\u041D\u0456\u0447\u043E\u0433\u043E \u043D\u0435 \u0437\u043D\u0430\u0439\u0434\u0435\u043D\u043E"
+        }
+      },
+      MuiListItem: {
+        styleOverrides: {
+          root: {
+            transition: "all 0.2s ease-in-out",
+            "&:hover": {
+              backgroundColor: currentMode === "light" ? "#f1f5f9" : "#334155"
+            }
+          }
+        }
+      },
+      MuiListItemButton: {
+        styleOverrides: {
+          root: {
+            transition: "all 0.2s ease-in-out",
+            "&:hover": {
+              backgroundColor: currentMode === "light" ? "#f1f5f9" : "#334155"
+            }
+          }
+        }
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            fontWeight: 600,
+            borderRadius: `${config.borderRadius}px`,
+            padding: "10px 24px",
+            transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+          }
+        }
+      },
+      MuiPaper: {
+        styleOverrides: {
+          rounded: {
+            borderRadius: `${config.borderRadius * 1.25}px`
+          }
         }
-        return { translations };
-      }
-    }
-    if (params.targetLang) {
-      const fallbackUrl = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${params.targetLang}&dt=t&q=${encodeURIComponent(params.text)}`;
-      const res = await fetch(fallbackUrl);
-      if (res.ok) {
-        const data = await res.json();
-        return { translatedText: data[0].map((x) => x[0]).join("") };
       }
     }
-    throw new Error("All translation strategies failed.");
-  }
+  });
 };
-
-// src/i18n/TranslationDialog.tsx
-import { jsx as jsx6, jsxs } from "react/jsx-runtime";
-var TranslationDialog = ({
-  open,
-  onClose,
-  translationKey,
-  namespace,
-  onSave
-}) => {
+var ThemeContext = createContext6(void 0);
+var THEME_STORAGE_KEY = "docsua_custom_theme_config";
+var THEME_MODE_STORAGE_KEY = "docsua_custom_theme_mode";
+var ThemeProvider = ({ children }) => {
   const supabase = useSupabase();
-  const { generate } = useAI();
-  const [languages, setLanguages] = useState3([]);
-  const [values, setValues] = useState3({});
-  const [contextHint, setContextHint] = useState3("");
-  const [loading, setLoading] = useState3(false);
-  const [saving, setSaving] = useState3(false);
-  const [translatingCode, setTranslatingCode] = useState3(null);
-  const [isTranslatingAll, setIsTranslatingAll] = useState3(false);
-  const [error, setError] = useState3(null);
-  useEffect3(() => {
-    if (!open) return;
-    const fetchData = async () => {
-      setLoading(true);
-      setError(null);
+  const { user, isAuthenticated, loading: isAuthLoading } = useAuth();
+  const userId = user?.id;
+  const [themeConfig, setThemeConfig] = useState4(() => {
+    const saved = localStorage.getItem(THEME_STORAGE_KEY);
+    if (saved) {
       try {
-        const { data: langs, error: langErr } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
-        if (langErr) throw langErr;
-        setLanguages(langs || []);
-        const { data: trans, error: transErr } = await supabase.from("translations").select("lang_code, value, context_hint").eq("namespace", namespace).eq("key", translationKey);
-        if (transErr) throw transErr;
-        const initialValues = {};
-        let existingHint = "";
-        langs?.forEach((l) => {
-          const found = trans?.find((t2) => t2.lang_code === l.code);
-          initialValues[l.code] = found ? found.value : "";
-          if (found?.context_hint) {
-            existingHint = found.context_hint;
-          }
-        });
-        setValues(initialValues);
-        setContextHint(existingHint);
-      } catch (err) {
-        console.error("Failed to load translations:", err);
-        setError(err?.message || "Failed to load initial translation data.");
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchData();
-  }, [open, translationKey, namespace]);
-  const handleAutoTranslate = async (e, targetLang) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setError(null);
-    setTranslatingCode(targetLang);
-    try {
-      const res = await translationService.translateSmart(supabase, generate, {
-        text: translationKey,
-        targetLang,
-        contextHint
-      });
-      if (res?.translatedText) {
-        setValues((prev) => ({ ...prev, [targetLang]: res.translatedText }));
+        return JSON.parse(saved);
+      } catch (e) {
       }
-    } catch (err) {
-      console.log(err);
-      setError(`Failed to translate into ${targetLang}. ${err?.message || ""}`);
-    } finally {
-      setTranslatingCode(null);
     }
-  };
-  const handleTranslateAll = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!translationKey || languages.length === 0) return;
-    setIsTranslatingAll(true);
-    setError(null);
-    try {
-      const targetLangs = languages.map((l) => l.code);
-      const res = await translationService.translateSmart(supabase, generate, {
-        text: translationKey,
-        targetLangs,
-        contextHint
-      });
-      if (res?.translations) {
-        setValues((prev) => ({ ...prev, ...res.translations }));
-      }
-    } catch (err) {
-      console.error("Batch translation error:", err);
-      setError(err?.message || "Failed to translate all languages.");
-    } finally {
-      setIsTranslatingAll(false);
+    return INITIAL_THEME_CONFIG;
+  });
+  useEffect4(() => {
+    if (isAuthLoading) return;
+    if (isAuthenticated && userId) {
+      const fetchActiveTheme = async () => {
+        try {
+          const { data, error } = await supabase.from("user_themes").select("*").eq("user_id", userId).eq("is_active", true).maybeSingle();
+          if (error) {
+            console.error("\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0435 \u0442\u0435\u043C\u044B \u0438\u0437 Supabase:", error.message);
+            return;
+          }
+          if (data) {
+            const activeTheme = data;
+            const savedMode = localStorage.getItem(THEME_MODE_STORAGE_KEY);
+            setThemeConfig({
+              id: activeTheme.id,
+              name: activeTheme.name || INITIAL_THEME_CONFIG.name,
+              mode: savedMode || activeTheme.config?.mode || "light",
+              borderRadius: activeTheme.config?.borderRadius ?? INITIAL_THEME_CONFIG.borderRadius,
+              colors: activeTheme.config?.colors || INITIAL_THEME_CONFIG.colors,
+              typography: activeTheme.config?.typography || INITIAL_THEME_CONFIG.typography,
+              updatedAt: activeTheme.updated_at || void 0
+            });
+          }
+        } catch (err) {
+          console.error("\u041D\u0435\u043F\u0440\u0435\u0434\u0432\u0438\u0434\u0435\u043D\u043D\u0430\u044F \u043E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438 \u0437\u0430\u043F\u0440\u043E\u0441\u0435 \u0442\u0435\u043C\u044B:", err);
+        }
+      };
+      fetchActiveTheme();
+    } else {
+      setThemeConfig(INITIAL_THEME_CONFIG);
+      localStorage.removeItem(THEME_STORAGE_KEY);
+      localStorage.removeItem(THEME_MODE_STORAGE_KEY);
     }
-  };
-  const handleSaveAll = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setSaving(true);
-    setError(null);
-    try {
-      await onSave(values, contextHint);
-      onClose();
-    } catch (err) {
-      console.error("Failed to save translations:", err);
-      setError(err?.message || "Failed to save translations. Please try again.");
-    } finally {
-      setSaving(false);
+  }, [isAuthenticated, isAuthLoading, userId]);
+  useEffect4(() => {
+    if (isAuthenticated) {
+      localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(themeConfig));
+      localStorage.setItem(THEME_MODE_STORAGE_KEY, themeConfig.mode);
     }
+  }, [themeConfig, isAuthenticated]);
+  const mode = themeConfig.mode;
+  const setMode = (newMode) => {
+    setThemeConfig((prev) => ({ ...prev, mode: newMode }));
   };
-  const handleClose = (_, reason) => {
-    if (reason === "backdropClick" && isBusy) return;
-    setError(null);
-    onClose();
+  const toggleTheme = () => {
+    setMode(mode === "light" ? "dark" : "light");
   };
-  const isBusy = loading || saving || isTranslatingAll || translatingCode !== null;
-  return /* @__PURE__ */ jsxs(
-    Dialog,
-    {
-      open,
-      onClose: handleClose,
-      fullWidth: true,
-      maxWidth: "sm",
-      onClick: (e) => e.stopPropagation(),
-      onMouseDown: (e) => e.stopPropagation(),
-      children: [
-        /* @__PURE__ */ jsxs(DialogTitle, { sx: { pb: 1, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
-          /* @__PURE__ */ jsxs(Box, { children: [
-            "Context Translation",
-            /* @__PURE__ */ jsxs(Typography, { component: "div", variant: "subtitle2", color: "text.secondary", sx: { wordBreak: "break-all", mt: 0.5 }, children: [
-              "Original: ",
-              /* @__PURE__ */ jsxs("strong", { children: [
-                '"',
-                translationKey,
-                '"'
-              ] })
-            ] })
-          ] }),
-          !loading && /* @__PURE__ */ jsx6(
-            Button,
-            {
-              type: "button",
-              size: "small",
-              variant: "outlined",
-              color: "secondary",
-              startIcon: isTranslatingAll ? /* @__PURE__ */ jsx6(CircularProgress, { size: 16, color: "inherit" }) : /* @__PURE__ */ jsx6(TranslateIcon, { fontSize: "small" }),
-              onClick: handleTranslateAll,
-              disabled: isBusy,
-              sx: { flexShrink: 0, ml: 2, whiteSpace: "nowrap" },
-              children: isTranslatingAll ? "Translating..." : "Translate All"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(DialogContent, { dividers: true, sx: { pt: 2 }, children: [
-          error && /* @__PURE__ */ jsx6(Alert, { severity: "error", onClose: () => setError(null), sx: { mb: 2 }, children: error }),
-          loading ? /* @__PURE__ */ jsx6(Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ jsx6(CircularProgress, {}) }) : /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [
-            /* @__PURE__ */ jsxs(Paper, { variant: "outlined", sx: { p: 2, bgcolor: "action.hover", borderRadius: 2 }, children: [
-              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
-                /* @__PURE__ */ jsx6(LightbulbIcon, { color: "warning", fontSize: "small" }),
-                /* @__PURE__ */ jsx6(Typography, { variant: "subtitle2", sx: { fontWeight: 600 }, children: "Context Hint / Clarification" })
-              ] }),
-              /* @__PURE__ */ jsx6(
-                TextField,
-                {
-                  fullWidth: true,
-                  multiline: true,
-                  rows: 2,
-                  size: "small",
-                  value: contextHint,
-                  onChange: (e) => setContextHint(e.target.value),
-                  placeholder: "e.g. Website navigation menu link to the home page",
-                  helperText: "This hint explains the exact meaning to AI translation models.",
-                  disabled: isBusy
-                }
-              )
-            ] }),
-            languages.map((lang) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
-              /* @__PURE__ */ jsx6(
-                Box,
-                {
-                  sx: {
-                    width: 32,
-                    height: 22,
-                    flexShrink: 0,
-                    borderRadius: "4px",
-                    overflow: "hidden",
-                    boxShadow: 1,
-                    "& svg": { width: "100%", height: "100%", display: "block" }
-                  },
-                  dangerouslySetInnerHTML: { __html: lang.svg_flag }
-                }
-              ),
-              /* @__PURE__ */ jsx6(
-                TextField,
-                {
-                  fullWidth: true,
-                  label: lang.name,
-                  size: "small",
-                  value: values[lang.code] || "",
-                  onChange: (e) => setValues((prev) => ({ ...prev, [lang.code]: e.target.value })),
-                  placeholder: "Enter manual translation...",
-                  disabled: isBusy
-                }
-              ),
-              /* @__PURE__ */ jsx6(Tooltip, { title: "Translate with context hint", children: /* @__PURE__ */ jsx6("span", { children: /* @__PURE__ */ jsx6(
-                IconButton,
-                {
-                  type: "button",
-                  color: "primary",
-                  disabled: isBusy,
-                  onClick: (e) => handleAutoTranslate(e, lang.code),
-                  children: translatingCode === lang.code ? /* @__PURE__ */ jsx6(CircularProgress, { size: 20, color: "inherit" }) : /* @__PURE__ */ jsx6(AutoFixHighIcon, { fontSize: "small" })
-                }
-              ) }) })
-            ] }, lang.code))
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(DialogActions, { sx: { px: 3, py: 2 }, children: [
-          /* @__PURE__ */ jsx6(Button, { onClick: onClose, disabled: isBusy, color: "inherit", type: "button", children: "Cancel" }),
-          /* @__PURE__ */ jsx6(
-            Button,
-            {
-              onClick: handleSaveAll,
-              variant: "contained",
-              disabled: isBusy,
-              type: "button",
-              children: saving ? "Saving..." : "Save All"
-            }
-          )
-        ] })
-      ]
-    }
-  );
+  const theme = useMemo3(() => buildMuiTheme(themeConfig), [themeConfig]);
+  const displayState = {
+    isMobile: useMediaQuery(theme.breakpoints.down("sm")),
+    isTablet: useMediaQuery(theme.breakpoints.between("sm", "md")),
+    isDesktop: useMediaQuery(theme.breakpoints.between("md", "lg")),
+    isWideDesktop: useMediaQuery(theme.breakpoints.between("lg", "xl")),
+    isSuperWideDesktop: useMediaQuery(theme.breakpoints.up("xl"))
+  };
+  return /* @__PURE__ */ jsx6(ThemeContext.Provider, { value: { mode, toggleTheme, setMode, theme, themeConfig, setThemeConfig, displayState }, children: /* @__PURE__ */ jsxs(MuiThemeProvider, { theme, children: [
+    /* @__PURE__ */ jsx6(CssBaseline, {}),
+    children
+  ] }) });
+};
+var useAppTheme = () => {
+  const context = useContext6(ThemeContext);
+  if (!context) {
+    throw new Error("useAppTheme should be used within the ThemeProvider");
+  }
+  return context;
 };
 
-// src/i18n/TranslateText.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-var TranslateText = ({
-  overrideNamespace,
-  children,
-  values
-}) => {
-  const namespace = useTranslationNamespace(overrideNamespace);
-  const { t: t2, i18n } = useTranslation(namespace);
-  const { isTranslationMode, canEdit } = useTranslationEdit();
-  const supabase = useSupabase();
-  const [anchorEl, setAnchorEl] = useState4(null);
-  const [isDialogOpen, setIsDialogOpen] = useState4(false);
-  const timeoutRef = useRef2(null);
-  const translatedValue = t2(children, values);
-  useEffect4(() => {
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
-  if (!canEdit || !isTranslationMode) {
-    return /* @__PURE__ */ jsx7(Fragment, { children: translatedValue });
+// src/context/BreadcrumbProvider.tsx
+import { createContext as createContext7, useContext as useContext7, useState as useState5 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var BreadcrumbContext = createContext7({
+  breadcrumbTitles: {},
+  setBreadcrumbTitle: () => {
   }
-  const handleSaveTranslations = async (newValues, contextHint) => {
-    const upsertData = Object.entries(newValues).map(([langCode, text]) => ({
-      lang_code: langCode,
-      namespace,
-      key: children,
-      value: text,
-      context_hint: contextHint
-    }));
-    const { error } = await supabase.from("translations").upsert(upsertData, { onConflict: "lang_code,namespace,key" });
-    if (error) {
-      alert("\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0438 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043D\u043D\u044B\u0445");
-      throw error;
-    }
-    await translationService.incrementVersion(supabase, namespace, Object.keys(newValues));
-    Object.entries(newValues).forEach(([langCode, text]) => {
-      i18n.addResource(langCode, namespace, children, text);
+});
+var BreadcrumbProvider = ({ children }) => {
+  const [breadcrumbTitles, setBreadcrumbTitles] = useState5({});
+  const setBreadcrumbTitle = (path, title) => {
+    setBreadcrumbTitles((prev) => {
+      if (prev[path] === title) return prev;
+      return { ...prev, [path]: title };
     });
   };
-  const handleMouseEnter = (event) => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    setAnchorEl(event.currentTarget);
-  };
-  const handleMouseLeave = () => {
-    timeoutRef.current = setTimeout(() => {
-      setAnchorEl(null);
-    }, 200);
-  };
-  const handleOpenDialog = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setAnchorEl(null);
-    if (document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
-    setIsDialogOpen(true);
-  };
-  const handleLaunchAction = (_) => {
-    setAnchorEl(null);
-  };
-  const open = Boolean(anchorEl);
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx7(
-      Box2,
-      {
-        component: "span",
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        },
-        sx: {
-          display: "inline-block",
-          position: "relative",
-          borderRadius: "4px",
-          padding: "0 3px",
-          margin: "0 1px",
-          border: "1px dashed #f59e0b",
-          backgroundColor: "rgba(254, 243, 199, 0.35)",
-          cursor: "pointer",
-          transition: "all 0.2s ease-in-out",
-          userSelect: "none",
-          "&:hover": {
-            backgroundColor: "#fef08a",
-            borderColor: "#d97706",
-            boxShadow: "0 0 0 2px rgba(245, 158, 11, 0.35)",
-            transform: "scale(1.02)"
-          }
-        },
-        children: translatedValue
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      Popper,
+  return /* @__PURE__ */ jsx7(BreadcrumbContext.Provider, { value: { breadcrumbTitles, setBreadcrumbTitle }, children });
+};
+var useBreadcrumb = () => useContext7(BreadcrumbContext);
+
+// src/context/ToastProvider.tsx
+import { createContext as createContext8, useContext as useContext8, useState as useState6, useCallback as useCallback3, useMemo as useMemo4 } from "react";
+import { Snackbar, Alert } from "@mui/material";
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+var ToastContext = createContext8(void 0);
+var ToastProvider = ({ children }) => {
+  const [toast, setToast] = useState6(null);
+  const showToast = useCallback3((text, type = "info") => {
+    setToast({ text, type });
+  }, []);
+  const hideToast = useCallback3(() => {
+    setToast(null);
+  }, []);
+  const contextValue = useMemo4(() => ({
+    showToast,
+    hideToast
+  }), [showToast, hideToast]);
+  return /* @__PURE__ */ jsxs2(ToastContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx8(
+      Snackbar,
       {
-        open,
-        anchorEl,
-        placement: "bottom-start",
-        style: { zIndex: 1300 },
-        children: /* @__PURE__ */ jsx7(
-          Paper2,
+        open: Boolean(toast),
+        autoHideDuration: 3500,
+        onClose: hideToast,
+        anchorOrigin: { vertical: "bottom", horizontal: "center" },
+        children: /* @__PURE__ */ jsx8(
+          Alert,
           {
-            elevation: 4,
-            onMouseEnter: () => {
-              if (timeoutRef.current) clearTimeout(timeoutRef.current);
-            },
-            onMouseLeave: handleMouseLeave,
-            sx: {
-              mt: 0.5,
-              borderRadius: 2,
-              minWidth: 140,
-              boxShadow: "0px 10px 15px -3px rgba(0,0,0,0.1)"
-            },
-            children: /* @__PURE__ */ jsxs2(MenuList, { dense: true, sx: { py: 0.5 }, children: [
-              /* @__PURE__ */ jsxs2(MenuItem, { onClick: handleOpenDialog, sx: { py: 0.8, px: 1.5 }, children: [
-                /* @__PURE__ */ jsx7(ListItemIcon, { sx: { minWidth: "28px !important" }, children: /* @__PURE__ */ jsx7(TranslateIcon2, { fontSize: "small", sx: { color: "#d97706" } }) }),
-                /* @__PURE__ */ jsx7(
-                  ListItemText,
-                  {
-                    primary: "Localization",
-                    slotProps: {
-                      primary: {
-                        sx: {
-                          fontSize: "0.825rem",
-                          fontWeight: 600,
-                          color: "text.primary"
-                        }
-                      }
-                    }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs2(MenuItem, { onClick: handleLaunchAction, sx: { py: 0.8, px: 1.5 }, children: [
-                /* @__PURE__ */ jsx7(ListItemIcon, { sx: { minWidth: "28px !important" }, children: /* @__PURE__ */ jsx7(LaunchIcon, { fontSize: "small", color: "secondary" }) }),
-                /* @__PURE__ */ jsx7(
-                  ListItemText,
-                  {
-                    primary: "Launch action",
-                    slotProps: {
-                      primary: {
-                        sx: {
-                          fontSize: "0.825rem",
-                          fontWeight: 600,
-                          color: "text.primary"
-                        }
-                      }
-                    }
-                  }
-                )
-              ] })
-            ] })
+            severity: toast?.type || "info",
+            variant: "filled",
+            onClose: hideToast,
+            children: toast?.text
           }
         )
       }
-    ),
-    /* @__PURE__ */ jsx7("span", { style: { display: "inline" }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx7(
-      TranslationDialog,
-      {
-        open: isDialogOpen,
-        onClose: () => setIsDialogOpen(false),
-        translationKey: children,
-        namespace,
-        onSave: handleSaveTranslations
-      }
-    ) })
+    )
   ] });
 };
+var useToast = () => {
+  const context = useContext8(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
 
-// src/UI/components/data.display/TranslatableTooltipComponent.tsx
-import { Tooltip as Tooltip2 } from "@mui/material";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var TranslatableTooltipComponent = ({
-  overrideNamespace,
-  title,
-  disableSpan,
-  children,
-  ...props
-}) => {
-  const { isTranslationMode } = useTranslationEdit();
-  return /* @__PURE__ */ jsx8(
-    Tooltip2,
-    {
-      title: typeof title === "string" ? /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace, children: title }) : title,
-      slotProps: {
-        popper: {
-          sx: isTranslationMode ? {
-            pointerEvents: "auto",
-            // Разрешаем клики внутри тултипа
-            "& .MuiTooltip-tooltip": {
-              pointerEvents: "auto"
-            }
-          } : void 0
+// src/context/ConfirmationProvider.tsx
+import { createContext as createContext10, useContext as useContext10, useState as useState9, useCallback as useCallback4 } from "react";
+import {
+  Button as Button2,
+  Dialog as Dialog2,
+  DialogActions as DialogActions2,
+  DialogContent as DialogContent2,
+  DialogContentText,
+  DialogTitle as DialogTitle2,
+  Box as Box3
+} from "@mui/material";
+import {
+  Error as ErrorIcon,
+  WarningAmberOutlined as WarningIcon,
+  InfoOutlined as InfoIcon,
+  CheckCircleOutlined as SuccessIcon
+} from "@mui/icons-material";
+
+// src/i18n/TranslateText.tsx
+import { useState as useState8, useRef as useRef2, useEffect as useEffect6 } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { Box as Box2, Popper, Paper as Paper2, MenuList, MenuItem, ListItemIcon, ListItemText } from "@mui/material";
+import TranslateIcon2 from "@mui/icons-material/Translate";
+import LaunchIcon from "@mui/icons-material/Launch";
+
+// src/i18n/TranslationDialog.tsx
+import { useEffect as useEffect5, useState as useState7 } from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  Box,
+  Typography,
+  CircularProgress,
+  IconButton,
+  Tooltip,
+  Paper,
+  Alert as Alert2
+} from "@mui/material";
+import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
+import TranslateIcon from "@mui/icons-material/Translate";
+import LightbulbIcon from "@mui/icons-material/Lightbulb";
+
+// src/services/translation.service.ts
+var translationService = {
+  // 1. Принимаем client первым аргументом
+  incrementVersion: async (client, namespace, langCodes) => {
+    try {
+      const { data } = await client.from("translation_versions").select("version, lang_code").eq("namespace", namespace);
+      const currentVersion = data && data.length > 0 ? Math.max(...data.map((d) => d.version || 0)) : 0;
+      const nextVersion = currentVersion + 1;
+      const languagesToUpdate = langCodes && langCodes.length > 0 ? langCodes : ["uk"];
+      const updates = languagesToUpdate.map((lang_code) => ({
+        namespace,
+        lang_code,
+        version: nextVersion,
+        updated_at: (/* @__PURE__ */ new Date()).toISOString()
+      }));
+      const { error } = await client.from("translation_versions").upsert(updates, { onConflict: "namespace,lang_code" });
+      if (error) console.error("Error updating translation version:", error);
+      return nextVersion;
+    } catch (err) {
+      console.error("Failed to increment version in Supabase:", err);
+      return null;
+    }
+  },
+  translateSmart: async (client, aiGenerateFn, params) => {
+    const languagesToTranslate = params.targetLangs || (params.targetLang ? [params.targetLang] : []);
+    try {
+      const { data, error } = await client.functions.invoke("translate-smart", { body: params });
+      if (!error && data) return data;
+    } catch {
+      console.warn("Edge Function translate-smart \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C AIProvider...");
+    }
+    if (aiGenerateFn) {
+      const prompt = `Translate the source text into language codes: ${JSON.stringify(languagesToTranslate)}.
+Source Text: "${params.text}"
+${params.contextHint ? `Context Hint: "${params.contextHint}"` : ""}`;
+      const translations = await aiGenerateFn({
+        prompt,
+        systemInstruction: 'Respond STRICTLY with a valid JSON mapping lang code to text. Example: {"en": "Hello"}',
+        jsonMode: true
+      });
+      if (translations) {
+        if (params.targetLang) {
+          return { translatedText: translations[params.targetLang] || params.text };
         }
-      },
-      leaveDelay: isTranslationMode ? 1e3 : 100,
-      ...props,
-      children: disableSpan ? children : /* @__PURE__ */ jsx8("span", { children })
+        return { translations };
+      }
     }
-  );
+    if (params.targetLang) {
+      const fallbackUrl = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${params.targetLang}&dt=t&q=${encodeURIComponent(params.text)}`;
+      const res = await fetch(fallbackUrl);
+      if (res.ok) {
+        const data = await res.json();
+        return { translatedText: data[0].map((x) => x[0]).join("") };
+      }
+    }
+    throw new Error("All translation strategies failed.");
+  }
 };
 
-// src/context/LocalizationProvider.tsx
-import { createContext as createContext6, useContext as useContext6, useMemo as useMemo3, useEffect as useEffect5, useState as useState5 } from "react";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import moment from "moment/min/moment-with-locales";
+// src/context/AIProvider.tsx
+import { createContext as createContext9, useContext as useContext9, useMemo as useMemo5 } from "react";
+import { GoogleGenAI } from "@google/genai";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var DEFAULT_DATETIME_FORMATS = {
-  uk: "DD.MM.YYYY, HH:mm",
-  de: "DD.MM.YYYY, HH:mm",
-  en: "MM/DD/YYYY, hh:mm A",
-  es: "DD/MM/YYYY, HH:mm",
-  fr: "DD/MM/YYYY, HH:mm",
-  it: "DD/MM/YYYY, HH:mm"
-};
-var DEFAULT_DATE_FORMATS = {
-  uk: "DD.MM.YYYY",
-  de: "DD.MM.YYYY",
-  en: "MM/DD/YYYY",
-  es: "DD/MM/YYYY",
-  fr: "DD/MM/YYYY",
-  it: "DD/MM/YYYY"
+var AIContext = createContext9(null);
+var AIProvider = ({
+  children,
+  config,
+  apiKey: directApiKey
+}) => {
+  const apiKey = directApiKey || config?.apiKey;
+  const provider = config?.provider || "gemini";
+  const modelName = config?.modelName || (provider === "gemini" ? "gemini-2.5-flash" : "gpt-4o-mini");
+  const contextValue = useMemo5(() => {
+    return {
+      apiKey,
+      provider,
+      modelName,
+      generate: async ({
+        prompt,
+        systemInstruction,
+        jsonMode = false,
+        temperature
+      }) => {
+        if (!apiKey) {
+          console.warn("[AIProvider]: API Key \u043D\u0435 \u0437\u0430\u0434\u0430\u043D.");
+          return null;
+        }
+        if (provider === "gemini") {
+          try {
+            const ai = new GoogleGenAI({ apiKey });
+            const response = await ai.models.generateContent({
+              model: modelName,
+              contents: prompt,
+              config: {
+                systemInstruction,
+                temperature,
+                responseMimeType: jsonMode ? "application/json" : "text/plain"
+              }
+            });
+            const rawText = response.text?.trim() || "";
+            if (jsonMode) {
+              const cleanedText = rawText.replace(/^```(?:json)?\s*/i, "").replace(/\s*```$/, "").trim();
+              return JSON.parse(cleanedText);
+            }
+            return rawText;
+          } catch (err) {
+            console.error("[AIProvider Gemini Error]:", err);
+            return null;
+          }
+        }
+        if (provider === "openai") {
+          try {
+            const messages = [];
+            if (systemInstruction) {
+              messages.push({ role: "system", content: systemInstruction });
+            }
+            messages.push({ role: "user", content: prompt });
+            const res = await fetch("https://api.openai.com/v1/chat/completions", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${apiKey}`
+              },
+              body: JSON.stringify({
+                model: modelName,
+                messages,
+                temperature,
+                ...jsonMode ? { response_format: { type: "json_object" } } : {}
+              })
+            });
+            const data = await res.json();
+            const content = data.choices?.[0]?.message?.content?.trim() || "";
+            if (jsonMode) {
+              return JSON.parse(content);
+            }
+            return content;
+          } catch (err) {
+            console.error("[AIProvider OpenAI Error]:", err);
+            return null;
+          }
+        }
+        return null;
+      }
+    };
+  }, [apiKey, provider, modelName]);
+  return /* @__PURE__ */ jsx9(AIContext.Provider, { value: contextValue, children });
 };
-var DEFAULT_TIME_FORMATS = {
-  uk: "HH:mm:ss",
-  de: "HH:mm:ss",
-  en: "hh:mm:ss A",
-  es: "HH:mm:ss",
-  fr: "HH:mm:ss",
-  it: "HH:mm:ss"
+var useAI = () => {
+  const context = useContext9(AIContext);
+  if (!context) {
+    throw new Error("useAI \u0434\u043E\u043B\u0436\u0435\u043D \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C\u0441\u044F \u0432\u043D\u0443\u0442\u0440\u0438 <AIProvider>");
+  }
+  return context;
 };
-var LocalizationContext = createContext6(void 0);
-var LocalizationProvider = ({ children }) => {
+
+// src/i18n/TranslationDialog.tsx
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var TranslationDialog = ({
+  open,
+  onClose,
+  translationKey,
+  namespace,
+  onSave
+}) => {
   const supabase = useSupabase();
-  const { i18n } = useTranslation2();
-  const [languages, setLanguages] = useState5([]);
-  const [isLoadingLangs, setIsLoadingLangs] = useState5(true);
-  const [languagesError, setLanguagesError] = useState5(null);
+  const { generate } = useAI();
+  const [languages, setLanguages] = useState7([]);
+  const [values, setValues] = useState7({});
+  const [contextHint, setContextHint] = useState7("");
+  const [loading, setLoading] = useState7(false);
+  const [saving, setSaving] = useState7(false);
+  const [translatingCode, setTranslatingCode] = useState7(null);
+  const [isTranslatingAll, setIsTranslatingAll] = useState7(false);
+  const [error, setError] = useState7(null);
   useEffect5(() => {
-    let isMounted = true;
-    const fetchLanguages = async () => {
+    if (!open) return;
+    const fetchData = async () => {
+      setLoading(true);
+      setError(null);
       try {
-        setIsLoadingLangs(true);
-        setLanguagesError(null);
-        const { data: langs, error: langErr } = await supabase.from("languages").select("code, name, svg_flag, enabled, created_at").eq("enabled", true).order("code", { ascending: true });
-        if (langErr) {
-          throw langErr;
-        }
-        if (isMounted && langs) {
-          setLanguages(langs);
-        }
+        const { data: langs, error: langErr } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (langErr) throw langErr;
+        setLanguages(langs || []);
+        const { data: trans, error: transErr } = await supabase.from("translations").select("lang_code, value, context_hint").eq("namespace", namespace).eq("key", translationKey);
+        if (transErr) throw transErr;
+        const initialValues = {};
+        let existingHint = "";
+        langs?.forEach((l) => {
+          const found = trans?.find((t2) => t2.lang_code === l.code);
+          initialValues[l.code] = found ? found.value : "";
+          if (found?.context_hint) {
+            existingHint = found.context_hint;
+          }
+        });
+        setValues(initialValues);
+        setContextHint(existingHint);
       } catch (err) {
-        console.error("Failed to load languages from Supabase:", err);
-        if (isMounted) {
-          setLanguagesError(err.message || "Error loading languages");
-        }
+        console.error("Failed to load translations:", err);
+        setError(err?.message || "Failed to load initial translation data.");
       } finally {
-        if (isMounted) {
-          setIsLoadingLangs(false);
-        }
+        setLoading(false);
       }
     };
-    fetchLanguages();
-    return () => {
-      isMounted = false;
-    };
-  }, [supabase]);
-  const rawLang = i18n.language || "uk";
-  const currentLang = rawLang.split("-")[0].toLowerCase();
-  const getDateFormat = () => {
-    return DEFAULT_DATE_FORMATS[currentLang] || "DD.MM.YYYY";
-  };
-  const getTimeFormat = () => {
-    return DEFAULT_TIME_FORMATS[currentLang] || "HH:mm:ss";
-  };
-  const getDateTimeFormat = () => {
-    return DEFAULT_DATETIME_FORMATS[currentLang] || "DD.MM.YYYY, HH:mm";
-  };
-  const formatDateTime = (date, customPattern) => {
-    if (!date) return "\u2014";
-    const pattern = customPattern || DEFAULT_DATETIME_FORMATS[currentLang] || "DD.MM.YYYY, HH:mm";
-    return moment(date).locale(currentLang).format(pattern);
-  };
-  const formatDate = (date, customPattern) => {
-    if (!date) return "\u2014";
-    const pattern = customPattern || DEFAULT_DATE_FORMATS[currentLang] || "DD.MM.YYYY";
-    return moment(date).locale(currentLang).format(pattern);
+    fetchData();
+  }, [open, translationKey, namespace]);
+  const handleAutoTranslate = async (e, targetLang) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setError(null);
+    setTranslatingCode(targetLang);
+    try {
+      const res = await translationService.translateSmart(supabase, generate, {
+        text: translationKey,
+        targetLang,
+        contextHint
+      });
+      if (res?.translatedText) {
+        setValues((prev) => ({ ...prev, [targetLang]: res.translatedText }));
+      }
+    } catch (err) {
+      console.log(err);
+      setError(`Failed to translate into ${targetLang}. ${err?.message || ""}`);
+    } finally {
+      setTranslatingCode(null);
+    }
   };
-  const formatTime = (date, customPattern) => {
-    if (!date) return "\u2014";
-    const pattern = customPattern || DEFAULT_TIME_FORMATS[currentLang] || "HH:mm:ss";
-    return moment(date).locale(currentLang).format(pattern);
+  const handleTranslateAll = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!translationKey || languages.length === 0) return;
+    setIsTranslatingAll(true);
+    setError(null);
+    try {
+      const targetLangs = languages.map((l) => l.code);
+      const res = await translationService.translateSmart(supabase, generate, {
+        text: translationKey,
+        targetLangs,
+        contextHint
+      });
+      if (res?.translations) {
+        setValues((prev) => ({ ...prev, ...res.translations }));
+      }
+    } catch (err) {
+      console.error("Batch translation error:", err);
+      setError(err?.message || "Failed to translate all languages.");
+    } finally {
+      setIsTranslatingAll(false);
+    }
   };
-  const formatRelativeTime = (date, withoutSuffix = false) => {
-    if (!date) return "\u2014";
-    return moment(date).locale(currentLang).fromNow(withoutSuffix);
+  const handleSaveAll = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setSaving(true);
+    setError(null);
+    try {
+      await onSave(values, contextHint);
+      onClose();
+    } catch (err) {
+      console.error("Failed to save translations:", err);
+      setError(err?.message || "Failed to save translations. Please try again.");
+    } finally {
+      setSaving(false);
+    }
   };
-  const changeLanguage2 = async (lang) => {
-    await i18n.changeLanguage(lang);
+  const handleClose = (_, reason) => {
+    if (reason === "backdropClick" && isBusy) return;
+    setError(null);
+    onClose();
   };
-  const value = useMemo3(
-    () => ({
-      currentLang,
-      languages,
-      isLoadingLangs,
-      languagesError,
-      changeLanguage: changeLanguage2,
-      getDateFormat,
-      getTimeFormat,
-      getDateTimeFormat,
-      formatDateTime,
-      formatDate,
-      formatTime,
-      formatRelativeTime
-    }),
-    [currentLang, languages, isLoadingLangs, languagesError]
-  );
-  return /* @__PURE__ */ jsx9(LocalizationContext.Provider, { value, children });
-};
-var useLocalization = () => {
-  const context = useContext6(LocalizationContext);
-  if (!context) {
-    throw new Error("useLocalization must be used within a LocalizationProvider");
-  }
-  return context;
-};
-
-// src/context/ThemeProvider.tsx
-import { createContext as createContext7, useContext as useContext7, useMemo as useMemo4, useState as useState6, useEffect as useEffect6 } from "react";
-import { createTheme, ThemeProvider as MuiThemeProvider, CssBaseline, useMediaQuery } from "@mui/material";
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
-var DEFAULT_LIGHT_COLORS = {
-  primary: "#1976d2",
-  secondary: "#9c27b0",
-  backgroundDefault: "#f5f5f5",
-  backgroundPaper: "#ffffff",
-  textPrimary: "#0f172a",
-  textSecondary: "#475569",
-  success: "#2e7d32",
-  error: "#d32f2f",
-  warning: "#ed6c02",
-  info: "#0288d1"
-};
-var DEFAULT_DARK_COLORS = {
-  primary: "#90caf9",
-  secondary: "#ce93d8",
-  backgroundDefault: "#0f172a",
-  backgroundPaper: "#1e293b",
-  textPrimary: "#f8fafc",
-  textSecondary: "#94a3b8",
-  success: "#66bb6a",
-  error: "#f44336",
-  warning: "#ffa726",
-  info: "#29b6f6"
-};
-var INITIAL_THEME_CONFIG = {
-  name: "Base MUI Theme",
-  mode: "light",
-  borderRadius: 12,
-  colors: {
-    light: DEFAULT_LIGHT_COLORS,
-    dark: DEFAULT_DARK_COLORS
-  },
-  typography: {
-    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
-    fontSize: 14,
-    fontWeightLight: 300,
-    fontWeightRegular: 400,
-    fontWeightMedium: 600,
-    fontWeightBold: 700
-  }
-};
-var buildMuiTheme = (config) => {
-  const currentMode = config.mode;
-  const currentColors = config.colors?.[currentMode] || (currentMode === "light" ? DEFAULT_LIGHT_COLORS : DEFAULT_DARK_COLORS);
-  return createTheme({
-    palette: {
-      mode: currentMode,
-      primary: {
-        main: currentColors.primary,
-        light: currentMode === "light" ? "#63a4ff" : "#a1d2fa",
-        dark: currentMode === "light" ? "#004ba0" : "#42a5f5"
-      },
-      secondary: {
-        main: currentColors.secondary
-      },
-      background: {
-        default: currentColors.backgroundDefault,
-        paper: currentColors.backgroundPaper
-      },
-      text: {
-        primary: currentColors.textPrimary,
-        secondary: currentColors.textSecondary || (currentMode === "light" ? "#475569" : "#94a3b8")
-      },
-      success: { main: currentColors.success },
-      error: { main: currentColors.error },
-      warning: { main: currentColors.warning },
-      info: { main: currentColors.info }
-    },
-    shape: {
-      borderRadius: config.borderRadius
-    },
-    typography: {
-      fontFamily: config.typography?.fontFamily || INITIAL_THEME_CONFIG.typography.fontFamily,
-      fontSize: config.typography?.fontSize || INITIAL_THEME_CONFIG.typography.fontSize,
-      fontWeightLight: config.typography?.fontWeightLight || INITIAL_THEME_CONFIG.typography.fontWeightLight,
-      fontWeightRegular: config.typography?.fontWeightRegular || INITIAL_THEME_CONFIG.typography.fontWeightRegular,
-      fontWeightMedium: config.typography?.fontWeightMedium || INITIAL_THEME_CONFIG.typography.fontWeightMedium,
-      fontWeightBold: config.typography?.fontWeightBold || INITIAL_THEME_CONFIG.typography.fontWeightBold,
-      h5: { fontWeight: 700, fontSize: "1.25rem" },
-      subtitle1: { fontWeight: 600, fontSize: "0.95rem" },
-      body2: { fontSize: "0.85rem" }
-    },
-    components: {
-      MuiAutocomplete: {
-        defaultProps: {
-          noOptionsText: "\u041D\u0456\u0447\u043E\u0433\u043E \u043D\u0435 \u0437\u043D\u0430\u0439\u0434\u0435\u043D\u043E"
-        }
-      },
-      MuiListItem: {
-        styleOverrides: {
-          root: {
-            transition: "all 0.2s ease-in-out",
-            "&:hover": {
-              backgroundColor: currentMode === "light" ? "#f1f5f9" : "#334155"
+  const isBusy = loading || saving || isTranslatingAll || translatingCode !== null;
+  return /* @__PURE__ */ jsxs3(
+    Dialog,
+    {
+      open,
+      onClose: handleClose,
+      fullWidth: true,
+      maxWidth: "sm",
+      onClick: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs3(DialogTitle, { sx: { pb: 1, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
+          /* @__PURE__ */ jsxs3(Box, { children: [
+            "Context Translation",
+            /* @__PURE__ */ jsxs3(Typography, { component: "div", variant: "subtitle2", color: "text.secondary", sx: { wordBreak: "break-all", mt: 0.5 }, children: [
+              "Original: ",
+              /* @__PURE__ */ jsxs3("strong", { children: [
+                '"',
+                translationKey,
+                '"'
+              ] })
+            ] })
+          ] }),
+          !loading && /* @__PURE__ */ jsx10(
+            Button,
+            {
+              type: "button",
+              size: "small",
+              variant: "outlined",
+              color: "secondary",
+              startIcon: isTranslatingAll ? /* @__PURE__ */ jsx10(CircularProgress, { size: 16, color: "inherit" }) : /* @__PURE__ */ jsx10(TranslateIcon, { fontSize: "small" }),
+              onClick: handleTranslateAll,
+              disabled: isBusy,
+              sx: { flexShrink: 0, ml: 2, whiteSpace: "nowrap" },
+              children: isTranslatingAll ? "Translating..." : "Translate All"
             }
-          }
-        }
-      },
-      MuiListItemButton: {
-        styleOverrides: {
-          root: {
-            transition: "all 0.2s ease-in-out",
-            "&:hover": {
-              backgroundColor: currentMode === "light" ? "#f1f5f9" : "#334155"
+          )
+        ] }),
+        /* @__PURE__ */ jsxs3(DialogContent, { dividers: true, sx: { pt: 2 }, children: [
+          error && /* @__PURE__ */ jsx10(Alert2, { severity: "error", onClose: () => setError(null), sx: { mb: 2 }, children: error }),
+          loading ? /* @__PURE__ */ jsx10(Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ jsx10(CircularProgress, {}) }) : /* @__PURE__ */ jsxs3(Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [
+            /* @__PURE__ */ jsxs3(Paper, { variant: "outlined", sx: { p: 2, bgcolor: "action.hover", borderRadius: 2 }, children: [
+              /* @__PURE__ */ jsxs3(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
+                /* @__PURE__ */ jsx10(LightbulbIcon, { color: "warning", fontSize: "small" }),
+                /* @__PURE__ */ jsx10(Typography, { variant: "subtitle2", sx: { fontWeight: 600 }, children: "Context Hint / Clarification" })
+              ] }),
+              /* @__PURE__ */ jsx10(
+                TextField,
+                {
+                  fullWidth: true,
+                  multiline: true,
+                  rows: 2,
+                  size: "small",
+                  value: contextHint,
+                  onChange: (e) => setContextHint(e.target.value),
+                  placeholder: "e.g. Website navigation menu link to the home page",
+                  helperText: "This hint explains the exact meaning to AI translation models.",
+                  disabled: isBusy
+                }
+              )
+            ] }),
+            languages.map((lang) => /* @__PURE__ */ jsxs3(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ jsx10(
+                Box,
+                {
+                  sx: {
+                    width: 32,
+                    height: 22,
+                    flexShrink: 0,
+                    borderRadius: "4px",
+                    overflow: "hidden",
+                    boxShadow: 1,
+                    "& svg": { width: "100%", height: "100%", display: "block" }
+                  },
+                  dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                TextField,
+                {
+                  fullWidth: true,
+                  label: lang.name,
+                  size: "small",
+                  value: values[lang.code] || "",
+                  onChange: (e) => setValues((prev) => ({ ...prev, [lang.code]: e.target.value })),
+                  placeholder: "Enter manual translation...",
+                  disabled: isBusy
+                }
+              ),
+              /* @__PURE__ */ jsx10(Tooltip, { title: "Translate with context hint", children: /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(
+                IconButton,
+                {
+                  type: "button",
+                  color: "primary",
+                  disabled: isBusy,
+                  onClick: (e) => handleAutoTranslate(e, lang.code),
+                  children: translatingCode === lang.code ? /* @__PURE__ */ jsx10(CircularProgress, { size: 20, color: "inherit" }) : /* @__PURE__ */ jsx10(AutoFixHighIcon, { fontSize: "small" })
+                }
+              ) }) })
+            ] }, lang.code))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3(DialogActions, { sx: { px: 3, py: 2 }, children: [
+          /* @__PURE__ */ jsx10(Button, { onClick: onClose, disabled: isBusy, color: "inherit", type: "button", children: "Cancel" }),
+          /* @__PURE__ */ jsx10(
+            Button,
+            {
+              onClick: handleSaveAll,
+              variant: "contained",
+              disabled: isBusy,
+              type: "button",
+              children: saving ? "Saving..." : "Save All"
             }
-          }
-        }
-      },
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            textTransform: "none",
-            fontWeight: 600,
-            borderRadius: `${config.borderRadius}px`,
-            padding: "10px 24px",
-            transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
-          }
-        }
-      },
-      MuiPaper: {
-        styleOverrides: {
-          rounded: {
-            borderRadius: `${config.borderRadius * 1.25}px`
-          }
-        }
-      }
+          )
+        ] })
+      ]
     }
-  });
+  );
 };
-var ThemeContext = createContext7(void 0);
-var THEME_STORAGE_KEY = "docsua_custom_theme_config";
-var THEME_MODE_STORAGE_KEY = "docsua_custom_theme_mode";
-var ThemeProvider = ({ children }) => {
+
+// src/i18n/TranslateText.tsx
+import { Fragment, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var TranslateText = ({
+  overrideNamespace,
+  children,
+  values
+}) => {
+  const namespace = useTranslationNamespace(overrideNamespace);
+  const { t: t2, i18n } = useTranslation2(namespace);
+  const { isTranslationMode, canEdit } = useTranslationEdit();
   const supabase = useSupabase();
-  const { user, isAuthenticated, loading: isAuthLoading } = useAuth();
-  const userId = user?.id;
-  const [themeConfig, setThemeConfig] = useState6(() => {
-    const saved = localStorage.getItem(THEME_STORAGE_KEY);
-    if (saved) {
-      try {
-        return JSON.parse(saved);
-      } catch (e) {
-      }
-    }
-    return INITIAL_THEME_CONFIG;
-  });
-  useEffect6(() => {
-    if (isAuthLoading) return;
-    if (isAuthenticated && userId) {
-      const fetchActiveTheme = async () => {
-        try {
-          const { data, error } = await supabase.from("user_themes").select("*").eq("user_id", userId).eq("is_active", true).maybeSingle();
-          if (error) {
-            console.error("\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0435 \u0442\u0435\u043C\u044B \u0438\u0437 Supabase:", error.message);
-            return;
-          }
-          if (data) {
-            const activeTheme = data;
-            const savedMode = localStorage.getItem(THEME_MODE_STORAGE_KEY);
-            setThemeConfig({
-              id: activeTheme.id,
-              name: activeTheme.name || INITIAL_THEME_CONFIG.name,
-              mode: savedMode || activeTheme.config?.mode || "light",
-              borderRadius: activeTheme.config?.borderRadius ?? INITIAL_THEME_CONFIG.borderRadius,
-              colors: activeTheme.config?.colors || INITIAL_THEME_CONFIG.colors,
-              typography: activeTheme.config?.typography || INITIAL_THEME_CONFIG.typography,
-              updatedAt: activeTheme.updated_at || void 0
-            });
-          }
-        } catch (err) {
-          console.error("\u041D\u0435\u043F\u0440\u0435\u0434\u0432\u0438\u0434\u0435\u043D\u043D\u0430\u044F \u043E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438 \u0437\u0430\u043F\u0440\u043E\u0441\u0435 \u0442\u0435\u043C\u044B:", err);
-        }
-      };
-      fetchActiveTheme();
-    } else {
-      setThemeConfig(INITIAL_THEME_CONFIG);
-      localStorage.removeItem(THEME_STORAGE_KEY);
-      localStorage.removeItem(THEME_MODE_STORAGE_KEY);
-    }
-  }, [isAuthenticated, isAuthLoading, userId]);
+  const [anchorEl, setAnchorEl] = useState8(null);
+  const [isDialogOpen, setIsDialogOpen] = useState8(false);
+  const timeoutRef = useRef2(null);
+  const translatedValue = t2(children, values);
   useEffect6(() => {
-    if (isAuthenticated) {
-      localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(themeConfig));
-      localStorage.setItem(THEME_MODE_STORAGE_KEY, themeConfig.mode);
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  if (!canEdit || !isTranslationMode) {
+    return /* @__PURE__ */ jsx11(Fragment, { children: translatedValue });
+  }
+  const handleSaveTranslations = async (newValues, contextHint) => {
+    const upsertData = Object.entries(newValues).map(([langCode, text]) => ({
+      lang_code: langCode,
+      namespace,
+      key: children,
+      value: text,
+      context_hint: contextHint
+    }));
+    const { error } = await supabase.from("translations").upsert(upsertData, { onConflict: "lang_code,namespace,key" });
+    if (error) {
+      alert("\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0438 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043D\u043D\u044B\u0445");
+      throw error;
     }
-  }, [themeConfig, isAuthenticated]);
-  const mode = themeConfig.mode;
-  const setMode = (newMode) => {
-    setThemeConfig((prev) => ({ ...prev, mode: newMode }));
+    await translationService.incrementVersion(supabase, namespace, Object.keys(newValues));
+    Object.entries(newValues).forEach(([langCode, text]) => {
+      i18n.addResource(langCode, namespace, children, text);
+    });
   };
-  const toggleTheme = () => {
-    setMode(mode === "light" ? "dark" : "light");
+  const handleMouseEnter = (event) => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setAnchorEl(event.currentTarget);
   };
-  const theme = useMemo4(() => buildMuiTheme(themeConfig), [themeConfig]);
-  const displayState = {
-    isMobile: useMediaQuery(theme.breakpoints.down("sm")),
-    isTablet: useMediaQuery(theme.breakpoints.between("sm", "md")),
-    isDesktop: useMediaQuery(theme.breakpoints.between("md", "lg")),
-    isWideDesktop: useMediaQuery(theme.breakpoints.between("lg", "xl")),
-    isSuperWideDesktop: useMediaQuery(theme.breakpoints.up("xl"))
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setAnchorEl(null);
+    }, 200);
   };
-  return /* @__PURE__ */ jsx10(ThemeContext.Provider, { value: { mode, toggleTheme, setMode, theme, themeConfig, setThemeConfig, displayState }, children: /* @__PURE__ */ jsxs3(MuiThemeProvider, { theme, children: [
-    /* @__PURE__ */ jsx10(CssBaseline, {}),
-    children
-  ] }) });
-};
-var useAppTheme = () => {
-  const context = useContext7(ThemeContext);
-  if (!context) {
-    throw new Error("useAppTheme should be used within the ThemeProvider");
-  }
-  return context;
-};
-
-// src/context/BreadcrumbProvider.tsx
-import { createContext as createContext8, useContext as useContext8, useState as useState7 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var BreadcrumbContext = createContext8({
-  breadcrumbTitles: {},
-  setBreadcrumbTitle: () => {
-  }
-});
-var BreadcrumbProvider = ({ children }) => {
-  const [breadcrumbTitles, setBreadcrumbTitles] = useState7({});
-  const setBreadcrumbTitle = (path, title) => {
-    setBreadcrumbTitles((prev) => {
-      if (prev[path] === title) return prev;
-      return { ...prev, [path]: title };
-    });
+  const handleOpenDialog = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setAnchorEl(null);
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+    setIsDialogOpen(true);
   };
-  return /* @__PURE__ */ jsx11(BreadcrumbContext.Provider, { value: { breadcrumbTitles, setBreadcrumbTitle }, children });
-};
-var useBreadcrumb = () => useContext8(BreadcrumbContext);
-
-// src/context/ToastProvider.tsx
-import { createContext as createContext9, useContext as useContext9, useState as useState8, useCallback as useCallback3, useMemo as useMemo5 } from "react";
-import { Snackbar, Alert as Alert2 } from "@mui/material";
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
-var ToastContext = createContext9(void 0);
-var ToastProvider = ({ children }) => {
-  const [toast, setToast] = useState8(null);
-  const showToast = useCallback3((text, type = "info") => {
-    setToast({ text, type });
-  }, []);
-  const hideToast = useCallback3(() => {
-    setToast(null);
-  }, []);
-  const contextValue = useMemo5(() => ({
-    showToast,
-    hideToast
-  }), [showToast, hideToast]);
-  return /* @__PURE__ */ jsxs4(ToastContext.Provider, { value: contextValue, children: [
-    children,
-    /* @__PURE__ */ jsx12(
-      Snackbar,
+  const handleLaunchAction = (_) => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx11(
+      Box2,
       {
-        open: Boolean(toast),
-        autoHideDuration: 3500,
-        onClose: hideToast,
-        anchorOrigin: { vertical: "bottom", horizontal: "center" },
-        children: /* @__PURE__ */ jsx12(
-          Alert2,
+        component: "span",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        sx: {
+          display: "inline-block",
+          position: "relative",
+          borderRadius: "4px",
+          padding: "0 3px",
+          margin: "0 1px",
+          border: "1px dashed #f59e0b",
+          backgroundColor: "rgba(254, 243, 199, 0.35)",
+          cursor: "pointer",
+          transition: "all 0.2s ease-in-out",
+          userSelect: "none",
+          "&:hover": {
+            backgroundColor: "#fef08a",
+            borderColor: "#d97706",
+            boxShadow: "0 0 0 2px rgba(245, 158, 11, 0.35)",
+            transform: "scale(1.02)"
+          }
+        },
+        children: translatedValue
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      Popper,
+      {
+        open,
+        anchorEl,
+        placement: "bottom-start",
+        style: { zIndex: 1300 },
+        children: /* @__PURE__ */ jsx11(
+          Paper2,
           {
-            severity: toast?.type || "info",
-            variant: "filled",
-            onClose: hideToast,
-            children: toast?.text
+            elevation: 4,
+            onMouseEnter: () => {
+              if (timeoutRef.current) clearTimeout(timeoutRef.current);
+            },
+            onMouseLeave: handleMouseLeave,
+            sx: {
+              mt: 0.5,
+              borderRadius: 2,
+              minWidth: 140,
+              boxShadow: "0px 10px 15px -3px rgba(0,0,0,0.1)"
+            },
+            children: /* @__PURE__ */ jsxs4(MenuList, { dense: true, sx: { py: 0.5 }, children: [
+              /* @__PURE__ */ jsxs4(MenuItem, { onClick: handleOpenDialog, sx: { py: 0.8, px: 1.5 }, children: [
+                /* @__PURE__ */ jsx11(ListItemIcon, { sx: { minWidth: "28px !important" }, children: /* @__PURE__ */ jsx11(TranslateIcon2, { fontSize: "small", sx: { color: "#d97706" } }) }),
+                /* @__PURE__ */ jsx11(
+                  ListItemText,
+                  {
+                    primary: "Localization",
+                    slotProps: {
+                      primary: {
+                        sx: {
+                          fontSize: "0.825rem",
+                          fontWeight: 600,
+                          color: "text.primary"
+                        }
+                      }
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs4(MenuItem, { onClick: handleLaunchAction, sx: { py: 0.8, px: 1.5 }, children: [
+                /* @__PURE__ */ jsx11(ListItemIcon, { sx: { minWidth: "28px !important" }, children: /* @__PURE__ */ jsx11(LaunchIcon, { fontSize: "small", color: "secondary" }) }),
+                /* @__PURE__ */ jsx11(
+                  ListItemText,
+                  {
+                    primary: "Launch action",
+                    slotProps: {
+                      primary: {
+                        sx: {
+                          fontSize: "0.825rem",
+                          fontWeight: 600,
+                          color: "text.primary"
+                        }
+                      }
+                    }
+                  }
+                )
+              ] })
+            ] })
           }
         )
       }
-    )
+    ),
+    /* @__PURE__ */ jsx11("span", { style: { display: "inline" }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx11(
+      TranslationDialog,
+      {
+        open: isDialogOpen,
+        onClose: () => setIsDialogOpen(false),
+        translationKey: children,
+        namespace,
+        onSave: handleSaveTranslations
+      }
+    ) })
   ] });
 };
-var useToast = () => {
-  const context = useContext9(ToastContext);
-  if (!context) {
-    throw new Error("useToast must be used within a ToastProvider");
-  }
-  return context;
-};
 
 // src/context/ConfirmationProvider.tsx
-import { createContext as createContext10, useContext as useContext10, useState as useState9, useCallback as useCallback4 } from "react";
-import {
-  Button as Button2,
-  Dialog as Dialog2,
-  DialogActions as DialogActions2,
-  DialogContent as DialogContent2,
-  DialogContentText,
-  DialogTitle as DialogTitle2,
-  Box as Box3
-} from "@mui/material";
-import {
-  Error as ErrorIcon,
-  WarningAmberOutlined as WarningIcon,
-  InfoOutlined as InfoIcon,
-  CheckCircleOutlined as SuccessIcon
-} from "@mui/icons-material";
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var ConfirmContext = createContext10(null);
 var SEVERITY_ICONS = {
-  error: /* @__PURE__ */ jsx13(ErrorIcon, { color: "error", sx: { fontSize: 40 } }),
-  warning: /* @__PURE__ */ jsx13(WarningIcon, { color: "warning", sx: { fontSize: 40 } }),
-  info: /* @__PURE__ */ jsx13(InfoIcon, { color: "info", sx: { fontSize: 40 } }),
-  success: /* @__PURE__ */ jsx13(SuccessIcon, { color: "success", sx: { fontSize: 40 } })
+  error: /* @__PURE__ */ jsx12(ErrorIcon, { color: "error", sx: { fontSize: 40 } }),
+  warning: /* @__PURE__ */ jsx12(WarningIcon, { color: "warning", sx: { fontSize: 40 } }),
+  info: /* @__PURE__ */ jsx12(InfoIcon, { color: "info", sx: { fontSize: 40 } }),
+  success: /* @__PURE__ */ jsx12(SuccessIcon, { color: "success", sx: { fontSize: 40 } })
 };
 var ConfirmationProvider = ({ children }) => {
   const [open, setOpen] = useState9(false);
@@ -3617,36 +3618,36 @@ var ConfirmationProvider = ({ children }) => {
         children: [
           /* @__PURE__ */ jsxs5(DialogTitle2, { sx: { display: "flex", alignItems: "center", gap: 1.5, pb: 1 }, children: [
             SEVERITY_ICONS[severityType],
-            /* @__PURE__ */ jsx13(Box3, { component: "span", sx: { fontWeight: 600 }, children: options?.title || /* @__PURE__ */ jsx13(TranslateText, { children: "Confirmation" }) })
+            /* @__PURE__ */ jsx12(Box3, { component: "span", sx: { fontWeight: 600 }, children: options?.title || /* @__PURE__ */ jsx12(TranslateText, { children: "Confirmation" }) })
           ] }),
-          /* @__PURE__ */ jsx13(DialogContent2, { sx: { py: 2 }, dividers: true, children: /* @__PURE__ */ jsx13(DialogContentText, { color: "text.secondary", children: options?.message }) }),
+          /* @__PURE__ */ jsx12(DialogContent2, { sx: { py: 2 }, dividers: true, children: /* @__PURE__ */ jsx12(DialogContentText, { color: "text.secondary", children: options?.message }) }),
           /* @__PURE__ */ jsxs5(DialogActions2, { sx: { pt: 2, px: 2, justifyContent: "flex-end", gap: 1 }, children: [
-            (options?.showCancelButton ?? true) && /* @__PURE__ */ jsx13(
+            (options?.showCancelButton ?? true) && /* @__PURE__ */ jsx12(
               Button2,
               {
                 onClick: () => handleClose("cancel"),
                 color: "inherit",
                 variant: "text",
-                children: options?.cancelText || /* @__PURE__ */ jsx13(TranslateText, { children: "Cancel" })
+                children: options?.cancelText || /* @__PURE__ */ jsx12(TranslateText, { children: "Cancel" })
               }
             ),
-            options?.showNoButton && /* @__PURE__ */ jsx13(
+            options?.showNoButton && /* @__PURE__ */ jsx12(
               Button2,
               {
                 onClick: () => handleClose("no"),
                 color: "inherit",
                 variant: "outlined",
-                children: options?.noText || /* @__PURE__ */ jsx13(TranslateText, { children: "No" })
+                children: options?.noText || /* @__PURE__ */ jsx12(TranslateText, { children: "No" })
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx12(
               Button2,
               {
                 onClick: () => handleClose("yes"),
                 color: options?.confirmColor || (severityType === "error" ? "error" : "primary"),
                 variant: "contained",
                 autoFocus: true,
-                children: options?.confirmText || /* @__PURE__ */ jsx13(TranslateText, { children: "Yes" })
+                children: options?.confirmText || /* @__PURE__ */ jsx12(TranslateText, { children: "Yes" })
               }
             )
           ] })
@@ -3677,28 +3678,26 @@ var Providers = {
 };
 
 // src/UI/components/data.display/UserStatusChipComponent.tsx
-import { Chip, IconButton as IconButton2 } from "@mui/material";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var UserStatusChipComponent = ({ overrideNamespace, state }) => {
   const confirm = useConfirmation();
   const handleShowReason = async (e) => {
     e.stopPropagation();
     if (!state.locked_reason) return;
     await confirm({
-      title: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Lock Reason" }),
+      title: /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Lock Reason" }),
       message: state.locked_reason,
       type: "info",
-      confirmText: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "OK" }),
+      confirmText: /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "OK" }),
       showNoButton: false,
       showCancelButton: false
     });
   };
   if (state.profile_archived) {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx13(
       Chip,
       {
-        label: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Archived" }),
+        label: /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Archived" }),
         color: "default",
         size: "small",
         variant: "filled"
@@ -3706,10 +3705,10 @@ var UserStatusChipComponent = ({ overrideNamespace, state }) => {
     );
   }
   if (state.profile_locked) {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx13(
       Chip,
       {
-        label: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "System Locked" }),
+        label: /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "System Locked" }),
         color: "error",
         size: "small",
         variant: "filled"
@@ -3717,30 +3716,30 @@ var UserStatusChipComponent = ({ overrideNamespace, state }) => {
     );
   }
   if (state.excluded) {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx13(
       Chip,
       {
-        label: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Excluded" }),
+        label: /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Excluded" }),
         size: "small"
       }
     );
   }
   if (state.locked) {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx13(
       Chip,
       {
-        label: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Locked" }),
+        label: /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Locked" }),
         color: "error",
         size: "small",
         onDelete: state.locked_reason ? handleShowReason : void 0,
-        deleteIcon: state.locked_reason ? /* @__PURE__ */ jsx14(IconButton2, { size: "small", component: "span", sx: { p: 0.2 }, children: /* @__PURE__ */ jsx14(InfoOutlinedIcon, { fontSize: "small" }) }) : void 0
+        deleteIcon: state.locked_reason ? /* @__PURE__ */ jsx13(IconButton2, { size: "small", component: "span", sx: { p: 0.2 }, children: /* @__PURE__ */ jsx13(InfoOutlinedIcon, { fontSize: "small" }) }) : void 0
       }
     );
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx13(
     Chip,
     {
-      label: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Active" }),
+      label: /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Active" }),
       color: "success",
       size: "small",
       variant: "outlined"
@@ -3750,32 +3749,32 @@ var UserStatusChipComponent = ({ overrideNamespace, state }) => {
 
 // src/UI/components/data.display/UserRoleChipComponent.tsx
 import { Chip as Chip2 } from "@mui/material";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var UserRoleChipComponent = ({ overrideNamespace, role }) => {
   switch (role) {
     case "superadmin":
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx14(
         Chip2,
         {
-          label: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Superadministrator" }),
+          label: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Superadministrator" }),
           color: "error",
           size: "small"
         }
       );
     case "admin":
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx14(
         Chip2,
         {
-          label: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Administrator" }),
+          label: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Administrator" }),
           color: "primary",
           size: "small"
         }
       );
     default:
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx14(
         Chip2,
         {
-          label: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "User" }),
+          label: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "User" }),
           variant: "outlined",
           size: "small"
         }
@@ -3788,6 +3787,41 @@ import { useState as useState10 } from "react";
 import { IconButton as IconButton3 } from "@mui/material";
 import CheckIcon from "@mui/icons-material/Check";
 import CopyIcon from "@mui/icons-material/ContentCopy";
+
+// src/UI/components/data.display/TranslatableTooltipComponent.tsx
+import { Tooltip as Tooltip2 } from "@mui/material";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var TranslatableTooltipComponent = ({
+  overrideNamespace,
+  title,
+  disableSpan,
+  children,
+  ...props
+}) => {
+  const { isTranslationMode } = useTranslationEdit();
+  return /* @__PURE__ */ jsx15(
+    Tooltip2,
+    {
+      title: typeof title === "string" ? /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace, children: title }) : title,
+      slotProps: {
+        popper: {
+          sx: isTranslationMode ? {
+            pointerEvents: "auto",
+            // Разрешаем клики внутри тултипа
+            "& .MuiTooltip-tooltip": {
+              pointerEvents: "auto"
+            }
+          } : void 0
+        }
+      },
+      leaveDelay: isTranslationMode ? 1e3 : 100,
+      ...props,
+      children: disableSpan ? children : /* @__PURE__ */ jsx15("span", { children })
+    }
+  );
+};
+
+// src/UI/components/buttons/CopyClipboardButtonComponent.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
 var CopyClipboardButtonComponent = ({
   overrideNamespace,
@@ -3831,11 +3865,367 @@ var CopyClipboardButtonComponent = ({
   ) }) });
 };
 
+// src/context/UserSettingsProvider.tsx
+import { createContext as createContext11, useContext as useContext11, useEffect as useEffect7, useState as useState11, useCallback as useCallback5 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var UserSettingsContext = createContext11(void 0);
+var useUserSettings = () => {
+  const context = useContext11(UserSettingsContext);
+  if (!context) {
+    throw new Error("useUserSettings should be used within the UserSettingsProvider");
+  }
+  return context;
+};
+
+// src/UI/components/data.display/UserPopoverComponent.tsx
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
+var useUserStatus = (supabase, userId, open) => {
+  const [lastSeenAt, setLastSeenAt] = useState12(null);
+  const [loading, setLoading] = useState12(true);
+  useEffect8(() => {
+    if (!userId || !open) {
+      setLastSeenAt(null);
+      setLoading(false);
+      return;
+    }
+    let isMounted = true;
+    const loadStatus = async () => {
+      setLoading(true);
+      const date = await getUserLastSeenAt(supabase, userId);
+      if (isMounted) {
+        setLastSeenAt(date);
+        setLoading(false);
+      }
+    };
+    loadStatus();
+    const channel = supabase.channel(`user_status_popover_${userId}`).on(
+      "postgres_changes",
+      {
+        event: "*",
+        schema: "public",
+        table: "user_sessions",
+        filter: `user_id=eq.${userId}`
+      },
+      () => {
+        loadStatus();
+      }
+    ).subscribe();
+    return () => {
+      isMounted = false;
+      supabase.removeChannel(channel);
+    };
+  }, [userId, open]);
+  const isOnline = Boolean(
+    lastSeenAt && (/* @__PURE__ */ new Date()).getTime() - new Date(lastSeenAt).getTime() < 3 * 60 * 1e3
+  );
+  return { lastSeenAt, isOnline, loading };
+};
+var UserPopoverComponent = ({
+  overrideNamespace,
+  userId,
+  anchorEl,
+  open,
+  onClose
+}) => {
+  const supabase = useSupabase();
+  const { activeCompanyId, membership: currentMembership } = useAuth();
+  const { openChatWithUser } = useUserSettings();
+  const { formatDate, formatRelativeTime } = useLocalization();
+  const [profileData, setProfileData] = useState12(null);
+  const [membershipData, setMembershipData] = useState12(null);
+  const [avatarUrl, setAvatarUrl] = useState12(null);
+  const [coverUrl, setCoverUrl] = useState12(null);
+  const [loading, setLoading] = useState12(true);
+  const { lastSeenAt, isOnline } = useUserStatus(supabase, userId, open);
+  useEffect8(() => {
+    if (!open || !userId || !activeCompanyId) return;
+    let isMounted = true;
+    setLoading(true);
+    const fetchUserData = async () => {
+      try {
+        const { data, error } = await supabase.rpc("get_user_avatar_and_profile", {
+          p_company_id: activeCompanyId,
+          //currentMembership?.id || null,
+          p_user_id: userId
+        }).maybeSingle();
+        if (error) throw error;
+        if (isMounted && data) {
+          const rpcData = data;
+          const profile = rpcData.profile;
+          const membership = rpcData.membership;
+          setProfileData(profile);
+          setMembershipData(membership);
+          const avatarPath = profile?.avatar_path || profile?.avatar_url;
+          if (avatarPath && !avatarPath.startsWith("http")) {
+            const { data: avatarSigned } = await supabase.storage.from("user-media").createSignedUrl(avatarPath, 3600);
+            if (isMounted) setAvatarUrl(avatarSigned?.signedUrl || null);
+          } else {
+            if (isMounted) setAvatarUrl(avatarPath || null);
+          }
+          const coverPath = profile?.cover_image_path || profile?.cover_image_url;
+          if (coverPath && !coverPath.startsWith("http")) {
+            const { data: coverSigned } = await supabase.storage.from("user-media").createSignedUrl(coverPath, 3600);
+            if (isMounted) setCoverUrl(coverSigned?.signedUrl || null);
+          } else {
+            if (isMounted) setCoverUrl(coverPath || null);
+          }
+        }
+      } catch (err) {
+        console.error("Error loading user popover data:", err);
+      } finally {
+        if (isMounted) setLoading(false);
+      }
+    };
+    fetchUserData();
+    return () => {
+      isMounted = false;
+    };
+  }, [open, userId, currentMembership?.id, activeCompanyId]);
+  const getStatusChip = () => {
+    if (!profileData) return null;
+    return /* @__PURE__ */ jsx18(UserStatusChipComponent, { state: { profile_archived: profileData.archived, profile_locked: profileData.locked, excluded: membershipData?.excluded || false, locked: membershipData?.locked || false, locked_reason: membershipData?.locked_reason || "" } });
+  };
+  const getStatusTypographyColor = (isOnline2, lastSeenAt2) => {
+    if (isOnline2) return "success";
+    if (!lastSeenAt2) return "textSecondary";
+    const diffInMinutes = (Date.now() - new Date(lastSeenAt2).getTime()) / (1e3 * 60);
+    if (diffInMinutes <= 15) {
+      return "warning";
+    }
+    return "textSecondary";
+  };
+  const getStatusIconColor = (isOnline2, lastSeenAt2) => {
+    if (isOnline2) return "success";
+    if (!lastSeenAt2) return "inherit";
+    const diffInMinutes = (Date.now() - new Date(lastSeenAt2).getTime()) / (1e3 * 60);
+    if (diffInMinutes <= 15) {
+      return "warning";
+    }
+    return "inherit";
+  };
+  const canChat = currentMembership && membershipData && currentMembership.id !== membershipData.id;
+  return /* @__PURE__ */ jsx18(
+    Popover,
+    {
+      open,
+      anchorEl,
+      onClose,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      slotProps: {
+        paper: {
+          sx: {
+            width: 350,
+            p: 0,
+            overflow: "hidden",
+            borderRadius: 0,
+            boxShadow: 4
+          }
+        }
+      },
+      children: loading ? /* @__PURE__ */ jsx18(Box4, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ jsx18(CircularProgress2, { size: 28 }) }) : profileData ? /* @__PURE__ */ jsxs6(Box4, { sx: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ jsxs6(
+          Box4,
+          {
+            sx: {
+              position: "relative",
+              width: "100%",
+              height: 96,
+              bgcolor: "action.selected"
+            },
+            children: [
+              coverUrl && /* @__PURE__ */ jsx18(
+                Box4,
+                {
+                  component: "img",
+                  src: coverUrl,
+                  alt: "Profile background",
+                  sx: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    display: "block",
+                    m: 0,
+                    p: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx18(
+                IconButton4,
+                {
+                  size: "small",
+                  onClick: onClose,
+                  sx: {
+                    position: "absolute",
+                    top: 8,
+                    right: 8,
+                    color: "common.white",
+                    bgcolor: "rgba(0, 0, 0, 0.4)",
+                    backdropFilter: "blur(4px)",
+                    transition: "all 0.2s ease",
+                    "&:hover": {
+                      bgcolor: "rgba(0, 0, 0, 0.8)",
+                      transform: "scale(1.1)"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx18(CloseIcon, { fontSize: "small" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs6(Box4, { sx: { p: 2, pt: 0 }, children: [
+          /* @__PURE__ */ jsxs6(Stack, { direction: "row", spacing: 1.5, sx: { alignItems: "flex-end", mt: "-18px", mb: 1 }, children: [
+            /* @__PURE__ */ jsx18(
+              Badge,
+              {
+                overlap: "circular",
+                anchorOrigin: { vertical: "bottom", horizontal: "right" },
+                variant: "dot",
+                sx: {
+                  "& .MuiBadge-badge": {
+                    backgroundColor: isOnline ? "#44b700" : "#bdbdbd",
+                    color: isOnline ? "#44b700" : "#bdbdbd",
+                    boxShadow: `0 0 0 2px #fff`,
+                    width: 12,
+                    height: 12,
+                    borderRadius: "50%",
+                    "&::after": isOnline ? {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      height: "100%",
+                      borderRadius: "50%",
+                      animation: "ripple 1.2s infinite ease-in-out",
+                      border: "1px solid currentColor",
+                      content: '""'
+                    } : {}
+                  },
+                  "@keyframes ripple": {
+                    "0%": {
+                      transform: "scale(.8)",
+                      opacity: 1
+                    },
+                    "100%": {
+                      transform: "scale(2.4)",
+                      opacity: 0
+                    }
+                  }
+                },
+                children: /* @__PURE__ */ jsx18(
+                  Avatar,
+                  {
+                    src: avatarUrl || coverUrl || void 0,
+                    sx: {
+                      width: 65,
+                      height: 65,
+                      border: "3px solid",
+                      borderColor: "background.paper",
+                      boxShadow: 2,
+                      bgcolor: "primary.main",
+                      fontSize: 22,
+                      fontWeight: 600
+                    },
+                    children: profileData.display_name?.[0]?.toUpperCase() || "?"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs6(Box4, { sx: { overflow: "hidden", pb: 0.5 }, children: [
+              /* @__PURE__ */ jsx18(Typography2, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.2 }, noWrap: true, children: profileData.display_name || `${profileData.first_name || ""} ${profileData.last_name || ""}` }),
+              membershipData?.employee_post && /* @__PURE__ */ jsx18(Typography2, { variant: "body2", color: "text.secondary", noWrap: true, children: membershipData.employee_post })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs6(Stack, { direction: "row", spacing: 1, sx: { my: 1, flexWrap: "wrap", gap: 0.5 }, children: [
+            getStatusChip(),
+            /* @__PURE__ */ jsx18(UserRoleChipComponent, { role: membershipData?.role || "user" })
+          ] }),
+          /* @__PURE__ */ jsx18(Divider, { sx: { my: 1.5 } }),
+          /* @__PURE__ */ jsxs6(Stack, { spacing: 1, sx: { fontSize: "0.875rem", mb: 1.5 }, children: [
+            /* @__PURE__ */ jsxs6(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+              /* @__PURE__ */ jsx18(AccessTimeIcon, { fontSize: "small", color: getStatusIconColor(isOnline, lastSeenAt) }),
+              /* @__PURE__ */ jsx18(Typography2, { variant: "body2", color: getStatusTypographyColor(isOnline, lastSeenAt), children: isOnline ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Online" }) : lastSeenAt ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+                /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Last seen" }),
+                ":",
+                " ",
+                /* @__PURE__ */ jsx18("strong", { children: formatRelativeTime(lastSeenAt) })
+              ] }) : /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Offline" }) })
+            ] }),
+            profileData.email && /* @__PURE__ */ jsxs6(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+              /* @__PURE__ */ jsx18(EmailIcon, { fontSize: "small" }),
+              /* @__PURE__ */ jsx18(Typography2, { variant: "body2", color: "text.primary", noWrap: true, sx: { flexGrow: 1 }, children: profileData.email }),
+              /* @__PURE__ */ jsx18(CopyClipboardButtonComponent, { textToCopy: profileData.email })
+            ] }),
+            membershipData?.employee_post && /* @__PURE__ */ jsxs6(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+              /* @__PURE__ */ jsx18(WorkIcon, { fontSize: "small" }),
+              /* @__PURE__ */ jsx18(Typography2, { variant: "body2", color: "text.primary", noWrap: true, sx: { flexGrow: 1 }, children: membershipData.employee_post }),
+              /* @__PURE__ */ jsx18(CopyClipboardButtonComponent, { textToCopy: membershipData.employee_post })
+            ] }),
+            profileData.phone && /* @__PURE__ */ jsxs6(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+              /* @__PURE__ */ jsx18(PhoneIcon, { fontSize: "small" }),
+              /* @__PURE__ */ jsx18(Typography2, { variant: "body2", color: "text.primary", children: profileData.phone })
+            ] }),
+            profileData.birthday && /* @__PURE__ */ jsxs6(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+              /* @__PURE__ */ jsx18(CakeIcon, { fontSize: "small" }),
+              /* @__PURE__ */ jsx18(Typography2, { variant: "body2", color: "text.primary", children: formatDate(profileData.birthday) })
+            ] }),
+            membershipData?.created_at && /* @__PURE__ */ jsxs6(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+              /* @__PURE__ */ jsx18(CalendarIcon, { fontSize: "small" }),
+              /* @__PURE__ */ jsxs6(Typography2, { variant: "body2", color: "text.primary", children: [
+                /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "In company from" }),
+                ": ",
+                formatDate(membershipData.created_at)
+              ] })
+            ] }),
+            profileData.description && /* @__PURE__ */ jsx18(
+              Typography2,
+              {
+                variant: "caption",
+                color: "text.secondary",
+                sx: {
+                  display: "-webkit-box",
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: "vertical",
+                  overflow: "hidden",
+                  mt: 0.5
+                },
+                children: profileData.description
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx18(Divider, { sx: { my: 1 } }),
+          /* @__PURE__ */ jsxs6(Stack, { direction: "row", spacing: 1, sx: { justifyContent: "space-around", pt: 0.5 }, children: [
+            /* @__PURE__ */ jsx18(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Send a notification" }), children: /* @__PURE__ */ jsx18(IconButton4, { size: "small", color: "primary", children: /* @__PURE__ */ jsx18(NotificationIcon, { fontSize: "small" }) }) }),
+            /* @__PURE__ */ jsx18(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set a task" }), children: /* @__PURE__ */ jsx18(IconButton4, { size: "small", color: "primary", children: /* @__PURE__ */ jsx18(TaskIcon, { fontSize: "small" }) }) }),
+            /* @__PURE__ */ jsx18(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Start a chat" }), children: /* @__PURE__ */ jsx18(
+              IconButton4,
+              {
+                size: "small",
+                color: "primary",
+                disabled: !canChat,
+                onClick: () => membershipData && openChatWithUser(membershipData.id),
+                children: /* @__PURE__ */ jsx18(ChatIcon, { fontSize: "small" })
+              }
+            ) })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsx18(Box4, { sx: { p: 2 }, children: /* @__PURE__ */ jsx18(
+        Typography2,
+        {
+          color: "error",
+          variant: "body2",
+          children: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Failed to load user data" })
+        }
+      ) })
+    }
+  );
+};
+var UserPopoverComponent_default = UserPopoverComponent;
+
 export {
-  getUserLastSeenAt,
   SupabaseProvider,
   useSupabase,
-  useAuth,
   TranslationEditProvider,
   useTranslationEdit,
   translationService,
@@ -3859,5 +4249,7 @@ export {
   Providers,
   UserStatusChipComponent,
   UserRoleChipComponent,
-  CopyClipboardButtonComponent
+  CopyClipboardButtonComponent,
+  UserPopoverComponent,
+  UserPopoverComponent_default
 };