@intlayer/design-system 7.0.1 → 7.0.2

package/dist/esm/components/Accordion/Accordion.mjs

@@ -5,7 +5,7 @@ import { cn } from "../../utils/cn.mjs";
 import { Button, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { ChevronDown } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Accordion/Accordion.tsx
@@ -49,28 +49,23 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const Accordion = ({ children, header, isOpen, defaultIsOpen = false, onToggle, onClick, disabled = false, contentClassName, headerClassName, contentId, "aria-label": ariaLabel,...props }) => {
 	const isControlled = isOpen !== void 0;
 	const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
+	const id = useId();
 	const isExpandedState = isControlled ? isOpen : internalIsOpen;
 	const isHidden = !isExpandedState;
-	const generatedContentId = contentId || `accordion-content-${Math.random().toString(36).substr(2, 9)}`;
-	const handleToggle = useCallback((e) => {
+	const generatedContentId = contentId ?? `${id}-accordion-content`;
+	const handleToggle = (e) => {
 		if (disabled) return;
 		const newIsOpen = !isExpandedState;
 		if (!isControlled) setInternalIsOpen(newIsOpen);
 		onToggle?.(newIsOpen);
 		onClick?.(e);
-	}, [
-		disabled,
-		isExpandedState,
-		isControlled,
-		onToggle,
-		onClick
-	]);
-	const handleKeyDown = useCallback((e) => {
+	};
+	const handleKeyDown = (e) => {
 		if (e.key === "Enter" || e.key === " ") {
 			e.preventDefault();
 			handleToggle(e);
 		}
-	}, [handleToggle]);
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full",
 		children: [/* @__PURE__ */ jsx(Button, {

package/dist/esm/components/Accordion/Accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":["Accordion: FC<AccordionProps>"],"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport {\n  Button,\n  ButtonColor,\n  type ButtonProps,\n  ButtonVariant,\n} from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport interface AccordionProps\n  extends Omit<ButtonProps, 'children' | 'onToggle'> {\n  /** The content displayed in the accordion header */\n  header: ReactNode;\n  /** The collapsible content inside the accordion */\n  children: ReactNode;\n  /** Controls whether the accordion is open (controlled mode) */\n  isOpen?: boolean;\n  /** Default open state (uncontrolled mode) */\n  defaultIsOpen?: boolean;\n  /** Called when the accordion state changes */\n  onToggle?: (isOpen: boolean) => void;\n  /** Disable the accordion interaction */\n  disabled?: boolean;\n  /** Custom class for the content container */\n  contentClassName?: string;\n  /** Custom class for the header container */\n  headerClassName?: string;\n  /** Accessible label for screen readers */\n  'aria-label'?: string;\n  /** ID for the accordion content (for aria-controls) */\n  contentId?: string;\n}\n\n/**\n * Accordion component that allows the user to expand and collapse content.\n * It provides a header with a chevron icon that controls the visibility of the content.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Accessible with proper ARIA attributes\n * - Keyboard navigation support\n * - Smooth animations for expand/collapse\n * - Customizable styling\n *\n * @param header - The content of the header.\n * @param children - The content to be expanded and collapsed.\n * @param isOpen - Controlled state for whether the content is expanded.\n * @param defaultIsOpen - Default open state for uncontrolled mode.\n * @param onToggle - Callback when the accordion state changes.\n * @param disabled - Whether the accordion is disabled.\n * @param contentClassName - Custom class for the content container.\n * @param headerClassName - Custom class for the header.\n * @param contentId - ID for the content (used for aria-controls).\n *\n * @example\n * // Uncontrolled mode\n * <Accordion header=\"Accordion Header\" defaultIsOpen={true}>\n *   <p>Accordion content</p>\n * </Accordion>\n *\n * @example\n * // Controlled mode\n * <Accordion\n *   header=\"Controlled Accordion\"\n *   isOpen={isOpen}\n *   onToggle={setIsOpen}\n * >\n *   <p>Controlled content</p>\n * </Accordion>\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  header,\n  isOpen,\n  defaultIsOpen = false,\n  onToggle,\n  onClick,\n  disabled = false,\n  contentClassName,\n  headerClassName,\n  contentId,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  // Determine if we're in controlled or uncontrolled mode\n  const isControlled = isOpen !== undefined;\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n\n  // Use controlled value if provided, otherwise use internal state\n  const isExpandedState = isControlled ? isOpen : internalIsOpen;\n  const isHidden = !isExpandedState;\n\n  // Generate unique ID for content if not provided\n  const generatedContentId =\n    contentId || `accordion-content-${Math.random().toString(36).substr(2, 9)}`;\n\n  const handleToggle = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      if (disabled) return;\n\n      const newIsOpen = !isExpandedState;\n\n      // Update internal state if uncontrolled\n      if (!isControlled) {\n        setInternalIsOpen(newIsOpen);\n      }\n\n      // Call external handlers\n      onToggle?.(newIsOpen);\n      onClick?.(e);\n    },\n    [disabled, isExpandedState, isControlled, onToggle, onClick]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      // Enter and Space should toggle the accordion\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleToggle(e as any);\n      }\n    },\n    [handleToggle]\n  );\n\n  return (\n    <div className=\"w-full\">\n      <Button\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.TEXT}\n        onClick={handleToggle}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        isFullWidth\n        className={cn(\n          'flex items-center justify-between gap-2',\n          headerClassName\n        )}\n        IconRight={ChevronDown}\n        iconClassName={cn(\n          'transform transition-transform duration-500 ease-in-out',\n          isExpandedState ? 'rotate-0' : '-rotate-180'\n        )}\n        aria-expanded={isExpandedState}\n        aria-controls={generatedContentId}\n        aria-label={ariaLabel}\n        role=\"button\"\n        {...props}\n      >\n        {header}\n      </Button>\n\n      <MaxHeightSmoother\n        id={generatedContentId}\n        tabIndex={isHidden ? -1 : undefined}\n        isHidden={isHidden}\n        className={contentClassName}\n        role=\"region\"\n        aria-labelledby={generatedContentId}\n      >\n        {children}\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,MAAaA,aAAiC,EAC5C,UACA,QACA,QACA,gBAAgB,OAChB,UACA,SACA,WAAW,OACX,kBACA,iBACA,WACA,cAAc,UACd,GAAG,YACC;CAEJ,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,cAAc;CAGnE,MAAM,kBAAkB,eAAe,SAAS;CAChD,MAAM,WAAW,CAAC;CAGlB,MAAM,qBACJ,aAAa,qBAAqB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,OAAO,GAAG,EAAE;CAE3E,MAAM,eAAe,aAClB,MAA2C;AAC1C,MAAI,SAAU;EAEd,MAAM,YAAY,CAAC;AAGnB,MAAI,CAAC,aACH,mBAAkB,UAAU;AAI9B,aAAW,UAAU;AACrB,YAAU,EAAE;IAEd;EAAC;EAAU;EAAiB;EAAc;EAAU;EAAQ,CAC7D;CAED,MAAM,gBAAgB,aACnB,MAAwC;AAEvC,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,KAAE,gBAAgB;AAClB,gBAAa,EAAS;;IAG1B,CAAC,aAAa,CACf;AAED,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,SAAS,cAAc;GACvB,OAAO,YAAY;GACnB,SAAS;GACT,WAAW;GACD;GACV;GACA,WAAW,GACT,2CACA,gBACD;GACD,WAAW;GACX,eAAe,GACb,2DACA,kBAAkB,aAAa,cAChC;GACD,iBAAe;GACf,iBAAe;GACf,cAAY;GACZ,MAAK;GACL,GAAI;aAEH;IACM,EAET,oBAAC;GACC,IAAI;GACJ,UAAU,WAAW,KAAK;GAChB;GACV,WAAW;GACX,MAAK;GACL,mBAAiB;GAEhB;IACiB;GAChB"}
+{"version":3,"file":"Accordion.mjs","names":["Accordion: FC<AccordionProps>"],"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useId,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport {\n  Button,\n  ButtonColor,\n  type ButtonProps,\n  ButtonVariant,\n} from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport interface AccordionProps\n  extends Omit<ButtonProps, 'children' | 'onToggle'> {\n  /** The content displayed in the accordion header */\n  header: ReactNode;\n  /** The collapsible content inside the accordion */\n  children: ReactNode;\n  /** Controls whether the accordion is open (controlled mode) */\n  isOpen?: boolean;\n  /** Default open state (uncontrolled mode) */\n  defaultIsOpen?: boolean;\n  /** Called when the accordion state changes */\n  onToggle?: (isOpen: boolean) => void;\n  /** Disable the accordion interaction */\n  disabled?: boolean;\n  /** Custom class for the content container */\n  contentClassName?: string;\n  /** Custom class for the header container */\n  headerClassName?: string;\n  /** Accessible label for screen readers */\n  'aria-label'?: string;\n  /** ID for the accordion content (for aria-controls) */\n  contentId?: string;\n}\n\n/**\n * Accordion component that allows the user to expand and collapse content.\n * It provides a header with a chevron icon that controls the visibility of the content.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Accessible with proper ARIA attributes\n * - Keyboard navigation support\n * - Smooth animations for expand/collapse\n * - Customizable styling\n *\n * @param header - The content of the header.\n * @param children - The content to be expanded and collapsed.\n * @param isOpen - Controlled state for whether the content is expanded.\n * @param defaultIsOpen - Default open state for uncontrolled mode.\n * @param onToggle - Callback when the accordion state changes.\n * @param disabled - Whether the accordion is disabled.\n * @param contentClassName - Custom class for the content container.\n * @param headerClassName - Custom class for the header.\n * @param contentId - ID for the content (used for aria-controls).\n *\n * @example\n * // Uncontrolled mode\n * <Accordion header=\"Accordion Header\" defaultIsOpen={true}>\n *   <p>Accordion content</p>\n * </Accordion>\n *\n * @example\n * // Controlled mode\n * <Accordion\n *   header=\"Controlled Accordion\"\n *   isOpen={isOpen}\n *   onToggle={setIsOpen}\n * >\n *   <p>Controlled content</p>\n * </Accordion>\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  header,\n  isOpen,\n  defaultIsOpen = false,\n  onToggle,\n  onClick,\n  disabled = false,\n  contentClassName,\n  headerClassName,\n  contentId,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  // Determine if we're in controlled or uncontrolled mode\n  const isControlled = isOpen !== undefined;\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n  const id = useId();\n\n  // Use controlled value if provided, otherwise use internal state\n  const isExpandedState = isControlled ? isOpen : internalIsOpen;\n  const isHidden = !isExpandedState;\n\n  // Generate unique ID for content if not provided\n  const generatedContentId = contentId ?? `${id}-accordion-content`;\n\n  const handleToggle = (e: MouseEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n\n    const newIsOpen = !isExpandedState;\n\n    // Update internal state if uncontrolled\n    if (!isControlled) {\n      setInternalIsOpen(newIsOpen);\n    }\n\n    // Call external handlers\n    onToggle?.(newIsOpen);\n    onClick?.(e);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    // Enter and Space should toggle the accordion\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      handleToggle(e as any);\n    }\n  };\n\n  return (\n    <div className=\"w-full\">\n      <Button\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.TEXT}\n        onClick={handleToggle}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        isFullWidth\n        className={cn(\n          'flex items-center justify-between gap-2',\n          headerClassName\n        )}\n        IconRight={ChevronDown}\n        iconClassName={cn(\n          'transform transition-transform duration-500 ease-in-out',\n          isExpandedState ? 'rotate-0' : '-rotate-180'\n        )}\n        aria-expanded={isExpandedState}\n        aria-controls={generatedContentId}\n        aria-label={ariaLabel}\n        role=\"button\"\n        {...props}\n      >\n        {header}\n      </Button>\n\n      <MaxHeightSmoother\n        id={generatedContentId}\n        tabIndex={isHidden ? -1 : undefined}\n        isHidden={isHidden}\n        className={contentClassName}\n        role=\"region\"\n        aria-labelledby={generatedContentId}\n      >\n        {children}\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,MAAaA,aAAiC,EAC5C,UACA,QACA,QACA,gBAAgB,OAChB,UACA,SACA,WAAW,OACX,kBACA,iBACA,WACA,cAAc,UACd,GAAG,YACC;CAEJ,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,cAAc;CACnE,MAAM,KAAK,OAAO;CAGlB,MAAM,kBAAkB,eAAe,SAAS;CAChD,MAAM,WAAW,CAAC;CAGlB,MAAM,qBAAqB,aAAa,GAAG,GAAG;CAE9C,MAAM,gBAAgB,MAAqC;AACzD,MAAI,SAAU;EAEd,MAAM,YAAY,CAAC;AAGnB,MAAI,CAAC,aACH,mBAAkB,UAAU;AAI9B,aAAW,UAAU;AACrB,YAAU,EAAE;;CAGd,MAAM,iBAAiB,MAAwC;AAE7D,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,KAAE,gBAAgB;AAClB,gBAAa,EAAS;;;AAI1B,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,SAAS,cAAc;GACvB,OAAO,YAAY;GACnB,SAAS;GACT,WAAW;GACD;GACV;GACA,WAAW,GACT,2CACA,gBACD;GACD,WAAW;GACX,eAAe,GACb,2DACA,kBAAkB,aAAa,cAChC;GACD,iBAAe;GACf,iBAAe;GACf,cAAY;GACZ,MAAK;GACL,GAAI;aAEH;IACM,EAET,oBAAC;GACC,IAAI;GACJ,UAAU,WAAW,KAAK;GAChB;GACV,WAAW;GACX,MAAK;GACL,mBAAiB;GAEhB;IACiB;GAChB"}

package/dist/esm/components/Browser/Browser.content.mjs

@@ -0,0 +1,94 @@
+import { t } from "intlayer";
+
+//#region src/components/Browser/Browser.content.ts
+const browserContent = {
+	key: "browser",
+	content: {
+		ariaLabel: t({
+			en: "Embedded browser",
+			"en-GB": "Embedded browser",
+			fr: "Navigateur intégré",
+			es: "Navegador integrado",
+			de: "Eingebetteter Browser",
+			ja: "埋め込みブラウザ",
+			ko: "임베디드 브라우저",
+			zh: "嵌入式浏览器",
+			it: "Browser incorporato",
+			pt: "Navegador incorporado",
+			hi: "एम्बेडेड ब्राउज़र",
+			ar: "متصفح مدمج",
+			ru: "Встроенный браузер",
+			tr: "Gömülü tarayıcı"
+		}),
+		urlLabel: t({
+			en: "URL address bar",
+			"en-GB": "URL address bar",
+			fr: "Barre d'adresse URL",
+			es: "Barra de direcciones URL",
+			de: "URL-Adressleiste",
+			ja: "URLアドレスバー",
+			ko: "URL 주소 표시줄",
+			zh: "URL地址栏",
+			it: "Barra degli indirizzi URL",
+			pt: "Barra de endereços URL",
+			hi: "URL पता बार",
+			ar: "شريط عنوان URL",
+			ru: "Адресная строка URL",
+			tr: "URL adres çubuğu"
+		}),
+		urlPlaceholder: "https://example.com",
+		errorMessage: t({
+			en: "Invalid URL. Try something like \"https://example.com\".",
+			"en-GB": "Invalid URL. Try something like \"https://example.com\".",
+			fr: "URL invalide. Essayez quelque chose comme \"https://example.com\".",
+			es: "URL no válida. Intente algo como \"https://example.com\".",
+			de: "Ungültige URL. Versuchen Sie etwas wie \"https://example.com\".",
+			ja: "無効なURL。\"https://example.com\"のようなものを試してください。",
+			ko: "잘못된 URL입니다. \"https://example.com\"과 같은 것을 시도하십시오.",
+			zh: "无效的URL。尝试类似\"https://example.com\"的内容。",
+			it: "URL non valido. Prova qualcosa come \"https://example.com\".",
+			pt: "URL inválido. Tente algo como \"https://example.com\".",
+			hi: "अमान्य URL। \"https://example.com\" जैसा कुछ प्रयास करें।",
+			ar: "رابط غير صالح. جرب شيئًا مثل \"https://example.com\".",
+			ru: "Неверный URL. Попробуйте что-то вроде \"https://example.com\".",
+			tr: "Geçersiz URL. \"https://example.com\" gibi bir şey deneyin."
+		}),
+		reloadButtonTitle: t({
+			en: "Reload page",
+			"en-GB": "Reload page",
+			fr: "Recharger la page",
+			es: "Recargar página",
+			de: "Seite neu laden",
+			ja: "ページを再読み込み",
+			ko: "페이지 새로고침",
+			zh: "重新加载页面",
+			it: "Ricarica pagina",
+			pt: "Recarregar página",
+			hi: "पृष्ठ को फिर से लोड करें",
+			ar: "إعادة تحميل الصفحة",
+			ru: "Перезагрузить страницу",
+			tr: "Sayfayı yenile"
+		}),
+		iframeTitle: t({
+			en: "Embedded web page",
+			"en-GB": "Embedded web page",
+			fr: "Page web intégrée",
+			es: "Página web integrada",
+			de: "Eingebettete Webseite",
+			ja: "埋め込みウェブページ",
+			ko: "임베디드 웹페이지",
+			zh: "嵌入式网页",
+			it: "Pagina web incorporata",
+			pt: "Página web incorporada",
+			hi: "एम्बेडेड वेब पेज",
+			ar: "صفحة ويب مدمجة",
+			ru: "Встроенная веб-страница",
+			tr: "Gömülü web sayfası"
+		})
+	}
+};
+var Browser_content_default = browserContent;
+
+//#endregion
+export { browserContent, Browser_content_default as default };
+//# sourceMappingURL=Browser.content.mjs.map

package/dist/esm/components/Browser/Browser.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Browser.content.mjs","names":[],"sources":["../../../../src/components/Browser/Browser.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const browserContent = {\n  key: 'browser',\n  content: {\n    ariaLabel: t({\n      en: 'Embedded browser',\n      'en-GB': 'Embedded browser',\n      fr: 'Navigateur intégré',\n      es: 'Navegador integrado',\n      de: 'Eingebetteter Browser',\n      ja: '埋め込みブラウザ',\n      ko: '임베디드 브라우저',\n      zh: '嵌入式浏览器',\n      it: 'Browser incorporato',\n      pt: 'Navegador incorporado',\n      hi: 'एम्बेडेड ब्राउज़र',\n      ar: 'متصفح مدمج',\n      ru: 'Встроенный браузер',\n      tr: 'Gömülü tarayıcı',\n    }),\n    urlLabel: t({\n      en: 'URL address bar',\n      'en-GB': 'URL address bar',\n      fr: \"Barre d'adresse URL\",\n      es: 'Barra de direcciones URL',\n      de: 'URL-Adressleiste',\n      ja: 'URLアドレスバー',\n      ko: 'URL 주소 표시줄',\n      zh: 'URL地址栏',\n      it: 'Barra degli indirizzi URL',\n      pt: 'Barra de endereços URL',\n      hi: 'URL पता बार',\n      ar: 'شريط عنوان URL',\n      ru: 'Адресная строка URL',\n      tr: 'URL adres çubuğu',\n    }),\n    urlPlaceholder: 'https://example.com',\n    errorMessage: t({\n      en: 'Invalid URL. Try something like \"https://example.com\".',\n      'en-GB': 'Invalid URL. Try something like \"https://example.com\".',\n      fr: 'URL invalide. Essayez quelque chose comme \"https://example.com\".',\n      es: 'URL no válida. Intente algo como \"https://example.com\".',\n      de: 'Ungültige URL. Versuchen Sie etwas wie \"https://example.com\".',\n      ja: '無効なURL。\"https://example.com\"のようなものを試してください。',\n      ko: '잘못된 URL입니다. \"https://example.com\"과 같은 것을 시도하십시오.',\n      zh: '无效的URL。尝试类似\"https://example.com\"的内容。',\n      it: 'URL non valido. Prova qualcosa come \"https://example.com\".',\n      pt: 'URL inválido. Tente algo como \"https://example.com\".',\n      hi: 'अमान्य URL। \"https://example.com\" जैसा कुछ प्रयास करें।',\n      ar: 'رابط غير صالح. جرب شيئًا مثل \"https://example.com\".',\n      ru: 'Неверный URL. Попробуйте что-то вроде \"https://example.com\".',\n      tr: 'Geçersiz URL. \"https://example.com\" gibi bir şey deneyin.',\n    }),\n    reloadButtonTitle: t({\n      en: 'Reload page',\n      'en-GB': 'Reload page',\n      fr: 'Recharger la page',\n      es: 'Recargar página',\n      de: 'Seite neu laden',\n      ja: 'ページを再読み込み',\n      ko: '페이지 새로고침',\n      zh: '重新加载页面',\n      it: 'Ricarica pagina',\n      pt: 'Recarregar página',\n      hi: 'पृष्ठ को फिर से लोड करें',\n      ar: 'إعادة تحميل الصفحة',\n      ru: 'Перезагрузить страницу',\n      tr: 'Sayfayı yenile',\n    }),\n    iframeTitle: t({\n      en: 'Embedded web page',\n      'en-GB': 'Embedded web page',\n      fr: 'Page web intégrée',\n      es: 'Página web integrada',\n      de: 'Eingebettete Webseite',\n      ja: '埋め込みウェブページ',\n      ko: '임베디드 웹페이지',\n      zh: '嵌入式网页',\n      it: 'Pagina web incorporata',\n      pt: 'Página web incorporada',\n      hi: 'एम्बेडेड वेब पेज',\n      ar: 'صفحة ويب مدمجة',\n      ru: 'Встроенная веб-страница',\n      tr: 'Gömülü web sayfası',\n    }),\n  },\n} satisfies Dictionary;\n\nexport default browserContent;\n"],"mappings":";;;AAEA,MAAa,iBAAiB;CAC5B,KAAK;CACL,SAAS;EACP,WAAW,EAAE;GACX,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,UAAU,EAAE;GACV,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,gBAAgB;EAChB,cAAc,EAAE;GACd,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,mBAAmB,EAAE;GACnB,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,aAAa,EAAE;GACb,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACF;AAED,8BAAe"}

package/dist/esm/components/Browser/Browser.mjs

@@ -0,0 +1,202 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { RotateCw } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/Browser/Browser.tsx
+const browserVariants = cva("flex w-full flex-col overflow-hidden rounded-xl bg-background shadow-[0_4px_12px_rgba(0,0,0,0.4),0_0_1px_rgba(0,0,0,0.2)]", {
+	variants: { size: {
+		xs: "h-[400px]",
+		sm: "h-[500px]",
+		md: "h-[600px]",
+		lg: "h-[800px]",
+		xl: "h-[1000px]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/**
+* Browser component that renders an iframe with a visible, editable URL bar.
+* Allows users to view, edit, and navigate to different URLs within an embedded browser interface.
+*
+* Features:
+* - Editable URL bar with strict validation (before navigation)
+* - Automatic protocol addition (adds https:// if missing)
+* - Integrated reload button inside the URL input
+* - Error handling with visual feedback for invalid URLs
+* - Responsive iframe with standardized sizes
+* - Full accessibility support with ARIA attributes
+* - Sandbox security for iframe content
+* - Dark-themed UI matching modern browser aesthetics
+* - Cross-browser compatibility (Chrome, Firefox, Safari)
+*
+* @example
+* // Basic usage
+* <Browser initialUrl="https://example.com" size="md" />
+*
+* @example
+* // With custom size and styling
+* <Browser
+*   initialUrl="https://example.com"
+*   size="lg"
+*   className="shadow-2xl"
+*   aria-label="Documentation viewer"
+* />
+*
+* @example
+* // For content preview
+* <Browser
+*   initialUrl="https://youtube.com/embed/VIDEO_ID"
+*   size="xl"
+*   aria-label="Video content browser"
+* />
+*
+* @example
+* // With custom sandbox restrictions
+* <Browser
+*   initialUrl="https://example.com"
+*   sandbox="allow-scripts allow-same-origin"
+*   aria-label="Restricted content browser"
+* />
+*
+* @param initialUrl - The initial URL to load in the iframe (default: 'https://example.com')
+* @param className - Additional CSS classes for the main container element
+* @param style - Inline CSS styles for the main container element
+* @param size - Size of the browser window: 'xs' (400px), 'sm' (500px), 'md' (600px), 'lg' (800px), 'xl' (1000px). Defaults to 'md'
+* @param aria-label - Accessible label for screen readers describing the browser's purpose (default: 'Embedded browser')
+* @param sandbox - Sandbox attribute for the iframe to control security restrictions (default: 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads')
+*/
+const Browser = ({ initialUrl = "https://example.com", className, style, size = "md", "aria-label": ariaLabel, sandbox = "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads" }) => {
+	const [inputUrl, setInputUrl] = useState(initialUrl);
+	const [currentUrl, setCurrentUrl] = useState(initialUrl);
+	const [error, setError] = useState(null);
+	const [submitted, setSubmitted] = useState(false);
+	const iframeRef = useRef(null);
+	const content = useIntlayer("browser");
+	useEffect(() => {
+		setInputUrl(initialUrl);
+		setCurrentUrl(initialUrl);
+		setError(null);
+		setSubmitted(false);
+	}, [initialUrl]);
+	const isValidHostname = (host) => {
+		if (!/^[a-z0-9.-]+$/i.test(host)) return false;
+		if (/^[-.]/.test(host) || /[-.]$/.test(host)) return false;
+		if (host.includes("..")) return false;
+		if (!host.includes(".")) return false;
+		return true;
+	};
+	const normalizeUrl = (raw) => {
+		const trimmed = raw.trim();
+		if (!trimmed || /\s/.test(trimmed)) throw new Error("Invalid");
+		const candidate = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed) ? trimmed : `https://${trimmed}`;
+		const url = new URL(candidate);
+		if (url.protocol !== "http:" && url.protocol !== "https:") throw new Error("Only http(s) is allowed");
+		if (!isValidHostname(url.hostname)) throw new Error("Invalid host");
+		return url.toString();
+	};
+	const validateAndNavigate = (url) => {
+		try {
+			const validated = normalizeUrl(url);
+			setCurrentUrl(validated);
+			setInputUrl(validated);
+			setError(null);
+		} catch {
+			setError(content.errorMessage.value);
+		}
+	};
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		setSubmitted(true);
+		validateAndNavigate(inputUrl);
+	};
+	const handleReload = () => {
+		if (iframeRef.current) {
+			const url = iframeRef.current.src;
+			iframeRef.current.src = "";
+			iframeRef.current.src = url;
+		}
+	};
+	const showError = submitted && !!error;
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn(browserVariants({ size }), className),
+		style,
+		"aria-label": ariaLabel ?? content.ariaLabel.value,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative z-10 flex shrink-0 flex-col gap-1 rounded-t-xl bg-neutral-900 px-4 py-2.5 shadow-[0_3px_4px_0_rgba(0,0,0,0.25)]",
+			children: [/* @__PURE__ */ jsxs("form", {
+				onSubmit: handleSubmit,
+				className: "relative flex-1",
+				noValidate: true,
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: "browser-url",
+						className: "sr-only",
+						children: content.urlLabel.value
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id: "browser-url",
+						type: "text",
+						inputMode: "url",
+						spellCheck: false,
+						autoCapitalize: "off",
+						autoCorrect: "off",
+						value: inputUrl,
+						onChange: (e) => {
+							setInputUrl(e.target.value);
+							if (showError) setError(null);
+						},
+						placeholder: content.urlPlaceholder.value,
+						className: cn("w-full rounded-lg px-4 py-2 pr-11 text-sm leading-[1.4]", "bg-neutral-950 text-neutral-300", "placeholder:text-neutral-400", "transition-all focus:outline-none focus:ring-1 focus:ring-neutral-400/30", showError ? "border border-red-500" : "border border-transparent"),
+						"aria-label": content.urlLabel.value,
+						"aria-invalid": showError,
+						"aria-describedby": showError ? "browser-url-error" : void 0
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handleReload,
+						className: cn("-translate-y-1/2 absolute top-1/2 right-2", "flex h-8 w-8 items-center justify-center rounded-md", "transition-colors hover:bg-neutral-800", "focus:outline-none focus:ring-1 focus:ring-neutral-400/30"),
+						title: content.reloadButtonTitle.value,
+						"aria-label": content.reloadButtonTitle.value,
+						tabIndex: 0,
+						children: /* @__PURE__ */ jsx(RotateCw, {
+							size: 18,
+							className: "text-neutral-400",
+							strokeWidth: 2
+						})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "submit",
+						className: "sr-only absolute",
+						tabIndex: -1
+					})
+				]
+			}), showError && /* @__PURE__ */ jsx("p", {
+				id: "browser-url-error",
+				role: "alert",
+				"aria-live": "assertive",
+				className: "px-1 text-red-400 text-xs",
+				children: error
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "relative z-0 min-h-0 w-full flex-1 overflow-hidden rounded-b-xl bg-background",
+			children: /* @__PURE__ */ jsx("iframe", {
+				ref: iframeRef,
+				src: currentUrl,
+				title: content.iframeTitle.value,
+				className: "h-full w-full rounded-b-xl border-0",
+				sandbox,
+				loading: "lazy",
+				"aria-live": "polite"
+			})
+		})]
+	});
+};
+
+//#endregion
+export { Browser };
+//# sourceMappingURL=Browser.mjs.map

