@serhii.olishevskyi/docs 1.0.1 → 1.0.2

package/dist/index.js

@@ -32,15 +32,16 @@ var index_exports = {};
 __export(index_exports, {
   AIProvider: () => AIProvider,
   BreadcrumbProvider: () => BreadcrumbProvider,
-  CardForm: () => CardForm,
   ConfirmationProvider: () => ConfirmationProvider,
   LocalizationProvider: () => LocalizationProvider,
+  Providers: () => Providers,
   SupabaseProvider: () => SupabaseProvider,
   ThemeProvider: () => ThemeProvider,
   ToastProvider: () => ToastProvider,
   TranslateProvider: () => TranslateProvider,
   TranslateText: () => TranslateText,
   TranslationEditProvider: () => TranslationEditProvider,
+  UI: () => UI,
   useAI: () => useAI,
   useAppTheme: () => useAppTheme,
   useBreadcrumb: () => useBreadcrumb,
@@ -53,7 +54,7 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/UI/components/inputs/TextfieldComponent.tsx
+// src/UI/components/inputs/TextFieldComponent.tsx
 var import_react8 = require("react");
 var import_material4 = require("@mui/material");
 var import_Lock = __toESM(require("@mui/icons-material/Lock"));
@@ -62,8 +63,8 @@ var import_Check = __toESM(require("@mui/icons-material/Check"));
 var import_Clear = __toESM(require("@mui/icons-material/Clear"));
 var import_Translate3 = __toESM(require("@mui/icons-material/Translate"));
 
-// src/UI/components/inputs/TranslatableTooltip.tsx
-var import_material = require("@mui/material");
+// src/UI/components/data.display/TranslatableTooltipComponent.tsx
+var import_material3 = require("@mui/material");
 
 // src/context/TranslationEditProvider.tsx
 var import_react3 = require("react");
@@ -2576,39 +2577,19 @@ var useTranslationEdit = () => {
   return context;
 };
 
-// src/UI/components/inputs/TranslatableTooltip.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var TranslatableTooltip = ({
-  title,
-  disableSpan,
-  children,
-  ...props
-}) => {
-  const { isTranslationMode } = useTranslationEdit();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_material.Tooltip,
-    {
-      title,
-      slotProps: {
-        popper: {
-          sx: isTranslationMode ? {
-            pointerEvents: "auto",
-            // Разрешаем клики внутри тултипа
-            "& .MuiTooltip-tooltip": {
-              pointerEvents: "auto"
-            }
-          } : void 0
-        }
-      },
-      leaveDelay: isTranslationMode ? 1e3 : 100,
-      ...props,
-      children: disableSpan ? children : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children })
-    }
-  );
-};
+// src/i18n/TranslateText.tsx
+var import_react7 = require("react");
+var import_react_i18next2 = require("react-i18next");
+var import_material2 = require("@mui/material");
+var import_Translate2 = __toESM(require("@mui/icons-material/Translate"));
+var import_Launch = __toESM(require("@mui/icons-material/Launch"));
 
