@serhii.olishevskyi/docs 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -1,4 +1,4 @@
-// src/UI/components/inputs/TextfieldComponent.tsx
+// src/UI/components/inputs/TextFieldComponent.tsx
 import { useState as useState5 } from "react";
 import {
   TextField as TextField2,
@@ -13,8 +13,8 @@ import CheckIcon from "@mui/icons-material/Check";
 import ClearIcon from "@mui/icons-material/Clear";
 import TranslateIcon3 from "@mui/icons-material/Translate";
 
-// src/UI/components/inputs/TranslatableTooltip.tsx
-import { Tooltip } from "@mui/material";
+// src/UI/components/data.display/TranslatableTooltipComponent.tsx
+import { Tooltip as Tooltip2 } from "@mui/material";
 
 // src/context/TranslationEditProvider.tsx
 import { createContext as createContext3, useContext as useContext3, useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
@@ -2527,39 +2527,33 @@ var useTranslationEdit = () => {
   return context;
 };
 
-// src/UI/components/inputs/TranslatableTooltip.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var TranslatableTooltip = ({
-  title,
-  disableSpan,
-  children,
-  ...props
-}) => {
-  const { isTranslationMode } = useTranslationEdit();
-  return /* @__PURE__ */ jsx4(
-    Tooltip,
-    {
-      title,
-      slotProps: {
-        popper: {
-          sx: isTranslationMode ? {
-            pointerEvents: "auto",
-            // Разрешаем клики внутри тултипа
-            "& .MuiTooltip-tooltip": {
-              pointerEvents: "auto"
-            }
-          } : void 0
-        }
-      },
-      leaveDelay: isTranslationMode ? 1e3 : 100,
-      ...props,
-      children: disableSpan ? children : /* @__PURE__ */ jsx4("span", { children })
-    }
-  );
-};
+// 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/UI/components/inputs/TextfieldComponent.tsx
-import { useTranslation as useTranslation2 } from "react-i18next";
+// 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 = {
@@ -2620,38 +2614,10 @@ ${params.contextHint ? `Context Hint: "${params.contextHint}"` : ""}`;
   }
 };
 
-// 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 as Tooltip2,
-  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/context/AIProvider.tsx
 import { createContext as createContext4, useContext as useContext4, useMemo as useMemo2 } from "react";
 import { GoogleGenAI } from "@google/genai";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var AIContext = createContext4(null);
 var AIProvider = ({
   children,
@@ -2734,7 +2700,7 @@ var AIProvider = ({
       }
     };
   }, [apiKey, provider, modelName]);
-  return /* @__PURE__ */ jsx5(AIContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx4(AIContext.Provider, { value: contextValue, children });
 };
 var useAI = () => {
   const context = useContext4(AIContext);
@@ -2745,7 +2711,7 @@ var useAI = () => {
 };
 
 // src/i18n/TranslationDialog.tsx
-import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 var TranslationDialog = ({
   open,
   onClose,
@@ -2881,14 +2847,14 @@ var TranslationDialog = ({
               ] })
             ] })
           ] }),
-          !loading && /* @__PURE__ */ jsx6(
+          !loading && /* @__PURE__ */ jsx5(
             Button,
             {
               type: "button",
               size: "small",
               variant: "outlined",
               color: "secondary",
-              startIcon: isTranslatingAll ? /* @__PURE__ */ jsx6(CircularProgress, { size: 16, color: "inherit" }) : /* @__PURE__ */ jsx6(TranslateIcon, { fontSize: "small" }),
+              startIcon: isTranslatingAll ? /* @__PURE__ */ jsx5(CircularProgress, { size: 16, color: "inherit" }) : /* @__PURE__ */ jsx5(TranslateIcon, { fontSize: "small" }),
               onClick: handleTranslateAll,
               disabled: isBusy,
               sx: { flexShrink: 0, ml: 2, whiteSpace: "nowrap" },
@@ -2897,14 +2863,14 @@ var TranslationDialog = ({
           )
         ] }),
         /* @__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: [
+          error && /* @__PURE__ */ jsx5(Alert, { severity: "error", onClose: () => setError(null), sx: { mb: 2 }, children: error }),
+          loading ? /* @__PURE__ */ jsx5(Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ jsx5(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__ */ jsx5(LightbulbIcon, { color: "warning", fontSize: "small" }),
+                /* @__PURE__ */ jsx5(Typography, { variant: "subtitle2", sx: { fontWeight: 600 }, children: "Context Hint / Clarification" })
               ] }),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx5(
                 TextField,
                 {
                   fullWidth: true,
@@ -2920,7 +2886,7 @@ var TranslationDialog = ({
               )
             ] }),
             languages.map((lang) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx5(
                 Box,
                 {
                   sx: {
@@ -2935,7 +2901,7 @@ var TranslationDialog = ({
                   dangerouslySetInnerHTML: { __html: lang.svg_flag }
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx5(
                 TextField,
                 {
                   fullWidth: true,
@@ -2947,22 +2913,22 @@ var TranslationDialog = ({
                   disabled: isBusy
                 }
               ),
-              /* @__PURE__ */ jsx6(Tooltip2, { title: "Translate with context hint", children: /* @__PURE__ */ jsx6("span", { children: /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx5(Tooltip, { title: "Translate with context hint", children: /* @__PURE__ */ jsx5("span", { children: /* @__PURE__ */ jsx5(
                 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" })
+                  children: translatingCode === lang.code ? /* @__PURE__ */ jsx5(CircularProgress, { size: 20, color: "inherit" }) : /* @__PURE__ */ jsx5(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(
+          /* @__PURE__ */ jsx5(Button, { onClick: onClose, disabled: isBusy, color: "inherit", type: "button", children: "Cancel" }),
+          /* @__PURE__ */ jsx5(
             Button,
             {
               onClick: handleSaveAll,
@@ -2980,13 +2946,13 @@ var TranslationDialog = ({
 
 // src/context/TranslateProvider.tsx
 import { createContext as createContext5, useContext as useContext5 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var TranslationNamespaceContext = createContext5({
   namespace: "common"
   // значение по умолчанию
 });
 var TranslateProvider = ({ namespace, children }) => {
-  return /* @__PURE__ */ jsx7(TranslationNamespaceContext.Provider, { value: { namespace }, children });
+  return /* @__PURE__ */ jsx6(TranslationNamespaceContext.Provider, { value: { namespace }, children });
 };
 var useTranslationNamespace = (overrideNamespace) => {
   const context = useContext5(TranslationNamespaceContext);
@@ -2994,12 +2960,13 @@ var useTranslationNamespace = (overrideNamespace) => {
 };
 
 // src/i18n/TranslateText.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var TranslateText = ({
+  overrideNamespace,
   children,
   values
 }) => {
-  const namespace = useTranslationNamespace();
+  const namespace = useTranslationNamespace(overrideNamespace);
   const { t: t2, i18n } = useTranslation(namespace);
   const { isTranslationMode, canEdit } = useTranslationEdit();
   const supabase = useSupabase();
@@ -3013,7 +2980,7 @@ var TranslateText = ({
     };
   }, []);
   if (!canEdit || !isTranslationMode) {
-    return /* @__PURE__ */ jsx8(Fragment, { children: translatedValue });
+    return /* @__PURE__ */ jsx7(Fragment, { children: translatedValue });
   }
   const handleSaveTranslations = async (newValues, contextHint) => {
     const upsertData = Object.entries(newValues).map(([langCode, text]) => ({
@@ -3056,7 +3023,7 @@ var TranslateText = ({
   };
   const open = Boolean(anchorEl);
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       Box2,
       {
         component: "span",
@@ -3087,14 +3054,14 @@ var TranslateText = ({
         children: translatedValue
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       Popper,
       {
         open,
         anchorEl,
         placement: "bottom-start",
         style: { zIndex: 1300 },
-        children: /* @__PURE__ */ jsx8(
+        children: /* @__PURE__ */ jsx7(
           Paper2,
           {
             elevation: 4,
@@ -3110,8 +3077,8 @@ var TranslateText = ({
             },
             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__ */ jsx8(ListItemIcon, { sx: { minWidth: "28px !important" }, children: /* @__PURE__ */ jsx8(TranslateIcon2, { fontSize: "small", sx: { color: "#d97706" } }) }),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx7(ListItemIcon, { sx: { minWidth: "28px !important" }, children: /* @__PURE__ */ jsx7(TranslateIcon2, { fontSize: "small", sx: { color: "#d97706" } }) }),
+                /* @__PURE__ */ jsx7(
                   ListItemText,
                   {
                     primary: "Localization",
@@ -3128,8 +3095,8 @@ var TranslateText = ({
                 )
               ] }),
               /* @__PURE__ */ jsxs2(MenuItem, { onClick: handleLaunchAction, sx: { py: 0.8, px: 1.5 }, children: [
-                /* @__PURE__ */ jsx8(ListItemIcon, { sx: { minWidth: "28px !important" }, children: /* @__PURE__ */ jsx8(LaunchIcon, { fontSize: "small", color: "secondary" }) }),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx7(ListItemIcon, { sx: { minWidth: "28px !important" }, children: /* @__PURE__ */ jsx7(LaunchIcon, { fontSize: "small", color: "secondary" }) }),
+                /* @__PURE__ */ jsx7(
                   ListItemText,
                   {
                     primary: "Launch action",
@@ -3150,7 +3117,7 @@ var TranslateText = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx8("span", { style: { display: "inline" }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7("span", { style: { display: "inline" }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx7(
       TranslationDialog,
       {
         open: isDialogOpen,
@@ -3163,9 +3130,44 @@ var TranslateText = ({
   ] });
 };
 
-// src/UI/components/inputs/TextfieldComponent.tsx
+// src/UI/components/data.display/TranslatableTooltipComponent.tsx
+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
+        }
+      },
+      leaveDelay: isTranslationMode ? 1e3 : 100,
+      ...props,
+      children: disableSpan ? children : /* @__PURE__ */ jsx8("span", { children })
+    }
+  );
+};
+
+// src/UI/components/inputs/TextFieldComponent.tsx
+import { useTranslation as useTranslation2 } from "react-i18next";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
-var TextfieldComponent = ({
+var TextFieldComponent = ({
+  overrideNamespace,
+  label,
   value = "",
   onChange,
   disabled = false,
@@ -3235,6 +3237,7 @@ var TextfieldComponent = ({
     /* @__PURE__ */ jsx9(
       TextField2,
       {
+        label: typeof label === "string" ? /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: label }) : label,
         value,
         onChange,
         disabled,
@@ -3257,7 +3260,7 @@ var TextfieldComponent = ({
             ...slotProps?.input || {},
             readOnly: isReadOnly,
             endAdornment: /* @__PURE__ */ jsxs3(InputAdornment, { position: "end", sx: { gap: 0.5 }, children: [
-              hasValue && !isLocked && !disableClearButton && /* @__PURE__ */ jsx9(TranslatableTooltip, { title: /* @__PURE__ */ jsx9(TranslateText, { children: clearTooltip }), children: /* @__PURE__ */ jsx9(
+              hasValue && !isLocked && !disableClearButton && /* @__PURE__ */ jsx9(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ jsx9(
                 IconButton2,
                 {
                   size: "small",
@@ -3267,7 +3270,7 @@ var TextfieldComponent = ({
                   children: /* @__PURE__ */ jsx9(ClearIcon, { fontSize: "small" })
                 }
               ) }),
-              hasValue && /* @__PURE__ */ jsx9(TranslatableTooltip, { title: /* @__PURE__ */ jsx9(TranslateText, { children: copied ? copiedTooltip : copyTooltip }), children: /* @__PURE__ */ jsx9(
+              hasValue && /* @__PURE__ */ jsx9(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: copied ? copiedTooltip : copyTooltip }), children: /* @__PURE__ */ jsx9(
                 IconButton2,
                 {
                   size: "small",
@@ -3317,7 +3320,7 @@ var TextfieldComponent = ({
                   )
                 }
               ) }),
-              isLocked && showLock && /* @__PURE__ */ jsx9(TranslatableTooltip, { title: /* @__PURE__ */ jsx9(TranslateText, { children: lockTooltip }), children: /* @__PURE__ */ jsx9(
+              isLocked && showLock && /* @__PURE__ */ jsx9(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ jsx9(
                 IconButton2,
                 {
                   size: "small",
@@ -3379,6 +3382,7 @@ import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var NumberInputComponent = ({
+  overrideNamespace,
   value,
   onChange,
   allowNegative = true,
@@ -3512,9 +3516,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__ */ jsx10(
-    TextfieldComponent,
+    TextFieldComponent,
     {
       ...props,
+      overrideNamespace,
       type: "text",
       disabled,
       value: formatDisplayValue(inputValue),
@@ -3576,11 +3581,276 @@ var NumberInputComponent = ({
   );
 };
 
+// src/UI/components/inputs/UrlComponent.tsx
+import { useState as useState7 } from "react";
+import {
+  TextField as TextField3,
+  InputAdornment as InputAdornment3,
+  IconButton as IconButton4,
+  Tooltip as Tooltip4,
+  Popover,
+  Box as Box5,
+  Typography as Typography2,
+  Button as Button2
+} from "@mui/material";
+import LinkIcon from "@mui/icons-material/Link";
+import LaunchIcon2 from "@mui/icons-material/Launch";
+import ContentCopyIcon2 from "@mui/icons-material/ContentCopy";
+import CheckIcon2 from "@mui/icons-material/Check";
+import EditNoteIcon from "@mui/icons-material/EditNote";
+import LockIcon2 from "@mui/icons-material/Lock";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs5 } from "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] = useState7(false);
+  const [anchorEl, setAnchorEl] = useState7(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__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx11(
+      TextField3,
+      {
+        label: /* @__PURE__ */ jsx11(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__ */ jsx11(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx11(LinkIcon, { fontSize: "small", color: isViewMode && finalUrl ? "primary" : "action" }) }),
+            endAdornment: /* @__PURE__ */ jsxs5(InputAdornment3, { position: "end", sx: { gap: 0.5 }, children: [
+              !isViewMode && /* @__PURE__ */ jsx11(Tooltip4, { title: currentTitle ? `Title: "${currentTitle}"` : /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set link title" }), children: /* @__PURE__ */ jsx11(
+                IconButton4,
+                {
+                  size: "small",
+                  onClick: handleOpenTitleMenu,
+                  color: currentTitle ? "primary" : "default",
+                  children: /* @__PURE__ */ jsx11(EditNoteIcon, { fontSize: "small" })
+                }
+              ) }),
+              finalUrl && /* @__PURE__ */ jsx11(Tooltip4, { title: copied ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copied!" }) : /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copy link" }), children: /* @__PURE__ */ jsx11(IconButton4, { size: "small", onClick: handleCopy, color: copied ? "success" : "default", children: copied ? /* @__PURE__ */ jsx11(CheckIcon2, { fontSize: "small" }) : /* @__PURE__ */ jsx11(ContentCopyIcon2, { fontSize: "small" }) }) }),
+              isViewMode && showLock && /* @__PURE__ */ jsx11(Tooltip4, { title: /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ jsx11(
+                IconButton4,
+                {
+                  size: "small",
+                  disabled: true,
+                  edge: "end",
+                  "aria-label": "locked input",
+                  sx: {
+                    "&.Mui-disabled": {
+                      color: "text.secondary"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx11(LockIcon2, { fontSize: "small" })
+                }
+              ) }),
+              finalUrl && /* @__PURE__ */ jsx11(Tooltip4, { title: /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Open link" }), children: /* @__PURE__ */ jsx11(IconButton4, { size: "small", onClick: handleOpenLink, children: /* @__PURE__ */ jsx11(LaunchIcon2, { fontSize: "small", color: isViewMode ? "primary" : "action" }) }) })
+            ] })
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs5(
+      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__ */ jsx11(Typography2, { variant: "subtitle2", sx: { mb: 1, fontWeight: "bold" }, children: /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Link Title (Anchor)" }) }),
+          /* @__PURE__ */ jsxs5(Typography2, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: [
+            /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Specify the text to display instead of the URL address" }),
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx11(
+            TextField3,
+            {
+              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__ */ jsx11(Box5, { sx: { display: "flex", justifyContent: "flex-end", mt: 1.5 }, children: /* @__PURE__ */ jsx11(Button2, { size: "small", variant: "contained", onClick: handleCloseTitleMenu, children: /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Done" }) }) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/UI/components/inputs/EmailInputComponent.tsx
+import { useState as useState8 } from "react";
+import { jsx as jsx12 } from "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] = useState8(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__ */ jsx12(
+    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,
@@ -3588,10 +3858,10 @@ var CardForm = {
 };
 
 // src/context/LocalizationProvider.tsx
-import { createContext as createContext6, useContext as useContext6, useMemo as useMemo4, useEffect as useEffect6, useState as useState7 } from "react";
+import { createContext as createContext6, useContext as useContext6, useMemo as useMemo4, useEffect as useEffect6, useState as useState9 } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import moment from "moment/min/moment-with-locales";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var DEFAULT_DATETIME_FORMATS = {
   uk: "DD.MM.YYYY, HH:mm",
   de: "DD.MM.YYYY, HH:mm",
@@ -3620,9 +3890,9 @@ var LocalizationContext = createContext6(void 0);
 var LocalizationProvider = ({ children }) => {
   const supabase = useSupabase();
   const { i18n } = useTranslation3();
-  const [languages, setLanguages] = useState7([]);
-  const [isLoadingLangs, setIsLoadingLangs] = useState7(true);
-  const [languagesError, setLanguagesError] = useState7(null);
+  const [languages, setLanguages] = useState9([]);
+  const [isLoadingLangs, setIsLoadingLangs] = useState9(true);
+  const [languagesError, setLanguagesError] = useState9(null);
   useEffect6(() => {
     let isMounted = true;
     const fetchLanguages = async () => {
@@ -3702,7 +3972,7 @@ var LocalizationProvider = ({ children }) => {
     }),
     [currentLang, languages, isLoadingLangs, languagesError]
   );
-  return /* @__PURE__ */ jsx11(LocalizationContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx13(LocalizationContext.Provider, { value, children });
 };
 var useLocalization = () => {
   const context = useContext6(LocalizationContext);
@@ -3713,9 +3983,9 @@ var useLocalization = () => {
 };
 
 // src/context/ThemeProvider.tsx
-import { createContext as createContext7, useContext as useContext7, useMemo as useMemo5, useState as useState8, useEffect as useEffect7 } from "react";
+import { createContext as createContext7, useContext as useContext7, useMemo as useMemo5, useState as useState10, useEffect as useEffect7 } from "react";
 import { createTheme, ThemeProvider as MuiThemeProvider, CssBaseline, useMediaQuery } from "@mui/material";
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_LIGHT_COLORS = {
   primary: "#1976d2",
   secondary: "#9c27b0",
@@ -3852,7 +4122,7 @@ var ThemeProvider = ({ children }) => {
   const supabase = useSupabase();
   const { user, isAuthenticated, loading: isAuthLoading } = useAuth();
   const userId = user?.id;
-  const [themeConfig, setThemeConfig] = useState8(() => {
+  const [themeConfig, setThemeConfig] = useState10(() => {
     const saved = localStorage.getItem(THEME_STORAGE_KEY);
     if (saved) {
       try {
@@ -3917,8 +4187,8 @@ var ThemeProvider = ({ children }) => {
     isWideDesktop: useMediaQuery(theme.breakpoints.between("lg", "xl")),
     isSuperWideDesktop: useMediaQuery(theme.breakpoints.up("xl"))
   };
-  return /* @__PURE__ */ jsx12(ThemeContext.Provider, { value: { mode, toggleTheme, setMode, theme, themeConfig, setThemeConfig, displayState }, children: /* @__PURE__ */ jsxs5(MuiThemeProvider, { theme, children: [
-    /* @__PURE__ */ jsx12(CssBaseline, {}),
+  return /* @__PURE__ */ jsx14(ThemeContext.Provider, { value: { mode, toggleTheme, setMode, theme, themeConfig, setThemeConfig, displayState }, children: /* @__PURE__ */ jsxs6(MuiThemeProvider, { theme, children: [
+    /* @__PURE__ */ jsx14(CssBaseline, {}),
     children
   ] }) });
 };
@@ -3931,32 +4201,32 @@ var useAppTheme = () => {
 };
 
 // src/context/BreadcrumbProvider.tsx
-import { createContext as createContext8, useContext as useContext8, useState as useState9 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { createContext as createContext8, useContext as useContext8, useState as useState11 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var BreadcrumbContext = createContext8({
   breadcrumbTitles: {},
   setBreadcrumbTitle: () => {
   }
 });
 var BreadcrumbProvider = ({ children }) => {
-  const [breadcrumbTitles, setBreadcrumbTitles] = useState9({});
+  const [breadcrumbTitles, setBreadcrumbTitles] = useState11({});
   const setBreadcrumbTitle = (path, title) => {
     setBreadcrumbTitles((prev) => {
       if (prev[path] === title) return prev;
       return { ...prev, [path]: title };
     });
   };
-  return /* @__PURE__ */ jsx13(BreadcrumbContext.Provider, { value: { breadcrumbTitles, setBreadcrumbTitle }, children });
+  return /* @__PURE__ */ jsx15(BreadcrumbContext.Provider, { value: { breadcrumbTitles, setBreadcrumbTitle }, children });
 };
 var useBreadcrumb = () => useContext8(BreadcrumbContext);
 
 // src/context/ToastProvider.tsx
-import { createContext as createContext9, useContext as useContext9, useState as useState10, useCallback as useCallback4, useMemo as useMemo6 } from "react";
+import { createContext as createContext9, useContext as useContext9, useState as useState12, useCallback as useCallback4, useMemo as useMemo6 } from "react";
 import { Snackbar, Alert as Alert2 } from "@mui/material";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var ToastContext = createContext9(void 0);
 var ToastProvider = ({ children }) => {
-  const [toast, setToast] = useState10(null);
+  const [toast, setToast] = useState12(null);
   const showToast = useCallback4((text, type = "info") => {
     setToast({ text, type });
   }, []);
@@ -3967,16 +4237,16 @@ var ToastProvider = ({ children }) => {
     showToast,
     hideToast
   }), [showToast, hideToast]);
-  return /* @__PURE__ */ jsxs6(ToastContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ jsxs7(ToastContext.Provider, { value: contextValue, children: [
     children,
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx16(
       Snackbar,
       {
         open: Boolean(toast),
         autoHideDuration: 3500,
         onClose: hideToast,
         anchorOrigin: { vertical: "bottom", horizontal: "center" },
-        children: /* @__PURE__ */ jsx14(
+        children: /* @__PURE__ */ jsx16(
           Alert2,
           {
             severity: toast?.type || "info",
@@ -3998,15 +4268,15 @@ var useToast = () => {
 };
 
 // src/context/ConfirmationProvider.tsx
-import { createContext as createContext10, useContext as useContext10, useState as useState11, useCallback as useCallback5 } from "react";
+import { createContext as createContext10, useContext as useContext10, useState as useState13, useCallback as useCallback5 } from "react";
 import {
-  Button as Button2,
+  Button as Button3,
   Dialog as Dialog2,
   DialogActions as DialogActions2,
   DialogContent as DialogContent2,
   DialogContentText,
   DialogTitle as DialogTitle2,
-  Box as Box5
+  Box as Box6
 } from "@mui/material";
 import {
   Error as ErrorIcon,
@@ -4014,18 +4284,18 @@ import {
   InfoOutlined as InfoIcon,
   CheckCircleOutlined as SuccessIcon
 } from "@mui/icons-material";
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var ConfirmContext = createContext10(null);
 var SEVERITY_ICONS = {
-  error: /* @__PURE__ */ jsx15(ErrorIcon, { color: "error", sx: { fontSize: 40 } }),
-  warning: /* @__PURE__ */ jsx15(WarningIcon, { color: "warning", sx: { fontSize: 40 } }),
-  info: /* @__PURE__ */ jsx15(InfoIcon, { color: "info", sx: { fontSize: 40 } }),
-  success: /* @__PURE__ */ jsx15(SuccessIcon, { color: "success", sx: { fontSize: 40 } })
+  error: /* @__PURE__ */ jsx17(ErrorIcon, { color: "error", sx: { fontSize: 40 } }),
+  warning: /* @__PURE__ */ jsx17(WarningIcon, { color: "warning", sx: { fontSize: 40 } }),
+  info: /* @__PURE__ */ jsx17(InfoIcon, { color: "info", sx: { fontSize: 40 } }),
+  success: /* @__PURE__ */ jsx17(SuccessIcon, { color: "success", sx: { fontSize: 40 } })
 };
 var ConfirmationProvider = ({ children }) => {
-  const [open, setOpen] = useState11(false);
-  const [options, setOptions] = useState11(null);
-  const [resolver, setResolver] = useState11(null);
+  const [open, setOpen] = useState13(false);
+  const [options, setOptions] = useState13(null);
+  const [resolver, setResolver] = useState13(null);
   const confirm = useCallback5((opts) => {
     setOptions(opts);
     setOpen(true);
@@ -4040,9 +4310,9 @@ var ConfirmationProvider = ({ children }) => {
     }
   };
   const severityType = options?.type || "info";
-  return /* @__PURE__ */ jsxs7(ConfirmContext.Provider, { value: { confirm }, children: [
+  return /* @__PURE__ */ jsxs8(ConfirmContext.Provider, { value: { confirm }, children: [
     children,
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs8(
       Dialog2,
       {
         open,
@@ -4052,38 +4322,38 @@ var ConfirmationProvider = ({ children }) => {
         disableEnforceFocus: true,
         disableRestoreFocus: true,
         children: [
-          /* @__PURE__ */ jsxs7(DialogTitle2, { sx: { display: "flex", alignItems: "center", gap: 1.5, pb: 1 }, children: [
+          /* @__PURE__ */ jsxs8(DialogTitle2, { sx: { display: "flex", alignItems: "center", gap: 1.5, pb: 1 }, children: [
             SEVERITY_ICONS[severityType],
-            /* @__PURE__ */ jsx15(Box5, { component: "span", sx: { fontWeight: 600 }, children: options?.title || /* @__PURE__ */ jsx15(TranslateText, { children: "Confirmation" }) })
+            /* @__PURE__ */ jsx17(Box6, { component: "span", sx: { fontWeight: 600 }, children: options?.title || /* @__PURE__ */ jsx17(TranslateText, { children: "Confirmation" }) })
           ] }),
-          /* @__PURE__ */ jsx15(DialogContent2, { sx: { py: 2 }, dividers: true, children: /* @__PURE__ */ jsx15(DialogContentText, { color: "text.secondary", children: options?.message }) }),
-          /* @__PURE__ */ jsxs7(DialogActions2, { sx: { pt: 2, px: 2, justifyContent: "flex-end", gap: 1 }, children: [
-            (options?.showCancelButton ?? true) && /* @__PURE__ */ jsx15(
-              Button2,
+          /* @__PURE__ */ jsx17(DialogContent2, { sx: { py: 2 }, dividers: true, children: /* @__PURE__ */ jsx17(DialogContentText, { color: "text.secondary", children: options?.message }) }),
+          /* @__PURE__ */ jsxs8(DialogActions2, { sx: { pt: 2, px: 2, justifyContent: "flex-end", gap: 1 }, children: [
+            (options?.showCancelButton ?? true) && /* @__PURE__ */ jsx17(
+              Button3,
               {
                 onClick: () => handleClose("cancel"),
                 color: "inherit",
                 variant: "text",
-                children: options?.cancelText || /* @__PURE__ */ jsx15(TranslateText, { children: "Cancel" })
+                children: options?.cancelText || /* @__PURE__ */ jsx17(TranslateText, { children: "Cancel" })
               }
             ),
-            options?.showNoButton && /* @__PURE__ */ jsx15(
-              Button2,
+            options?.showNoButton && /* @__PURE__ */ jsx17(
+              Button3,
               {
                 onClick: () => handleClose("no"),
                 color: "inherit",
                 variant: "outlined",
-                children: options?.noText || /* @__PURE__ */ jsx15(TranslateText, { children: "No" })
+                children: options?.noText || /* @__PURE__ */ jsx17(TranslateText, { children: "No" })
               }
             ),
-            /* @__PURE__ */ jsx15(
-              Button2,
+            /* @__PURE__ */ jsx17(
+              Button3,
               {
                 onClick: () => handleClose("yes"),
                 color: options?.confirmColor || (severityType === "error" ? "error" : "primary"),
                 variant: "contained",
                 autoFocus: true,
-                children: options?.confirmText || /* @__PURE__ */ jsx15(TranslateText, { children: "Yes" })
+                children: options?.confirmText || /* @__PURE__ */ jsx17(TranslateText, { children: "Yes" })
               }
             )
           ] })
@@ -4099,18 +4369,32 @@ var useConfirmation = () => {
   }
   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
+};
 export {
   AIProvider,
   BreadcrumbProvider,
-  CardForm,
   ConfirmationProvider,
   LocalizationProvider,
+  Providers,
   SupabaseProvider,
   ThemeProvider,
   ToastProvider,
   TranslateProvider,
   TranslateText,
   TranslationEditProvider,
+  UI,
   useAI,
   useAppTheme,
   useBreadcrumb,