package/dist/esm/components/Browser/Browser.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Browser.mjs","names":["Browser: FC<BrowserProps>"],"sources":["../../../../src/components/Browser/Browser.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { RotateCw } from 'lucide-react';\nimport {\n  type CSSProperties,\n  type FC,\n  type FormEvent,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\n\nconst browserVariants = cva(\n  'flex w-full flex-col overflow-hidden rounded-xl bg-background shadow-[0_4px_12px_rgba(0,0,0,0.4),0_0_1px_rgba(0,0,0,0.2)]',\n  {\n    variants: {\n      size: {\n        xs: 'h-[400px]',\n        sm: 'h-[500px]',\n        md: 'h-[600px]',\n        lg: 'h-[800px]',\n        xl: 'h-[1000px]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport type BrowserProps = {\n  /** Initial URL to load in the iframe */\n  initialUrl?: string;\n  /** Additional CSS classes for the container */\n  className?: string;\n  /** Inline styles for the container */\n  style?: CSSProperties;\n  /** Size of the browser window */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Accessible label for screen readers describing the browser purpose */\n  'aria-label'?: string;\n  /** Sandbox attribute for the iframe to control security restrictions */\n  sandbox?: string;\n};\n\n/**\n * Browser component that renders an iframe with a visible, editable URL bar.\n * Allows users to view, edit, and navigate to different URLs within an embedded browser interface.\n *\n * Features:\n * - Editable URL bar with strict validation (before navigation)\n * - Automatic protocol addition (adds https:// if missing)\n * - Integrated reload button inside the URL input\n * - Error handling with visual feedback for invalid URLs\n * - Responsive iframe with standardized sizes\n * - Full accessibility support with ARIA attributes\n * - Sandbox security for iframe content\n * - Dark-themed UI matching modern browser aesthetics\n * - Cross-browser compatibility (Chrome, Firefox, Safari)\n *\n * @example\n * // Basic usage\n * <Browser initialUrl=\"https://example.com\" size=\"md\" />\n *\n * @example\n * // With custom size and styling\n * <Browser\n *   initialUrl=\"https://example.com\"\n *   size=\"lg\"\n *   className=\"shadow-2xl\"\n *   aria-label=\"Documentation viewer\"\n * />\n *\n * @example\n * // For content preview\n * <Browser\n *   initialUrl=\"https://youtube.com/embed/VIDEO_ID\"\n *   size=\"xl\"\n *   aria-label=\"Video content browser\"\n * />\n *\n * @example\n * // With custom sandbox restrictions\n * <Browser\n *   initialUrl=\"https://example.com\"\n *   sandbox=\"allow-scripts allow-same-origin\"\n *   aria-label=\"Restricted content browser\"\n * />\n *\n * @param initialUrl - The initial URL to load in the iframe (default: 'https://example.com')\n * @param className - Additional CSS classes for the main container element\n * @param style - Inline CSS styles for the main container element\n * @param size - Size of the browser window: 'xs' (400px), 'sm' (500px), 'md' (600px), 'lg' (800px), 'xl' (1000px). Defaults to 'md'\n * @param aria-label - Accessible label for screen readers describing the browser's purpose (default: 'Embedded browser')\n * @param sandbox - Sandbox attribute for the iframe to control security restrictions (default: 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads')\n */\nexport const Browser: FC<BrowserProps> = ({\n  initialUrl = 'https://example.com',\n  className,\n  style,\n  size = 'md',\n  'aria-label': ariaLabel,\n  sandbox = 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads',\n}) => {\n  const [inputUrl, setInputUrl] = useState(initialUrl);\n  const [currentUrl, setCurrentUrl] = useState(initialUrl);\n  const [error, setError] = useState<string | null>(null);\n  const [submitted, setSubmitted] = useState(false); // show errors only after attempt\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  // Load internationalized content\n  const content = useIntlayer('browser');\n\n  useEffect(() => {\n    setInputUrl(initialUrl);\n    setCurrentUrl(initialUrl);\n    setError(null);\n    setSubmitted(false);\n  }, [initialUrl]);\n\n  // --- Validation helpers ----------------------------------------------------\n  const isValidHostname = (host: string) => {\n    // allowed chars\n    if (!/^[a-z0-9.-]+$/i.test(host)) return false;\n    // no leading/trailing dot or hyphen\n    if (/^[-.]/.test(host) || /[-.]$/.test(host)) return false;\n    // no double dots\n    if (host.includes('..')) return false;\n    // must have at least one dot\n    if (!host.includes('.')) return false;\n\n    return true;\n  };\n\n  const normalizeUrl = (raw: string) => {\n    const trimmed = raw.trim();\n    if (!trimmed || /\\s/.test(trimmed)) throw new Error('Invalid');\n\n    // Add https:// if protocol is missing\n    const candidate = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed)\n      ? trimmed\n      : `https://${trimmed}`;\n\n    const url = new URL(candidate);\n\n    if (url.protocol !== 'http:' && url.protocol !== 'https:') {\n      throw new Error('Only http(s) is allowed');\n    }\n\n    if (!isValidHostname(url.hostname)) {\n      throw new Error('Invalid host');\n    }\n\n    return url.toString();\n  };\n\n  const validateAndNavigate = (url: string) => {\n    try {\n      const validated = normalizeUrl(url);\n      setCurrentUrl(validated);\n      setInputUrl(validated);\n      setError(null);\n    } catch {\n      setError(content.errorMessage.value);\n    }\n  };\n  // --------------------------------------------------------------------------\n\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    setSubmitted(true);\n    validateAndNavigate(inputUrl);\n  };\n\n  const handleReload = () => {\n    if (iframeRef.current) {\n      const url = iframeRef.current.src;\n      iframeRef.current.src = '';\n      iframeRef.current.src = url;\n    }\n  };\n\n  const showError = submitted && !!error;\n\n  return (\n    <section\n      className={cn(browserVariants({ size }), className)}\n      style={style}\n      aria-label={ariaLabel ?? content.ariaLabel.value}\n    >\n      {/* Top bar */}\n      <div className=\"relative z-10 flex shrink-0 flex-col gap-1 rounded-t-xl bg-neutral-900 px-4 py-2.5 shadow-[0_3px_4px_0_rgba(0,0,0,0.25)]\">\n        <form onSubmit={handleSubmit} className=\"relative flex-1\" noValidate>\n          <label htmlFor=\"browser-url\" className=\"sr-only\">\n            {content.urlLabel.value}\n          </label>\n          <input\n            id=\"browser-url\"\n            type=\"text\"\n            inputMode=\"url\"\n            spellCheck={false}\n            autoCapitalize=\"off\"\n            autoCorrect=\"off\"\n            value={inputUrl}\n            onChange={(e) => {\n              setInputUrl(e.target.value);\n              if (showError) setError(null);\n            }}\n            placeholder={content.urlPlaceholder.value}\n            className={cn(\n              'w-full rounded-lg px-4 py-2 pr-11 text-sm leading-[1.4]',\n              'bg-neutral-950 text-neutral-300',\n              'placeholder:text-neutral-400',\n              'transition-all focus:outline-none focus:ring-1 focus:ring-neutral-400/30',\n              showError ? 'border border-red-500' : 'border border-transparent'\n            )}\n            aria-label={content.urlLabel.value}\n            aria-invalid={showError}\n            aria-describedby={showError ? 'browser-url-error' : undefined}\n          />\n\n          {/* Absolutely positioned button inside the input */}\n          <button\n            type=\"button\"\n            onClick={handleReload}\n            className={cn(\n              '-translate-y-1/2 absolute top-1/2 right-2',\n              'flex h-8 w-8 items-center justify-center rounded-md',\n              'transition-colors hover:bg-neutral-800',\n              'focus:outline-none focus:ring-1 focus:ring-neutral-400/30'\n            )}\n            title={content.reloadButtonTitle.value}\n            aria-label={content.reloadButtonTitle.value}\n            tabIndex={0}\n          >\n            <RotateCw size={18} className=\"text-neutral-400\" strokeWidth={2} />\n          </button>\n\n          {/* invisible submit to allow Enter to work semantically */}\n          <button type=\"submit\" className=\"sr-only absolute\" tabIndex={-1} />\n        </form>\n\n        {/* subtle inline error text */}\n        {showError && (\n          <p\n            id=\"browser-url-error\"\n            role=\"alert\"\n            aria-live=\"assertive\"\n            className=\"px-1 text-red-400 text-xs\"\n          >\n            {error}\n          </p>\n        )}\n      </div>\n\n      {/* Iframe */}\n      <div className=\"relative z-0 min-h-0 w-full flex-1 overflow-hidden rounded-b-xl bg-background\">\n        <iframe\n          ref={iframeRef}\n          src={currentUrl}\n          title={content.iframeTitle.value}\n          className=\"h-full w-full rounded-b-xl border-0\"\n          sandbox={sandbox}\n          loading=\"lazy\"\n          aria-live=\"polite\"\n        />\n      </div>\n    </section>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAeA,MAAM,kBAAkB,IACtB,6HACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoED,MAAaA,WAA6B,EACxC,aAAa,uBACb,WACA,OACA,OAAO,MACP,cAAc,WACd,UAAU,gHACN;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,WAAW;CACpD,MAAM,CAAC,YAAY,iBAAiB,SAAS,WAAW;CACxD,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CACvD,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,YAAY,OAA0B,KAAK;CAGjD,MAAM,UAAU,YAAY,UAAU;AAEtC,iBAAgB;AACd,cAAY,WAAW;AACvB,gBAAc,WAAW;AACzB,WAAS,KAAK;AACd,eAAa,MAAM;IAClB,CAAC,WAAW,CAAC;CAGhB,MAAM,mBAAmB,SAAiB;AAExC,MAAI,CAAC,iBAAiB,KAAK,KAAK,CAAE,QAAO;AAEzC,MAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,KAAK,CAAE,QAAO;AAErD,MAAI,KAAK,SAAS,KAAK,CAAE,QAAO;AAEhC,MAAI,CAAC,KAAK,SAAS,IAAI,CAAE,QAAO;AAEhC,SAAO;;CAGT,MAAM,gBAAgB,QAAgB;EACpC,MAAM,UAAU,IAAI,MAAM;AAC1B,MAAI,CAAC,WAAW,KAAK,KAAK,QAAQ,CAAE,OAAM,IAAI,MAAM,UAAU;EAG9D,MAAM,YAAY,4BAA4B,KAAK,QAAQ,GACvD,UACA,WAAW;EAEf,MAAM,MAAM,IAAI,IAAI,UAAU;AAE9B,MAAI,IAAI,aAAa,WAAW,IAAI,aAAa,SAC/C,OAAM,IAAI,MAAM,0BAA0B;AAG5C,MAAI,CAAC,gBAAgB,IAAI,SAAS,CAChC,OAAM,IAAI,MAAM,eAAe;AAGjC,SAAO,IAAI,UAAU;;CAGvB,MAAM,uBAAuB,QAAgB;AAC3C,MAAI;GACF,MAAM,YAAY,aAAa,IAAI;AACnC,iBAAc,UAAU;AACxB,eAAY,UAAU;AACtB,YAAS,KAAK;UACR;AACN,YAAS,QAAQ,aAAa,MAAM;;;CAKxC,MAAM,gBAAgB,MAAkC;AACtD,IAAE,gBAAgB;AAClB,eAAa,KAAK;AAClB,sBAAoB,SAAS;;CAG/B,MAAM,qBAAqB;AACzB,MAAI,UAAU,SAAS;GACrB,MAAM,MAAM,UAAU,QAAQ;AAC9B,aAAU,QAAQ,MAAM;AACxB,aAAU,QAAQ,MAAM;;;CAI5B,MAAM,YAAY,aAAa,CAAC,CAAC;AAEjC,QACE,qBAAC;EACC,WAAW,GAAG,gBAAgB,EAAE,MAAM,CAAC,EAAE,UAAU;EAC5C;EACP,cAAY,aAAa,QAAQ,UAAU;aAG3C,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAK,UAAU;IAAc,WAAU;IAAkB;;KACxD,oBAAC;MAAM,SAAQ;MAAc,WAAU;gBACpC,QAAQ,SAAS;OACZ;KACR,oBAAC;MACC,IAAG;MACH,MAAK;MACL,WAAU;MACV,YAAY;MACZ,gBAAe;MACf,aAAY;MACZ,OAAO;MACP,WAAW,MAAM;AACf,mBAAY,EAAE,OAAO,MAAM;AAC3B,WAAI,UAAW,UAAS,KAAK;;MAE/B,aAAa,QAAQ,eAAe;MACpC,WAAW,GACT,2DACA,mCACA,gCACA,4EACA,YAAY,0BAA0B,4BACvC;MACD,cAAY,QAAQ,SAAS;MAC7B,gBAAc;MACd,oBAAkB,YAAY,sBAAsB;OACpD;KAGF,oBAAC;MACC,MAAK;MACL,SAAS;MACT,WAAW,GACT,6CACA,uDACA,0CACA,4DACD;MACD,OAAO,QAAQ,kBAAkB;MACjC,cAAY,QAAQ,kBAAkB;MACtC,UAAU;gBAEV,oBAAC;OAAS,MAAM;OAAI,WAAU;OAAmB,aAAa;QAAK;OAC5D;KAGT,oBAAC;MAAO,MAAK;MAAS,WAAU;MAAmB,UAAU;OAAM;;KAC9D,EAGN,aACC,oBAAC;IACC,IAAG;IACH,MAAK;IACL,aAAU;IACV,WAAU;cAET;KACC;IAEF,EAGN,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,KAAK;IACL,KAAK;IACL,OAAO,QAAQ,YAAY;IAC3B,WAAU;IACD;IACT,SAAQ;IACR,aAAU;KACV;IACE;GACE"}

package/dist/esm/components/Browser/index.mjs

@@ -0,0 +1,3 @@
+import { Browser } from "./Browser.mjs";
+
+export { Browser };

package/dist/esm/components/DictionaryEditor/DictionaryEditor.mjs

@@ -3,15 +3,15 @@
 
 import { SaveForm } from "../DictionaryFieldEditor/SaveForm/SaveForm.mjs";
 import { NodeWrapper } from "./NodeWrapper/index.mjs";
-import { createElement } from "react";
+import { createElement, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEditedContent, useFocusDictionary } from "@intlayer/editor-react";
+import { useEditedContent, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 
 //#region src/components/DictionaryEditor/DictionaryEditor.tsx
 const DictionaryEditor = ({ dictionary, mode, onDelete,...props }) => {
 	const { editedContent, addEditedContent } = useEditedContent();
-	const { focusedContent, setFocusedContentKeyPath, setFocusedContent } = useFocusDictionary();
-	const focusedKeyPath = focusedContent?.keyPath;
+	const { focusedContent, setFocusedContentKeyPath, setFocusedContent } = useFocusUnmergedDictionary();
+	const focusedKeyPath = useMemo(() => focusedContent?.keyPath, [focusedContent?.keyPath]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-1 flex-col justify-between gap-2",
 		children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ createElement(NodeWrapper, {

package/dist/esm/components/DictionaryEditor/DictionaryEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryEditor.mjs","names":["DictionaryEditor: FC<DictionaryEditorProps>"],"sources":["../../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport type { Dictionary, Locale } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { SaveForm } from '../DictionaryFieldEditor/SaveForm/SaveForm';\nimport { NodeWrapper } from './NodeWrapper';\n\ntype DictionaryEditorProps = {\n  dictionary: Dictionary;\n  locale: Locale;\n  mode: ('local' | 'remote')[];\n  onDelete?: () => void;\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n  dictionary,\n  mode,\n  onDelete,\n  ...props\n}) => {\n  const { editedContent, addEditedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath, setFocusedContent } =\n    useFocusDictionary();\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  return (\n    <div className=\"flex flex-1 flex-col justify-between gap-2\">\n      <div>\n        <NodeWrapper\n          {...props}\n          keyPath={[]}\n          dictionary={dictionary}\n          key={JSON.stringify(\n            (editedContent?.[dictionary.localId!] ?? dictionary).content\n          )}\n          editedContent={editedContent?.[dictionary.localId!]?.content}\n          focusedKeyPath={focusedKeyPath}\n          section={dictionary.content}\n          onContentChange={(content) => {\n            addEditedContent(\n              dictionary.localId!,\n              content.newValue,\n              content.keyPath\n            );\n          }}\n          onFocusKeyPath={setFocusedContentKeyPath}\n        />\n      </div>\n      <SaveForm\n        dictionary={dictionary}\n        mode={mode}\n        className=\"mb-4 flex-col\"\n        onDelete={() => {\n          setFocusedContent(null);\n          onDelete?.();\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAaA,oBAA+C,EAC1D,YACA,MACA,SACA,GAAG,YACC;CACJ,MAAM,EAAE,eAAe,qBAAqB,kBAAkB;CAC9D,MAAM,EAAE,gBAAgB,0BAA0B,sBAChD,oBAAoB;CAEtB,MAAM,iBAAiB,gBAAgB;AAEvC,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC,mBACC,8BAAC;GACC,GAAI;GACJ,SAAS,EAAE;GACC;GACZ,KAAK,KAAK,WACP,gBAAgB,WAAW,YAAa,YAAY,QACtD;GACD,eAAe,gBAAgB,WAAW,UAAW;GACrC;GAChB,SAAS,WAAW;GACpB,kBAAkB,YAAY;AAC5B,qBACE,WAAW,SACX,QAAQ,UACR,QAAQ,QACT;;GAEH,gBAAgB;IAChB,GACE,EACN,oBAAC;GACa;GACN;GACN,WAAU;GACV,gBAAgB;AACd,sBAAkB,KAAK;AACvB,gBAAY;;IAEd;GACE"}
+{"version":3,"file":"DictionaryEditor.mjs","names":["DictionaryEditor: FC<DictionaryEditorProps>"],"sources":["../../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useEditedContent,\n  useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary, Locale } from '@intlayer/types';\nimport { type FC, useMemo } from 'react';\nimport { SaveForm } from '../DictionaryFieldEditor/SaveForm/SaveForm';\nimport { NodeWrapper } from './NodeWrapper';\n\ntype DictionaryEditorProps = {\n  dictionary: Dictionary;\n  locale: Locale;\n  mode: ('local' | 'remote')[];\n  onDelete?: () => void;\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n  dictionary,\n  mode,\n  onDelete,\n  ...props\n}) => {\n  const { editedContent, addEditedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath, setFocusedContent } =\n    useFocusUnmergedDictionary();\n\n  const focusedKeyPath = useMemo(\n    () => focusedContent?.keyPath,\n    [focusedContent?.keyPath]\n  );\n\n  return (\n    <div className=\"flex flex-1 flex-col justify-between gap-2\">\n      <div>\n        <NodeWrapper\n          {...props}\n          keyPath={[]}\n          dictionary={dictionary}\n          key={JSON.stringify(\n            (editedContent?.[dictionary.localId!] ?? dictionary).content\n          )}\n          editedContent={editedContent?.[dictionary.localId!]?.content}\n          focusedKeyPath={focusedKeyPath}\n          section={dictionary.content}\n          onContentChange={(content) => {\n            addEditedContent(\n              dictionary.localId!,\n              content.newValue,\n              content.keyPath\n            );\n          }}\n          onFocusKeyPath={setFocusedContentKeyPath}\n        />\n      </div>\n      <SaveForm\n        dictionary={dictionary}\n        mode={mode}\n        className=\"mb-4 flex-col\"\n        onDelete={() => {\n          setFocusedContent(null);\n          onDelete?.();\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAkBA,MAAaA,oBAA+C,EAC1D,YACA,MACA,SACA,GAAG,YACC;CACJ,MAAM,EAAE,eAAe,qBAAqB,kBAAkB;CAC9D,MAAM,EAAE,gBAAgB,0BAA0B,sBAChD,4BAA4B;CAE9B,MAAM,iBAAiB,cACf,gBAAgB,SACtB,CAAC,gBAAgB,QAAQ,CAC1B;AAED,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC,mBACC,8BAAC;GACC,GAAI;GACJ,SAAS,EAAE;GACC;GACZ,KAAK,KAAK,WACP,gBAAgB,WAAW,YAAa,YAAY,QACtD;GACD,eAAe,gBAAgB,WAAW,UAAW;GACrC;GAChB,SAAS,WAAW;GACpB,kBAAkB,YAAY;AAC5B,qBACE,WAAW,SACX,QAAQ,UACR,QAAQ,QACT;;GAEH,gBAAgB;IAChB,GACE,EACN,oBAAC;GACa;GACN;GACN,WAAU;GACV,gBAAgB;AACd,sBAAkB,KAAK;AACvB,gBAAY;;IAEd;GACE"}

package/dist/esm/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.mjs

@@ -1,26 +1,29 @@
 import { ItemLayout } from "../ItemLayout.mjs";
 import { NodeWrapper, traceKeys } from "./index.mjs";
+import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { isSameKeyPath } from "@intlayer/core";
 import { NodeType } from "@intlayer/types";
 
 //#region src/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.tsx
-const NestedObjectWrapper = (props) => {
+const NestedObjectWrapper = memo((props) => {
 	const { keyPath, section, focusedKeyPath = [], onFocusKeyPath } = props;
-	return Object.keys(section).filter((key) => !traceKeys.includes(key)).map((key) => {
+	return useMemo(() => Object.keys(section ?? {}).filter((key) => !traceKeys.includes(key)), [section]).map((key) => {
 		const newKeyPathEl = {
 			key,
 			type: NodeType.Object
 		};
 		const newKeyPath = [...keyPath, newKeyPathEl];
+		const isSelected = isSameKeyPath(newKeyPath, focusedKeyPath);
 		return /* @__PURE__ */ jsx(ItemLayout, {
 			level: keyPath.length,
 			title: key,
 			description: "",
-			isSelected: isSameKeyPath(newKeyPath, focusedKeyPath),
+			isSelected,
 			onClick: (e) => {
 				e.stopPropagation();
-				onFocusKeyPath(newKeyPath);
+				if (isSelected) onFocusKeyPath([]);
+				else onFocusKeyPath(newKeyPath);
 			},
 			children: /* @__PURE__ */ jsx(NodeWrapper, {
 				...props,
@@ -29,7 +32,7 @@ const NestedObjectWrapper = (props) => {
 			})
 		}, key);
 	});
-};
+});
 
 //#endregion
 export { NestedObjectWrapper };

package/dist/esm/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NestedObjectWrapper.mjs","names":["NestedObjectWrapper: FC<NestedObjectWrapperProps>","newKeyPathEl: KeyPath","newKeyPath: KeyPath[]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.tsx"],"sourcesContent":["import { isSameKeyPath } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { ItemLayout } from '../ItemLayout';\nimport { NodeWrapper, type NodeWrapperProps, traceKeys } from './index';\n\ntype NestedObjectWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: Record<string, ContentNode>;\n};\n\nexport const NestedObjectWrapper: FC<NestedObjectWrapperProps> = (props) => {\n  const { keyPath, section, focusedKeyPath = [], onFocusKeyPath } = props;\n\n  return Object.keys(section)\n    .filter((key) => !traceKeys.includes(key))\n    .map((key) => {\n      const newKeyPathEl: KeyPath = { key, type: NodeType.Object };\n      const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n      return (\n        <ItemLayout\n          level={keyPath.length}\n          key={key}\n          title={key}\n          description=\"\"\n          isSelected={isSameKeyPath(newKeyPath, focusedKeyPath)}\n          onClick={(e) => {\n            e.stopPropagation();\n\n            onFocusKeyPath(newKeyPath);\n          }}\n        >\n          <NodeWrapper {...props} keyPath={newKeyPath} section={section[key]} />\n        </ItemLayout>\n      );\n    });\n};\n"],"mappings":";;;;;;;AAUA,MAAaA,uBAAqD,UAAU;CAC1E,MAAM,EAAE,SAAS,SAAS,iBAAiB,EAAE,EAAE,mBAAmB;AAElE,QAAO,OAAO,KAAK,QAAQ,CACxB,QAAQ,QAAQ,CAAC,UAAU,SAAS,IAAI,CAAC,CACzC,KAAK,QAAQ;EACZ,MAAMC,eAAwB;GAAE;GAAK,MAAM,SAAS;GAAQ;EAC5D,MAAMC,aAAwB,CAAC,GAAG,SAAS,aAAa;AAExD,SACE,oBAAC;GACC,OAAO,QAAQ;GAEf,OAAO;GACP,aAAY;GACZ,YAAY,cAAc,YAAY,eAAe;GACrD,UAAU,MAAM;AACd,MAAE,iBAAiB;AAEnB,mBAAe,WAAW;;aAG5B,oBAAC;IAAY,GAAI;IAAO,SAAS;IAAY,SAAS,QAAQ;KAAQ;KAVjE,IAWM;GAEf"}
+{"version":3,"file":"NestedObjectWrapper.mjs","names":["NestedObjectWrapper: FC<NestedObjectWrapperProps>","newKeyPathEl: KeyPath","newKeyPath: KeyPath[]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.tsx"],"sourcesContent":["import { isSameKeyPath } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport { type FC, memo, useMemo } from 'react';\nimport { ItemLayout } from '../ItemLayout';\nimport { NodeWrapper, type NodeWrapperProps, traceKeys } from './index';\n\ntype NestedObjectWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: Record<string, ContentNode>;\n};\n\nexport const NestedObjectWrapper: FC<NestedObjectWrapperProps> = memo(\n  (props) => {\n    const { keyPath, section, focusedKeyPath = [], onFocusKeyPath } = props;\n\n    const sectionKeys = useMemo(\n      () =>\n        Object.keys(section ?? {}).filter((key) => !traceKeys.includes(key)),\n      [section]\n    );\n\n    return sectionKeys.map((key) => {\n      const newKeyPathEl: KeyPath = { key, type: NodeType.Object };\n      const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n      const isSelected = isSameKeyPath(newKeyPath, focusedKeyPath);\n\n      return (\n        <ItemLayout\n          level={keyPath.length}\n          key={key}\n          title={key}\n          description=\"\"\n          isSelected={isSelected}\n          onClick={(e) => {\n            e.stopPropagation();\n\n            if (isSelected) {\n              onFocusKeyPath([]);\n            } else {\n              onFocusKeyPath(newKeyPath);\n            }\n          }}\n        >\n          <NodeWrapper {...props} keyPath={newKeyPath} section={section[key]} />\n        </ItemLayout>\n      );\n    });\n  }\n);\n"],"mappings":";;;;;;;;AAUA,MAAaA,sBAAoD,MAC9D,UAAU;CACT,MAAM,EAAE,SAAS,SAAS,iBAAiB,EAAE,EAAE,mBAAmB;AAQlE,QANoB,cAEhB,OAAO,KAAK,WAAW,EAAE,CAAC,CAAC,QAAQ,QAAQ,CAAC,UAAU,SAAS,IAAI,CAAC,EACtE,CAAC,QAAQ,CACV,CAEkB,KAAK,QAAQ;EAC9B,MAAMC,eAAwB;GAAE;GAAK,MAAM,SAAS;GAAQ;EAC5D,MAAMC,aAAwB,CAAC,GAAG,SAAS,aAAa;EAExD,MAAM,aAAa,cAAc,YAAY,eAAe;AAE5D,SACE,oBAAC;GACC,OAAO,QAAQ;GAEf,OAAO;GACP,aAAY;GACA;GACZ,UAAU,MAAM;AACd,MAAE,iBAAiB;AAEnB,QAAI,WACF,gBAAe,EAAE,CAAC;QAElB,gBAAe,WAAW;;aAI9B,oBAAC;IAAY,GAAI;IAAO,SAAS;IAAY,SAAS,QAAQ;KAAQ;KAdjE,IAeM;GAEf;EAEL"}

package/dist/esm/components/DictionaryEditor/NodeWrapper/StringWrapper.mjs

@@ -2,10 +2,12 @@ import { cn } from "../../../utils/cn.mjs";
 import { EditableFieldTextArea } from "../../EditableField/EditableFieldTextArea.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { getContentNodeByKeyPath } from "@intlayer/core";
+import { useEditorLocale } from "@intlayer/editor-react";
 
 //#region src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx
 const StringWrapper = ({ keyPath, section, editedContent, editedContentValue: editedContentValueProp, onContentChange, onFocusKeyPath, renderSection }) => {
-	const editedContentValue = editedContentValueProp ?? getContentNodeByKeyPath(editedContent, keyPath);
+	const currentLocale = useEditorLocale();
+	const editedContentValue = editedContentValueProp ?? getContentNodeByKeyPath(editedContent, keyPath, currentLocale);
 	if (editedContentValue && typeof editedContentValue !== "string") return /* @__PURE__ */ jsx(Fragment, { children: "Error loading section - Edited content Incoherence with the original content format" });
 	const level = keyPath.length;
 	const content = String(editedContentValue ?? section);

package/dist/esm/components/DictionaryEditor/NodeWrapper/StringWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StringWrapper.mjs","names":["StringWrapper: FC<StringWrapperProps>"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"sourcesContent":["import { getContentNodeByKeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { cn } from '../../../utils/cn';\nimport { EditableFieldTextArea } from '../../EditableField';\nimport type { NodeWrapperProps } from './index';\n\nexport type StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: string;\n  editedContentValue?: string;\n};\n\nexport const StringWrapper: FC<StringWrapperProps> = ({\n  keyPath,\n  section,\n  editedContent,\n  editedContentValue: editedContentValueProp,\n  onContentChange,\n  onFocusKeyPath,\n  renderSection,\n}) => {\n  const editedContentValue =\n    editedContentValueProp ?? getContentNodeByKeyPath(editedContent, keyPath);\n\n  if (editedContentValue && typeof editedContentValue !== 'string') {\n    return (\n      <>\n        Error loading section - Edited content Incoherence with the original\n        content format\n      </>\n    );\n  }\n\n  const level = keyPath.length;\n\n  const content = String(editedContentValue ?? section);\n\n  return (\n    <span\n      role=\"button\"\n      tabIndex={0}\n      className={cn(\n        'w-full rounded-md p-2 text-left transition',\n        'hover:bg-card/30 [&:has(.section:hover)]:bg-transparent',\n        level === 2 && 'hover:bg-card/30',\n        level >= 3 && ''\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        onFocusKeyPath(keyPath);\n      }}\n    >\n      {typeof renderSection === 'function' ? (\n        renderSection(content)\n      ) : (\n        <EditableFieldTextArea\n          aria-label=\"Editable field\"\n          defaultValue={content}\n          onSave={(newValue) => onContentChange({ keyPath, newValue })}\n          onCancel={() => null}\n        />\n      )}\n    </span>\n  );\n};\n"],"mappings":";;;;;;AAWA,MAAaA,iBAAyC,EACpD,SACA,SACA,eACA,oBAAoB,wBACpB,iBACA,gBACA,oBACI;CACJ,MAAM,qBACJ,0BAA0B,wBAAwB,eAAe,QAAQ;AAE3E,KAAI,sBAAsB,OAAO,uBAAuB,SACtD,QACE,0CAAE,wFAGC;CAIP,MAAM,QAAQ,QAAQ;CAEtB,MAAM,UAAU,OAAO,sBAAsB,QAAQ;AAErD,QACE,oBAAC;EACC,MAAK;EACL,UAAU;EACV,WAAW,GACT,8CACA,2DACA,UAAU,KAAK,oBACf,SAAS,KAAK,GACf;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,kBAAe,QAAQ;;YAGxB,OAAO,kBAAkB,aACxB,cAAc,QAAQ,GAEtB,oBAAC;GACC,cAAW;GACX,cAAc;GACd,SAAS,aAAa,gBAAgB;IAAE;IAAS;IAAU,CAAC;GAC5D,gBAAgB;IAChB;GAEC"}
+{"version":3,"file":"StringWrapper.mjs","names":["StringWrapper: FC<StringWrapperProps>"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"sourcesContent":["import { getContentNodeByKeyPath } from '@intlayer/core';\nimport { useEditorLocale } from '@intlayer/editor-react';\nimport type { FC } from 'react';\nimport { cn } from '../../../utils/cn';\nimport { EditableFieldTextArea } from '../../EditableField';\nimport type { NodeWrapperProps } from './index';\n\nexport type StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: string;\n  editedContentValue?: string;\n};\n\nexport const StringWrapper: FC<StringWrapperProps> = ({\n  keyPath,\n  section,\n  editedContent,\n  editedContentValue: editedContentValueProp,\n  onContentChange,\n  onFocusKeyPath,\n  renderSection,\n}) => {\n  const currentLocale = useEditorLocale();\n  const editedContentValue =\n    editedContentValueProp ??\n    getContentNodeByKeyPath(editedContent, keyPath, currentLocale);\n\n  if (editedContentValue && typeof editedContentValue !== 'string') {\n    return (\n      <>\n        Error loading section - Edited content Incoherence with the original\n        content format\n      </>\n    );\n  }\n\n  const level = keyPath.length;\n\n  const content = String(editedContentValue ?? section);\n\n  return (\n    <span\n      role=\"button\"\n      tabIndex={0}\n      className={cn(\n        'w-full rounded-md p-2 text-left transition',\n        'hover:bg-card/30 [&:has(.section:hover)]:bg-transparent',\n        level === 2 && 'hover:bg-card/30',\n        level >= 3 && ''\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        onFocusKeyPath(keyPath);\n      }}\n    >\n      {typeof renderSection === 'function' ? (\n        renderSection(content)\n      ) : (\n        <EditableFieldTextArea\n          aria-label=\"Editable field\"\n          defaultValue={content}\n          onSave={(newValue) => onContentChange({ keyPath, newValue })}\n          onCancel={() => null}\n        />\n      )}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;AAYA,MAAaA,iBAAyC,EACpD,SACA,SACA,eACA,oBAAoB,wBACpB,iBACA,gBACA,oBACI;CACJ,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,qBACJ,0BACA,wBAAwB,eAAe,SAAS,cAAc;AAEhE,KAAI,sBAAsB,OAAO,uBAAuB,SACtD,QACE,0CAAE,wFAGC;CAIP,MAAM,QAAQ,QAAQ;CAEtB,MAAM,UAAU,OAAO,sBAAsB,QAAQ;AAErD,QACE,oBAAC;EACC,MAAK;EACL,UAAU;EACV,WAAW,GACT,8CACA,2DACA,UAAU,KAAK,oBACf,SAAS,KAAK,GACf;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,kBAAe,QAAQ;;YAGxB,OAAO,kBAAkB,aACxB,cAAc,QAAQ,GAEtB,oBAAC;GACC,cAAW;GACX,cAAc;GACd,SAAS,aAAa,gBAAgB;IAAE;IAAS;IAAU,CAAC;GAC5D,gBAAgB;IAChB;GAEC"}

package/dist/esm/components/DictionaryEditor/NodeWrapper/index.mjs

@@ -10,8 +10,10 @@ import { InsertionWrapper } from "./InsertionWrapper.mjs";
 import { MarkdownWrapper } from "./MarkdownWrapper.mjs";
 import { NestedObjectWrapper } from "./NestedObjectWrapper.mjs";
 import { TranslationWrapper } from "./TranslationWrapper.mjs";
+import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { getContentNodeByKeyPath, getNodeType } from "@intlayer/core";
+import { useEditorLocale } from "@intlayer/editor-react";
 import { NodeType } from "@intlayer/types";
 
 //#region src/components/DictionaryEditor/NodeWrapper/index.tsx
@@ -20,9 +22,16 @@ const traceKeys = [
 	"id",
 	"nodeType"
 ];
-const NodeWrapper = (props) => {
-	const section = getContentNodeByKeyPath(props.editedContent, props.keyPath) ?? props.section;
-	const nodeType = getNodeType(section);
+const NodeWrapper = memo((props) => {
+	const currentLocale = useEditorLocale();
+	const section = useMemo(() => {
+		return getContentNodeByKeyPath(props.editedContent, props.keyPath, currentLocale) ?? props.section;
+	}, [
+		props.editedContent,
+		props.keyPath,
+		props.section
+	]);
+	const nodeType = useMemo(() => getNodeType(section), [section]);
 	if (typeof section === "object") {
 		if (nodeType === NodeType.ReactNode) return /* @__PURE__ */ jsx("span", {
 			className: "text-neutral text-xs",
@@ -69,7 +78,7 @@ const NodeWrapper = (props) => {
 		...props,
 		section
 	});
-};
+});
 
 //#endregion
 export { NodeWrapper, traceKeys };

package/dist/esm/components/DictionaryEditor/NodeWrapper/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["traceKeys: string[]","NodeWrapper: FC<NodeWrapperProps>"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ConditionContent,\n  type EnumerationContent,\n  type FileContent,\n  getContentNodeByKeyPath,\n  getNodeType,\n  type InsertionContent,\n  type MarkdownContent,\n  type TranslationContent,\n} from '@intlayer/core';\nimport {\n  type ContentNode,\n  type Dictionary,\n  type KeyPath,\n  type Locale,\n  NodeType,\n} from '@intlayer/types';\nimport type { FC, ReactNode } from 'react';\nimport { ArrayWrapper } from './ArrayWrapper';\nimport { ConditionWrapper } from './ConditionWrapper';\nimport { EnumerationWrapper } from './EnumerationWrapper';\nimport { FileWrapper } from './FileWrapper';\nimport { InsertionWrapper } from './InsertionWrapper';\nimport { MarkdownWrapper } from './MarkdownWrapper';\nimport { NestedObjectWrapper } from './NestedObjectWrapper';\nimport { StringWrapper } from './StringWrapper';\nimport { TranslationWrapper } from './TranslationWrapper';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  keyPath: KeyPath[];\n  dictionary: Dictionary;\n  section: ContentNode;\n  onContentChange: (content: { keyPath: KeyPath[]; newValue: string }) => void;\n  locale: Locale;\n  editedContent: ContentNode;\n  focusedKeyPath: KeyPath[] | undefined;\n  onFocusKeyPath: (keyPath: KeyPath[]) => void;\n  onClickEdit?: (keyPath: KeyPath[]) => void;\n  renderSection?: (content: string) => ReactNode;\n};\n\nexport const NodeWrapper: FC<NodeWrapperProps> = (props) => {\n  const editedContentValue = getContentNodeByKeyPath(\n    props.editedContent,\n    props.keyPath\n  );\n  const section = editedContentValue ?? props.section;\n  const nodeType = getNodeType(section);\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return (\n        <span className=\"text-neutral text-xs\">React node not editable</span>\n      );\n    }\n\n    if (nodeType === NodeType.Nested) {\n      return (\n        <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n          [Nested] Dictionary\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Markdown) {\n      return (\n        <MarkdownWrapper\n          {...props}\n          section={section as MarkdownContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <TranslationWrapper\n          {...props}\n          section={section as TranslationContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <EnumerationWrapper\n          {...props}\n          section={section as EnumerationContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Condition) {\n      return (\n        <ConditionWrapper\n          {...props}\n          section={section as ConditionContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Insertion) {\n      return (\n        <InsertionWrapper\n          {...props}\n          section={section as InsertionContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <ArrayWrapper\n          {...props}\n          section={section as unknown as ContentNode[]}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.File) {\n      return <FileWrapper {...props} section={section as FileContent} />;\n    }\n\n    return (\n      <NestedObjectWrapper\n        {...props}\n        section={section as Record<string, ContentNode>}\n      />\n    );\n  }\n\n  if (typeof section === 'string') {\n    return <StringWrapper {...props} section={section} />;\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA8BA,MAAaA,YAAsB;CAAC;CAAY;CAAM;CAAW;AAejE,MAAaC,eAAqC,UAAU;CAK1D,MAAM,UAJqB,wBACzB,MAAM,eACN,MAAM,QACP,IACqC,MAAM;CAC5C,MAAM,WAAW,YAAY,QAAQ;AAErC,KAAI,OAAO,YAAY,UAAU;AAC/B,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GAAK,WAAU;aAAuB;IAA8B;AAIzE,MAAI,aAAa,SAAS,OACxB,QACE,oBAAC;GAAI,WAAU;aAAuC;IAEhD;AAIV,MAAI,aAAa,SAAS,SACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,YACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,YACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,MACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,KACxB,QAAO,oBAAC;GAAY,GAAI;GAAgB;IAA0B;AAGpE,SACE,oBAAC;GACC,GAAI;GACK;IACT;;AAIN,KAAI,OAAO,YAAY,SACrB,QAAO,oBAAC;EAAc,GAAI;EAAgB;GAAW"}
+{"version":3,"file":"index.mjs","names":["traceKeys: string[]","NodeWrapper: FC<NodeWrapperProps>"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ConditionContent,\n  type EnumerationContent,\n  type FileContent,\n  getContentNodeByKeyPath,\n  getNodeType,\n  type InsertionContent,\n  type MarkdownContent,\n  type TranslationContent,\n} from '@intlayer/core';\nimport { useEditorLocale } from '@intlayer/editor-react';\nimport {\n  type ContentNode,\n  type Dictionary,\n  type KeyPath,\n  type Locale,\n  NodeType,\n} from '@intlayer/types';\nimport { type FC, memo, type ReactNode, useMemo } from 'react';\nimport { ArrayWrapper } from './ArrayWrapper';\nimport { ConditionWrapper } from './ConditionWrapper';\nimport { EnumerationWrapper } from './EnumerationWrapper';\nimport { FileWrapper } from './FileWrapper';\nimport { InsertionWrapper } from './InsertionWrapper';\nimport { MarkdownWrapper } from './MarkdownWrapper';\nimport { NestedObjectWrapper } from './NestedObjectWrapper';\nimport { StringWrapper } from './StringWrapper';\nimport { TranslationWrapper } from './TranslationWrapper';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  keyPath: KeyPath[];\n  dictionary: Dictionary;\n  section: ContentNode;\n  onContentChange: (content: { keyPath: KeyPath[]; newValue: string }) => void;\n  locale: Locale;\n  editedContent: ContentNode;\n  focusedKeyPath: KeyPath[] | undefined;\n  onFocusKeyPath: (keyPath: KeyPath[]) => void;\n  onClickEdit?: (keyPath: KeyPath[]) => void;\n  renderSection?: (content: string) => ReactNode;\n};\n\nexport const NodeWrapper: FC<NodeWrapperProps> = memo((props) => {\n  const currentLocale = useEditorLocale();\n  const section = useMemo(() => {\n    const editedContentValue = getContentNodeByKeyPath(\n      props.editedContent,\n      props.keyPath,\n      currentLocale\n    );\n    return editedContentValue ?? props.section;\n  }, [props.editedContent, props.keyPath, props.section]);\n\n  const nodeType = useMemo(() => getNodeType(section), [section]);\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return (\n        <span className=\"text-neutral text-xs\">React node not editable</span>\n      );\n    }\n\n    if (nodeType === NodeType.Nested) {\n      return (\n        <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n          [Nested] Dictionary\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Markdown) {\n      return (\n        <MarkdownWrapper\n          {...props}\n          section={section as MarkdownContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <TranslationWrapper\n          {...props}\n          section={section as TranslationContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <EnumerationWrapper\n          {...props}\n          section={section as EnumerationContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Condition) {\n      return (\n        <ConditionWrapper\n          {...props}\n          section={section as ConditionContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Insertion) {\n      return (\n        <InsertionWrapper\n          {...props}\n          section={section as InsertionContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <ArrayWrapper\n          {...props}\n          section={section as unknown as ContentNode[]}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.File) {\n      return <FileWrapper {...props} section={section as FileContent} />;\n    }\n\n    return (\n      <NestedObjectWrapper\n        {...props}\n        section={section as unknown as Record<string, ContentNode>}\n      />\n    );\n  }\n\n  if (typeof section === 'string') {\n    return <StringWrapper {...props} section={section} />;\n  }\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA+BA,MAAaA,YAAsB;CAAC;CAAY;CAAM;CAAW;AAejE,MAAaC,cAAoC,MAAM,UAAU;CAC/D,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,UAAU,cAAc;AAM5B,SAL2B,wBACzB,MAAM,eACN,MAAM,SACN,cACD,IAC4B,MAAM;IAClC;EAAC,MAAM;EAAe,MAAM;EAAS,MAAM;EAAQ,CAAC;CAEvD,MAAM,WAAW,cAAc,YAAY,QAAQ,EAAE,CAAC,QAAQ,CAAC;AAE/D,KAAI,OAAO,YAAY,UAAU;AAC/B,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GAAK,WAAU;aAAuB;IAA8B;AAIzE,MAAI,aAAa,SAAS,OACxB,QACE,oBAAC;GAAI,WAAU;aAAuC;IAEhD;AAIV,MAAI,aAAa,SAAS,SACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,YACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,YACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,MACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,KACxB,QAAO,oBAAC;GAAY,GAAI;GAAgB;IAA0B;AAGpE,SACE,oBAAC;GACC,GAAI;GACK;IACT;;AAIN,KAAI,OAAO,YAAY,SACrB,QAAO,oBAAC;EAAc,GAAI;EAAgB;GAAW;EAEvD"}