-// src/UI/components/inputs/TextfieldComponent.tsx
-var import_react_i18next3 = require("react-i18next");
+// src/i18n/TranslationDialog.tsx
+var import_react5 = require("react");
+var import_material = require("@mui/material");
+var import_AutoFixHigh = __toESM(require("@mui/icons-material/AutoFixHigh"));
+var import_Translate = __toESM(require("@mui/icons-material/Translate"));
+var import_Lightbulb = __toESM(require("@mui/icons-material/Lightbulb"));
 
 // src/services/translation.service.ts
 var translationService = {
@@ -2669,24 +2650,10 @@ ${params.contextHint ? `Context Hint: "${params.contextHint}"` : ""}`;
   }
 };
 
-// src/i18n/TranslateText.tsx
-var import_react7 = require("react");
-var import_react_i18next2 = require("react-i18next");
-var import_material3 = require("@mui/material");
-var import_Translate2 = __toESM(require("@mui/icons-material/Translate"));
-var import_Launch = __toESM(require("@mui/icons-material/Launch"));
-
-// src/i18n/TranslationDialog.tsx
-var import_react5 = require("react");
-var import_material2 = require("@mui/material");
-var import_AutoFixHigh = __toESM(require("@mui/icons-material/AutoFixHigh"));
-var import_Translate = __toESM(require("@mui/icons-material/Translate"));
-var import_Lightbulb = __toESM(require("@mui/icons-material/Lightbulb"));
-
 // src/context/AIProvider.tsx
 var import_react4 = require("react");
 var import_genai = require("@google/genai");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var AIContext = (0, import_react4.createContext)(null);
 var AIProvider = ({
   children,
@@ -2769,7 +2736,7 @@ var AIProvider = ({
       }
     };
   }, [apiKey, provider, modelName]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AIContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AIContext.Provider, { value: contextValue, children });
 };
 var useAI = () => {
   const context = (0, import_react4.useContext)(AIContext);
@@ -2780,7 +2747,7 @@ var useAI = () => {
 };
 
 // src/i18n/TranslationDialog.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var TranslationDialog = ({
   open,
   onClose,
@@ -2894,8 +2861,8 @@ var TranslationDialog = ({
     onClose();
   };
   const isBusy = loading || saving || isTranslatingAll || translatingCode !== null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_material2.Dialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_material.Dialog,
     {
       open,
       onClose: handleClose,
@@ -2904,26 +2871,26 @@ var TranslationDialog = ({
       onClick: (e) => e.stopPropagation(),
       onMouseDown: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material2.DialogTitle, { sx: { pb: 1, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material2.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.DialogTitle, { sx: { pb: 1, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Box, { children: [
             "Context Translation",
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material2.Typography, { component: "div", variant: "subtitle2", color: "text.secondary", sx: { wordBreak: "break-all", mt: 0.5 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Typography, { component: "div", variant: "subtitle2", color: "text.secondary", sx: { wordBreak: "break-all", mt: 0.5 }, children: [
               "Original: ",
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("strong", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("strong", { children: [
                 '"',
                 translationKey,
                 '"'
               ] })
             ] })
           ] }),
-          !loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_material2.Button,
+          !loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_material.Button,
             {
               type: "button",
               size: "small",
               variant: "outlined",
               color: "secondary",
-              startIcon: isTranslatingAll ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material2.CircularProgress, { size: 16, color: "inherit" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Translate.default, { fontSize: "small" }),
+              startIcon: isTranslatingAll ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.CircularProgress, { size: 16, color: "inherit" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Translate.default, { fontSize: "small" }),
               onClick: handleTranslateAll,
               disabled: isBusy,
               sx: { flexShrink: 0, ml: 2, whiteSpace: "nowrap" },
@@ -2931,16 +2898,16 @@ var TranslationDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material2.DialogContent, { dividers: true, sx: { pt: 2 }, children: [
-          error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material2.Alert, { severity: "error", onClose: () => setError(null), sx: { mb: 2 }, children: error }),
-          loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material2.Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material2.CircularProgress, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material2.Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material2.Paper, { variant: "outlined", sx: { p: 2, bgcolor: "action.hover", borderRadius: 2 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material2.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Lightbulb.default, { color: "warning", fontSize: "small" }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material2.Typography, { variant: "subtitle2", sx: { fontWeight: 600 }, children: "Context Hint / Clarification" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.DialogContent, { dividers: true, sx: { pt: 2 }, children: [
+          error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.Alert, { severity: "error", onClose: () => setError(null), sx: { mb: 2 }, children: error }),
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.CircularProgress, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Paper, { variant: "outlined", sx: { p: 2, bgcolor: "action.hover", borderRadius: 2 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Lightbulb.default, { color: "warning", fontSize: "small" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.Typography, { variant: "subtitle2", sx: { fontWeight: 600 }, children: "Context Hint / Clarification" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                import_material2.TextField,
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_material.TextField,
                 {
                   fullWidth: true,
                   multiline: true,
@@ -2954,9 +2921,9 @@ var TranslationDialog = ({
                 }
               )
             ] }),
-            languages.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material2.Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                import_material2.Box,
+            languages.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_material.Box,
                 {
                   sx: {
                     width: 32,
@@ -2970,8 +2937,8 @@ var TranslationDialog = ({
                   dangerouslySetInnerHTML: { __html: lang.svg_flag }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                import_material2.TextField,
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_material.TextField,
                 {
                   fullWidth: true,
                   label: lang.name,
@@ -2982,23 +2949,23 @@ var TranslationDialog = ({
                   disabled: isBusy
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material2.Tooltip, { title: "Translate with context hint", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                import_material2.IconButton,
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.Tooltip, { title: "Translate with context hint", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_material.IconButton,
                 {
                   type: "button",
                   color: "primary",
                   disabled: isBusy,
                   onClick: (e) => handleAutoTranslate(e, lang.code),
-                  children: translatingCode === lang.code ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material2.CircularProgress, { size: 20, color: "inherit" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_AutoFixHigh.default, { fontSize: "small" })
+                  children: translatingCode === lang.code ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.CircularProgress, { size: 20, color: "inherit" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_AutoFixHigh.default, { fontSize: "small" })
                 }
               ) }) })
             ] }, lang.code))
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material2.DialogActions, { sx: { px: 3, py: 2 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material2.Button, { onClick: onClose, disabled: isBusy, color: "inherit", type: "button", children: "Cancel" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_material2.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.DialogActions, { sx: { px: 3, py: 2 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.Button, { onClick: onClose, disabled: isBusy, color: "inherit", type: "button", children: "Cancel" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_material.Button,
             {
               onClick: handleSaveAll,
               variant: "contained",
@@ -3015,13 +2982,13 @@ var TranslationDialog = ({
 
 // src/context/TranslateProvider.tsx
 var import_react6 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var TranslationNamespaceContext = (0, import_react6.createContext)({
   namespace: "common"
   // значение по умолчанию
 });
 var TranslateProvider = ({ namespace, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TranslationNamespaceContext.Provider, { value: { namespace }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TranslationNamespaceContext.Provider, { value: { namespace }, children });
 };
 var useTranslationNamespace = (overrideNamespace) => {
   const context = (0, import_react6.useContext)(TranslationNamespaceContext);
@@ -3029,12 +2996,13 @@ var useTranslationNamespace = (overrideNamespace) => {
 };
 
 // src/i18n/TranslateText.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var TranslateText = ({
+  overrideNamespace,
   children,
   values
 }) => {
-  const namespace = useTranslationNamespace();
+  const namespace = useTranslationNamespace(overrideNamespace);
   const { t: t2, i18n } = (0, import_react_i18next2.useTranslation)(namespace);
   const { isTranslationMode, canEdit } = useTranslationEdit();
   const supabase = useSupabase();
@@ -3048,7 +3016,7 @@ var TranslateText = ({
     };
   }, []);
   if (!canEdit || !isTranslationMode) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: translatedValue });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: translatedValue });
   }
   const handleSaveTranslations = async (newValues, contextHint) => {
     const upsertData = Object.entries(newValues).map(([langCode, text]) => ({
@@ -3090,9 +3058,9 @@ var TranslateText = ({
     setAnchorEl(null);
   };
   const open = Boolean(anchorEl);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_material3.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_material2.Box,
       {
         component: "span",
         onMouseEnter: handleMouseEnter,
@@ -3122,15 +3090,15 @@ var TranslateText = ({
         children: translatedValue
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_material3.Popper,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_material2.Popper,
       {
         open,
         anchorEl,
         placement: "bottom-start",
         style: { zIndex: 1300 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_material3.Paper,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_material2.Paper,
           {
             elevation: 4,
             onMouseEnter: () => {
@@ -3143,11 +3111,11 @@ var TranslateText = ({
               minWidth: 140,
               boxShadow: "0px 10px 15px -3px rgba(0,0,0,0.1)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material3.MenuList, { dense: true, sx: { py: 0.5 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material3.MenuItem, { onClick: handleOpenDialog, sx: { py: 0.8, px: 1.5 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material3.ListItemIcon, { sx: { minWidth: "28px !important" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Translate2.default, { fontSize: "small", sx: { color: "#d97706" } }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  import_material3.ListItemText,
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material2.MenuList, { dense: true, sx: { py: 0.5 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material2.MenuItem, { onClick: handleOpenDialog, sx: { py: 0.8, px: 1.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material2.ListItemIcon, { sx: { minWidth: "28px !important" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Translate2.default, { fontSize: "small", sx: { color: "#d97706" } }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_material2.ListItemText,
                   {
                     primary: "Localization",
                     slotProps: {
@@ -3162,10 +3130,10 @@ var TranslateText = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material3.MenuItem, { onClick: handleLaunchAction, sx: { py: 0.8, px: 1.5 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material3.ListItemIcon, { sx: { minWidth: "28px !important" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Launch.default, { fontSize: "small", color: "secondary" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  import_material3.ListItemText,
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material2.MenuItem, { onClick: handleLaunchAction, sx: { py: 0.8, px: 1.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material2.ListItemIcon, { sx: { minWidth: "28px !important" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Launch.default, { fontSize: "small", color: "secondary" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_material2.ListItemText,
                   {
                     primary: "Launch action",
                     slotProps: {
@@ -3185,7 +3153,7 @@ var TranslateText = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { display: "inline" }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { display: "inline" }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       TranslationDialog,
       {
         open: isDialogOpen,
@@ -3198,9 +3166,44 @@ var TranslateText = ({
   ] });
 };
 
-// src/UI/components/inputs/TextfieldComponent.tsx
+// src/UI/components/data.display/TranslatableTooltipComponent.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var TranslatableTooltipComponent = ({
+  overrideNamespace,
+  title,
+  disableSpan,
+  children,
+  ...props
+}) => {
+  const { isTranslationMode } = useTranslationEdit();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_material3.Tooltip,
+    {
+      title: typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(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__ */ (0, import_jsx_runtime8.jsx)("span", { children })
+    }
+  );
+};
+
+// src/UI/components/inputs/TextFieldComponent.tsx
+var import_react_i18next3 = require("react-i18next");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var TextfieldComponent = ({
+var TextFieldComponent = ({
+  overrideNamespace,
+  label,
   value = "",
   onChange,
   disabled = false,
@@ -3270,6 +3273,7 @@ var TextfieldComponent = ({
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_material4.TextField,
       {
+        label: typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace, children: label }) : label,
         value,
         onChange,
         disabled,
@@ -3292,7 +3296,7 @@ var TextfieldComponent = ({
             ...slotProps?.input || {},
             readOnly: isReadOnly,
             endAdornment: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material4.InputAdornment, { position: "end", sx: { gap: 0.5 }, children: [
-              hasValue && !isLocked && !disableClearButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { children: clearTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              hasValue && !isLocked && !disableClearButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 import_material4.IconButton,
                 {
                   size: "small",
@@ -3302,7 +3306,7 @@ var TextfieldComponent = ({
                   children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Clear.default, { fontSize: "small" })
                 }
               ) }),
-              hasValue && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { children: copied ? copiedTooltip : copyTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              hasValue && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace, children: copied ? copiedTooltip : copyTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 import_material4.IconButton,
                 {
                   size: "small",
@@ -3352,7 +3356,7 @@ var TextfieldComponent = ({
                   )
                 }
               ) }),
-              isLocked && showLock && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { children: lockTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              isLocked && showLock && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 import_material4.IconButton,
                 {
                   size: "small",
@@ -3414,6 +3418,7 @@ var import_Add = __toESM(require("@mui/icons-material/Add"));
 var import_Remove = __toESM(require("@mui/icons-material/Remove"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var NumberInputComponent = ({
+  overrideNamespace,
   value,
   onChange,
   allowNegative = true,
@@ -3547,9 +3552,10 @@ var NumberInputComponent = ({
   const isDecrementDisabled = disabled || effectiveMin !== void 0 && !isNaN(currentNumeric) && currentNumeric <= effectiveMin;
   const isIncrementDisabled = disabled || maxValue !== void 0 && !isNaN(currentNumeric) && currentNumeric >= maxValue;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    TextfieldComponent,
+    TextFieldComponent,
     {
       ...props,
+      overrideNamespace,
       type: "text",
       disabled,
       value: formatDisplayValue(inputValue),
@@ -3611,11 +3617,267 @@ var NumberInputComponent = ({
   );
 };
 
+// src/UI/components/inputs/UrlComponent.tsx
+var import_react10 = require("react");
+var import_material6 = require("@mui/material");
+var import_Link = __toESM(require("@mui/icons-material/Link"));
+var import_Launch2 = __toESM(require("@mui/icons-material/Launch"));
+var import_ContentCopy2 = __toESM(require("@mui/icons-material/ContentCopy"));
+var import_Check2 = __toESM(require("@mui/icons-material/Check"));
+var import_EditNote = __toESM(require("@mui/icons-material/EditNote"));
+var import_Lock2 = __toESM(require("@mui/icons-material/Lock"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function UrlComponent({
+  overrideNamespace,
+  label,
+  value,
+  onChange,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  error = false,
+  helperText = "",
+  description = "",
+  fullWidth = true,
+  openInNewTab = true,
+  showLock = true,
+  lockTooltip = "Field is not editable",
+  sx
+}) {
+  const [copied, setCopied] = (0, import_react10.useState)(false);
+  const [anchorEl, setAnchorEl] = (0, import_react10.useState)(null);
+  const isViewMode = disabled || readOnly;
+  const currentUrl = typeof value === "object" && value !== null ? value.url || "" : value || "";
+  const currentTitle = typeof value === "object" && value !== null ? value.title || "" : "";
+  const getFormattedUrl = (val) => {
+    if (!val) return "";
+    const trimmed = val.trim();
+    if (trimmed.match(/^[a-zA-Z]+:\/\//)) {
+      return trimmed;
+    }
+    return `https://${trimmed}`;
+  };
+  const finalUrl = getFormattedUrl(currentUrl);
+  const targetAttribute = openInNewTab ? "_blank" : "_self";
+  const displayLabelText = currentTitle.trim() || currentUrl;
+  const handleUrlChange = (newUrl) => {
+    onChange?.({ url: newUrl, title: currentTitle });
+  };
+  const handleTitleChange = (newTitle) => {
+    onChange?.({ url: currentUrl, title: newTitle });
+  };
+  const handleCopy = (e) => {
+    e.stopPropagation();
+    if (!finalUrl) return;
+    navigator.clipboard.writeText(finalUrl);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  const handleOpenLink = (e) => {
+    e.stopPropagation();
+    if (finalUrl) {
+      window.open(finalUrl, targetAttribute, openInNewTab ? "noopener,noreferrer" : void 0);
+    }
+  };
+  const handleInputClick = (e) => {
+    if (isViewMode && finalUrl) {
+      handleOpenLink(e);
+    }
+  };
+  const handleOpenTitleMenu = (e) => {
+    e.stopPropagation();
+    setAnchorEl(e.currentTarget);
+  };
+  const handleCloseTitleMenu = () => {
+    setAnchorEl(null);
+  };
+  const isTitlePopoverOpen = Boolean(anchorEl);
+  const displayHelperText = error ? helperText : description || helperText;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_material6.TextField,
+      {
+        label: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace, children: label }),
+        type: isViewMode ? "text" : "url",
+        value: isViewMode ? displayLabelText : currentUrl,
+        onChange: (e) => handleUrlChange(e.target.value),
+        required,
+        error,
+        disabled,
+        margin: "dense",
+        helperText: displayHelperText,
+        fullWidth,
+        placeholder: "example.com",
+        sx: {
+          "& .MuiInputLabel-asterisk": {
+            color: "red",
+            fontSize: "1.5rem"
+          },
+          "& .MuiInputBase-input": {
+            color: isViewMode && finalUrl ? "primary.main" : void 0,
+            textDecoration: isViewMode && finalUrl ? "underline" : "none",
+            cursor: isViewMode && finalUrl ? "pointer" : void 0,
+            fontWeight: isViewMode && finalUrl ? 500 : void 0
+          },
+          ...sx
+        },
+        slotProps: {
+          htmlInput: {
+            readOnly,
+            onClick: handleInputClick
+          },
+          input: {
+            startAdornment: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Link.default, { fontSize: "small", color: isViewMode && finalUrl ? "primary" : "action" }) }),
+            endAdornment: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material6.InputAdornment, { position: "end", sx: { gap: 0.5 }, children: [
+              !isViewMode && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.Tooltip, { title: currentTitle ? `Title: "${currentTitle}"` : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set link title" }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_material6.IconButton,
+                {
+                  size: "small",
+                  onClick: handleOpenTitleMenu,
+                  color: currentTitle ? "primary" : "default",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_EditNote.default, { fontSize: "small" })
+                }
+              ) }),
+              finalUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.Tooltip, { title: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copied!" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copy link" }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.IconButton, { size: "small", onClick: handleCopy, color: copied ? "success" : "default", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Check2.default, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ContentCopy2.default, { fontSize: "small" }) }) }),
+              isViewMode && showLock && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_material6.IconButton,
+                {
+                  size: "small",
+                  disabled: true,
+                  edge: "end",
+                  "aria-label": "locked input",
+                  sx: {
+                    "&.Mui-disabled": {
+                      color: "text.secondary"
+                    }
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Lock2.default, { fontSize: "small" })
+                }
+              ) }),
+              finalUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Open link" }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.IconButton, { size: "small", onClick: handleOpenLink, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Launch2.default, { fontSize: "small", color: isViewMode ? "primary" : "action" }) }) })
+            ] })
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_material6.Popover,
+      {
+        open: isTitlePopoverOpen,
+        anchorEl,
+        onClose: handleCloseTitleMenu,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        slotProps: {
+          paper: { sx: { p: 2, width: 280 } }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.Typography, { variant: "subtitle2", sx: { mb: 1, fontWeight: "bold" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Link Title (Anchor)" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material6.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Specify the text to display instead of the URL address" }),
+            ":"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_material6.TextField,
+            {
+              size: "small",
+              fullWidth: true,
+              placeholder: "e.g. Instruction",
+              value: currentTitle,
+              onChange: (e) => handleTitleChange(e.target.value),
+              autoFocus: true,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleCloseTitleMenu();
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.Box, { sx: { display: "flex", justifyContent: "flex-end", mt: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.Button, { size: "small", variant: "contained", onClick: handleCloseTitleMenu, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Done" }) }) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/UI/components/inputs/EmailInputComponent.tsx
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+var EmailInputComponent = ({
+  value = "",
+  onChange,
+  onBlur,
+  error: externalError,
+  helperText: externalHelperText,
+  invalidEmailError = "Invalid email address",
+  disableValidation = false,
+  onValidationChange,
+  ...props
+}) => {
+  const [internalError, setInternalError] = (0, import_react11.useState)(null);
+  const validateEmail = (val) => {
+    if (disableValidation) return true;
+    const stringVal = String(val ?? "").trim();
+    if (!stringVal) {
+      setInternalError(null);
+      onValidationChange?.(true);
+      return true;
+    }
+    const isValid = EMAIL_REGEX.test(stringVal);
+    const errorMessage = isValid ? null : invalidEmailError;
+    setInternalError(errorMessage);
+    onValidationChange?.(isValid);
+    return isValid;
+  };
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    if (internalError) {
+      validateEmail(newValue);
+    }
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  const handleBlur = (e) => {
+    validateEmail(e.target.value);
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+  const hasError = Boolean(externalError || internalError);
+  const displayHelperText = externalHelperText || internalError || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    TextFieldComponent,
+    {
+      type: "email",
+      value,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      error: hasError,
+      helperText: displayHelperText,
+      ...props
+    }
+  );
+};
+
 // src/UI/index.ts
-var CardForm = {
+var UI = {
   Inputs: {
-    TextField: TextfieldComponent,
-    NumberField: NumberInputComponent
+    TextField: TextFieldComponent,
+    NumberField: NumberInputComponent,
+    EmailField: EmailInputComponent,
+    Url: UrlComponent
+  },
+  DataDisplay: {
+    TranslatableTooltip: TranslatableTooltipComponent
   }
   /*Layout: {
     Row: FormRow,
@@ -3623,10 +3885,10 @@ var CardForm = {
 };
 
 // src/context/LocalizationProvider.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_react_i18next4 = require("react-i18next");
 var import_moment_with_locales = __toESM(require("moment/min/moment-with-locales"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var DEFAULT_DATETIME_FORMATS = {
   uk: "DD.MM.YYYY, HH:mm",
   de: "DD.MM.YYYY, HH:mm",
@@ -3651,14 +3913,14 @@ var DEFAULT_TIME_FORMATS = {
   fr: "HH:mm:ss",
   it: "HH:mm:ss"
 };
-var LocalizationContext = (0, import_react10.createContext)(void 0);
+var LocalizationContext = (0, import_react12.createContext)(void 0);
 var LocalizationProvider = ({ children }) => {
   const supabase = useSupabase();
   const { i18n } = (0, import_react_i18next4.useTranslation)();
-  const [languages, setLanguages] = (0, import_react10.useState)([]);
-  const [isLoadingLangs, setIsLoadingLangs] = (0, import_react10.useState)(true);
-  const [languagesError, setLanguagesError] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
+  const [languages, setLanguages] = (0, import_react12.useState)([]);
+  const [isLoadingLangs, setIsLoadingLangs] = (0, import_react12.useState)(true);
+  const [languagesError, setLanguagesError] = (0, import_react12.useState)(null);
+  (0, import_react12.useEffect)(() => {
     let isMounted = true;
     const fetchLanguages = async () => {
       try {
@@ -3720,7 +3982,7 @@ var LocalizationProvider = ({ children }) => {
   const changeLanguage2 = async (lang) => {
     await i18n.changeLanguage(lang);
   };
-  const value = (0, import_react10.useMemo)(
+  const value = (0, import_react12.useMemo)(
     () => ({
       currentLang,
       languages,
@@ -3737,10 +3999,10 @@ var LocalizationProvider = ({ children }) => {
     }),
     [currentLang, languages, isLoadingLangs, languagesError]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LocalizationContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LocalizationContext.Provider, { value, children });
 };
 var useLocalization = () => {
-  const context = (0, import_react10.useContext)(LocalizationContext);
+  const context = (0, import_react12.useContext)(LocalizationContext);
   if (!context) {
     throw new Error("useLocalization must be used within a LocalizationProvider");
   }
@@ -3748,9 +4010,9 @@ var useLocalization = () => {
 };
 
 // src/context/ThemeProvider.tsx
-var import_react11 = require("react");
-var import_material6 = require("@mui/material");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_material7 = require("@mui/material");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_LIGHT_COLORS = {
   primary: "#1976d2",
   secondary: "#9c27b0",
@@ -3795,7 +4057,7 @@ var INITIAL_THEME_CONFIG = {
 var buildMuiTheme = (config) => {
   const currentMode = config.mode;
   const currentColors = config.colors?.[currentMode] || (currentMode === "light" ? DEFAULT_LIGHT_COLORS : DEFAULT_DARK_COLORS);
-  return (0, import_material6.createTheme)({
+  return (0, import_material7.createTheme)({
     palette: {
       mode: currentMode,
       primary: {
@@ -3880,14 +4142,14 @@ var buildMuiTheme = (config) => {
     }
   });
 };
-var ThemeContext = (0, import_react11.createContext)(void 0);
+var ThemeContext = (0, import_react13.createContext)(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 { user, isAuthenticated, loading: isAuthLoading } = useAuth();
   const userId = user?.id;
-  const [themeConfig, setThemeConfig] = (0, import_react11.useState)(() => {
+  const [themeConfig, setThemeConfig] = (0, import_react13.useState)(() => {
     const saved = localStorage.getItem(THEME_STORAGE_KEY);
     if (saved) {
       try {
@@ -3897,7 +4159,7 @@ var ThemeProvider = ({ children }) => {
     }
     return INITIAL_THEME_CONFIG;
   });
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (isAuthLoading) return;
     if (isAuthenticated && userId) {
       const fetchActiveTheme = async () => {
@@ -3931,7 +4193,7 @@ var ThemeProvider = ({ children }) => {
       localStorage.removeItem(THEME_MODE_STORAGE_KEY);
     }
   }, [isAuthenticated, isAuthLoading, userId]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (isAuthenticated) {
       localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(themeConfig));
       localStorage.setItem(THEME_MODE_STORAGE_KEY, themeConfig.mode);
@@ -3944,21 +4206,21 @@ var ThemeProvider = ({ children }) => {
   const toggleTheme = () => {
     setMode(mode === "light" ? "dark" : "light");
   };
-  const theme = (0, import_react11.useMemo)(() => buildMuiTheme(themeConfig), [themeConfig]);
+  const theme = (0, import_react13.useMemo)(() => buildMuiTheme(themeConfig), [themeConfig]);
   const displayState = {
-    isMobile: (0, import_material6.useMediaQuery)(theme.breakpoints.down("sm")),
-    isTablet: (0, import_material6.useMediaQuery)(theme.breakpoints.between("sm", "md")),
-    isDesktop: (0, import_material6.useMediaQuery)(theme.breakpoints.between("md", "lg")),
-    isWideDesktop: (0, import_material6.useMediaQuery)(theme.breakpoints.between("lg", "xl")),
-    isSuperWideDesktop: (0, import_material6.useMediaQuery)(theme.breakpoints.up("xl"))
+    isMobile: (0, import_material7.useMediaQuery)(theme.breakpoints.down("sm")),
+    isTablet: (0, import_material7.useMediaQuery)(theme.breakpoints.between("sm", "md")),
+    isDesktop: (0, import_material7.useMediaQuery)(theme.breakpoints.between("md", "lg")),
+    isWideDesktop: (0, import_material7.useMediaQuery)(theme.breakpoints.between("lg", "xl")),
+    isSuperWideDesktop: (0, import_material7.useMediaQuery)(theme.breakpoints.up("xl"))
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ThemeContext.Provider, { value: { mode, toggleTheme, setMode, theme, themeConfig, setThemeConfig, displayState }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_material6.ThemeProvider, { theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material6.CssBaseline, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ThemeContext.Provider, { value: { mode, toggleTheme, setMode, theme, themeConfig, setThemeConfig, displayState }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.ThemeProvider, { theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.CssBaseline, {}),
     children
   ] }) });
 };
 var useAppTheme = () => {
-  const context = (0, import_react11.useContext)(ThemeContext);
+  const context = (0, import_react13.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useAppTheme should be used within the ThemeProvider");
   }
@@ -3966,53 +4228,53 @@ var useAppTheme = () => {
 };
 
 // src/context/BreadcrumbProvider.tsx
-var import_react12 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var BreadcrumbContext = (0, import_react12.createContext)({
+var import_react14 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var BreadcrumbContext = (0, import_react14.createContext)({
   breadcrumbTitles: {},
   setBreadcrumbTitle: () => {
   }
 });
 var BreadcrumbProvider = ({ children }) => {
-  const [breadcrumbTitles, setBreadcrumbTitles] = (0, import_react12.useState)({});
+  const [breadcrumbTitles, setBreadcrumbTitles] = (0, import_react14.useState)({});
   const setBreadcrumbTitle = (path, title) => {
     setBreadcrumbTitles((prev) => {
       if (prev[path] === title) return prev;
       return { ...prev, [path]: title };
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BreadcrumbContext.Provider, { value: { breadcrumbTitles, setBreadcrumbTitle }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbContext.Provider, { value: { breadcrumbTitles, setBreadcrumbTitle }, children });
 };
-var useBreadcrumb = () => (0, import_react12.useContext)(BreadcrumbContext);
+var useBreadcrumb = () => (0, import_react14.useContext)(BreadcrumbContext);
 
 // src/context/ToastProvider.tsx
-var import_react13 = require("react");
-var import_material7 = require("@mui/material");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var ToastContext = (0, import_react13.createContext)(void 0);
+var import_react15 = require("react");
+var import_material8 = require("@mui/material");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ToastContext = (0, import_react15.createContext)(void 0);
 var ToastProvider = ({ children }) => {
-  const [toast, setToast] = (0, import_react13.useState)(null);
-  const showToast = (0, import_react13.useCallback)((text, type = "info") => {
+  const [toast, setToast] = (0, import_react15.useState)(null);
+  const showToast = (0, import_react15.useCallback)((text, type = "info") => {
     setToast({ text, type });
   }, []);
-  const hideToast = (0, import_react13.useCallback)(() => {
+  const hideToast = (0, import_react15.useCallback)(() => {
     setToast(null);
   }, []);
-  const contextValue = (0, import_react13.useMemo)(() => ({
+  const contextValue = (0, import_react15.useMemo)(() => ({
     showToast,
     hideToast
   }), [showToast, hideToast]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ToastContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ToastContext.Provider, { value: contextValue, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_material7.Snackbar,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_material8.Snackbar,
       {
         open: Boolean(toast),
         autoHideDuration: 3500,
         onClose: hideToast,
         anchorOrigin: { vertical: "bottom", horizontal: "center" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_material7.Alert,
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_material8.Alert,
           {
             severity: toast?.type || "info",
             variant: "filled",
@@ -4025,7 +4287,7 @@ var ToastProvider = ({ children }) => {
   ] });
 };
 var useToast = () => {
-  const context = (0, import_react13.useContext)(ToastContext);
+  const context = (0, import_react15.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -4033,22 +4295,22 @@ var useToast = () => {
 };
 
 // src/context/ConfirmationProvider.tsx
-var import_react14 = require("react");
-var import_material8 = require("@mui/material");
+var import_react16 = require("react");
+var import_material9 = require("@mui/material");
 var import_icons_material = require("@mui/icons-material");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var ConfirmContext = (0, import_react14.createContext)(null);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ConfirmContext = (0, import_react16.createContext)(null);
 var SEVERITY_ICONS = {
-  error: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material.Error, { color: "error", sx: { fontSize: 40 } }),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material.WarningAmberOutlined, { color: "warning", sx: { fontSize: 40 } }),
-  info: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material.InfoOutlined, { color: "info", sx: { fontSize: 40 } }),
-  success: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material.CheckCircleOutlined, { color: "success", sx: { fontSize: 40 } })
+  error: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_material.Error, { color: "error", sx: { fontSize: 40 } }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_material.WarningAmberOutlined, { color: "warning", sx: { fontSize: 40 } }),
+  info: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_material.InfoOutlined, { color: "info", sx: { fontSize: 40 } }),
+  success: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_material.CheckCircleOutlined, { color: "success", sx: { fontSize: 40 } })
 };
 var ConfirmationProvider = ({ children }) => {
-  const [open, setOpen] = (0, import_react14.useState)(false);
-  const [options, setOptions] = (0, import_react14.useState)(null);
-  const [resolver, setResolver] = (0, import_react14.useState)(null);
-  const confirm = (0, import_react14.useCallback)((opts) => {
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const [options, setOptions] = (0, import_react16.useState)(null);
+  const [resolver, setResolver] = (0, import_react16.useState)(null);
+  const confirm = (0, import_react16.useCallback)((opts) => {
     setOptions(opts);
     setOpen(true);
     return new Promise((resolve) => {
@@ -4062,10 +4324,10 @@ var ConfirmationProvider = ({ children }) => {
     }
   };
   const severityType = options?.type || "info";
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ConfirmContext.Provider, { value: { confirm }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ConfirmContext.Provider, { value: { confirm }, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-      import_material8.Dialog,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      import_material9.Dialog,
       {
         open,
         onClose: () => handleClose("cancel"),
@@ -4074,38 +4336,38 @@ var ConfirmationProvider = ({ children }) => {
         disableEnforceFocus: true,
         disableRestoreFocus: true,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material8.DialogTitle, { sx: { display: "flex", alignItems: "center", gap: 1.5, pb: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material9.DialogTitle, { sx: { display: "flex", alignItems: "center", gap: 1.5, pb: 1 }, children: [
             SEVERITY_ICONS[severityType],
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.Box, { component: "span", sx: { fontWeight: 600 }, children: options?.title || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TranslateText, { children: "Confirmation" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material9.Box, { component: "span", sx: { fontWeight: 600 }, children: options?.title || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TranslateText, { children: "Confirmation" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.DialogContent, { sx: { py: 2 }, dividers: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.DialogContentText, { color: "text.secondary", children: options?.message }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material8.DialogActions, { sx: { pt: 2, px: 2, justifyContent: "flex-end", gap: 1 }, children: [
-            (options?.showCancelButton ?? true) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_material8.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material9.DialogContent, { sx: { py: 2 }, dividers: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material9.DialogContentText, { color: "text.secondary", children: options?.message }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material9.DialogActions, { sx: { pt: 2, px: 2, justifyContent: "flex-end", gap: 1 }, children: [
+            (options?.showCancelButton ?? true) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              import_material9.Button,
               {
                 onClick: () => handleClose("cancel"),
                 color: "inherit",
                 variant: "text",
-                children: options?.cancelText || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TranslateText, { children: "Cancel" })
+                children: options?.cancelText || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TranslateText, { children: "Cancel" })
               }
             ),
-            options?.showNoButton && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_material8.Button,
+            options?.showNoButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              import_material9.Button,
               {
                 onClick: () => handleClose("no"),
                 color: "inherit",
                 variant: "outlined",
-                children: options?.noText || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TranslateText, { children: "No" })
+                children: options?.noText || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TranslateText, { children: "No" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_material8.Button,
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              import_material9.Button,
               {
                 onClick: () => handleClose("yes"),
                 color: options?.confirmColor || (severityType === "error" ? "error" : "primary"),
                 variant: "contained",
                 autoFocus: true,
-                children: options?.confirmText || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TranslateText, { children: "Yes" })
+                children: options?.confirmText || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TranslateText, { children: "Yes" })
               }
             )
           ] })
@@ -4115,25 +4377,39 @@ var ConfirmationProvider = ({ children }) => {
   ] });
 };
 var useConfirmation = () => {
-  const context = (0, import_react14.useContext)(ConfirmContext);
+  const context = (0, import_react16.useContext)(ConfirmContext);
   if (!context) {
     throw new Error("useConfirm must be used within a ConfirmProvider");
   }
   return context.confirm;
 };
+
+// src/context/index.ts
+var Providers = {
+  Supabase: SupabaseProvider,
+  Translate: TranslateProvider,
+  TranslationEdit: TranslationEditProvider,
+  Localization: LocalizationProvider,
+  Theme: ThemeProvider,
+  Breadcrumb: BreadcrumbProvider,
+  Toast: ToastProvider,
+  Confirmation: ConfirmationProvider,
+  AI: AIProvider
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIProvider,
   BreadcrumbProvider,
-  CardForm,
   ConfirmationProvider,
   LocalizationProvider,
+  Providers,
   SupabaseProvider,
   ThemeProvider,
   ToastProvider,
   TranslateProvider,
   TranslateText,
   TranslationEditProvider,
+  UI,
   useAI,
   useAppTheme,
   useBreadcrumb,