@intlayer/design-system 6.1.6 → 7.0.0-canary.0

package/dist/esm/components/CopyButton/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["CopyButton: FC<CopyButtonProps>","error"],"sources":["../../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { type FC, useEffect, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport {\n  Button,\n  ButtonColor,\n  type ButtonProps,\n  ButtonSize,\n  ButtonVariant,\n} from '../Button';\n\n/**\n * Props for the CopyButton component\n */\ntype CopyButtonProps = {\n  /**\n   * The text content to copy to the clipboard\n   * @example\n   * ```tsx\n   * <CopyButton content=\"Hello World!\" />\n   * ```\n   */\n  content: string;\n} & Partial<ButtonProps>;\n\n/**\n * CopyButton - A specialized button component for copying text to the clipboard\n *\n * This component provides a user-friendly way to copy text content to the system clipboard\n * with visual feedback and accessibility features. It uses the modern Clipboard API with\n * fallback error handling, and provides clear visual indication of successful copy operations.\n *\n * ## Key Features\n * - **Clipboard Integration**: Uses modern Clipboard API for reliable text copying\n * - **Visual Feedback**: Icon changes from copy to check mark on successful copy\n * - **Auto-Reset**: Automatically reverts to copy icon after 1 second\n * - **Error Handling**: Graceful error handling with console logging\n * - **Accessibility**: Full keyboard navigation and screen reader support\n * - **Internationalization**: Multi-language support via Intlayer\n *\n * ## Use Cases\n * - Code snippet copying in documentation\n * - Sharing URLs or links\n * - Copying configuration values\n * - Form data duplication\n * - API key or token copying\n * - Text content sharing in interfaces\n *\n * ## Accessibility\n * - Uses semantic button element with proper ARIA labeling\n * - Keyboard accessible (Tab, Enter, Space)\n * - Screen reader announces copy actions\n * - Focus management with visible indicators\n * - Proper error state handling for assistive technologies\n *\n * ## Browser Compatibility\n * - Requires modern browsers with Clipboard API support\n * - Falls back gracefully with error logging for unsupported browsers\n * - Works in secure contexts (HTTPS) as required by Clipboard API\n *\n * @example\n * Basic usage:\n * ```tsx\n * <CopyButton content=\"Text to copy\" />\n * ```\n *\n * @example\n * With custom styling and label:\n * ```tsx\n * <CopyButton\n *   content=\"https://example.com/api/endpoint\"\n *   label=\"Copy API endpoint\"\n *   variant={ButtonVariant.OUTLINE}\n *   color={ButtonColor.PRIMARY}\n *   size={ButtonSize.ICON_MD}\n * />\n * ```\n *\n * @example\n * In a code block context:\n * ```tsx\n * <div className=\"relative\">\n *   <pre className=\"bg-gray-100 p-4 rounded\">\n *     <code>npm install @intlayer/design-system</code>\n *   </pre>\n *   <CopyButton\n *     content=\"npm install @intlayer/design-system\"\n *     className=\"absolute top-2 right-2\"\n *     label=\"Copy installation command\"\n *   />\n * </div>\n * ```\n */\n\nexport const CopyButton: FC<CopyButtonProps> = ({ content, ...props }) => {\n  const [copied, setCopied] = useState(false);\n  const [error, setError] = useState(false);\n  const { label } = useIntlayer('copy-button');\n\n  const handleCopy = async () => {\n    try {\n      setError(false);\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n    } catch (error) {\n      console.error('Failed to copy text: ', error);\n      setError(true);\n    }\n  };\n\n  useEffect(() => {\n    if (copied || error) {\n      const timer = setTimeout(() => {\n        setCopied(false);\n        setError(false);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n  }, [copied, error]);\n\n  // Determine the current state for accessibility\n  const getAriaLabel = () => {\n    if (copied) return 'Content copied to clipboard';\n    if (error) return 'Failed to copy content';\n    return props.label ?? label.value;\n  };\n\n  return (\n    <Button\n      Icon={copied ? CopyCheckIcon : CopyIcon}\n      onClick={handleCopy}\n      variant={ButtonVariant.HOVERABLE}\n      color={ButtonColor.TEXT}\n      size={ButtonSize.ICON_SM}\n      tabIndex={0}\n      title={getAriaLabel()}\n      {...props}\n      label={getAriaLabel()}\n      aria-describedby={\n        copied ? 'copy-success' : error ? 'copy-error' : undefined\n      }\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAaA,cAAmC,EAAE,QAAS,GAAG,YAAY;CACxE,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,EAAE,UAAU,YAAY,cAAc;CAE5C,MAAM,aAAa,YAAY;AAC7B,MAAI;AACF,YAAS,MAAM;AACf,SAAM,UAAU,UAAU,UAAU,QAAQ;AAC5C,aAAU,KAAK;WACRC,SAAO;AACd,WAAQ,MAAM,yBAAyBA,QAAM;AAC7C,YAAS,KAAK;;;AAIlB,iBAAgB;AACd,MAAI,UAAU,OAAO;GACnB,MAAM,QAAQ,iBAAiB;AAC7B,cAAU,MAAM;AAChB,aAAS,MAAM;MACd,IAAK;AACR,gBAAa,aAAa,MAAM;;IAEjC,CAAC,QAAQ,MAAM,CAAC;CAGnB,MAAM,qBAAqB;AACzB,MAAI,OAAQ,QAAO;AACnB,MAAI,MAAO,QAAO;AAClB,SAAO,MAAM,SAAS,MAAM;;AAG9B,QACE,oBAAC;EACC,MAAM,SAAS,gBAAgB;EAC/B,SAAS;EACT,SAAS,cAAc;EACvB,OAAO,YAAY;EACnB,MAAM,WAAW;EACjB,UAAU;EACV,OAAO,cAAc;EACrB,GAAI;EACJ,OAAO,cAAc;EACrB,oBACE,SAAS,iBAAiB,QAAQ,eAAe;GAEnD"}

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

@@ -0,0 +1,98 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { CopyCheck, CopyIcon } from "lucide-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/CopyToClipboard/index.tsx
+/**
+* CopyToClipboard Component
+*
+* A versatile component that allows users to copy text to their clipboard with visual feedback.
+* Provides accessibility features, customizable feedback duration, and error handling.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <CopyToClipboard text="Hello World">
+*   <span>Click to copy</span>
+* </CopyToClipboard>
+*
+* // With custom styling and callbacks
+* <CopyToClipboard
+*   text="npm install @intlayer/design-system"
+*   className="bg-gray-100 p-2"
+*   feedbackDuration={3000}
+*   onCopySuccess={() => console.log('Copied!')}
+* >
+*   <code>npm install @intlayer/design-system</code>
+* </CopyToClipboard>
+* ```
+*
+* @component
+* @accessibility
+* - Uses proper ARIA labels for copy and copied states
+* - Supports keyboard navigation (Enter and Space keys)
+* - Announces state changes to screen readers
+* - Provides visual focus indicators
+*/
+const CopyToClipboard = ({ text, children, className, "aria-label": ariaLabel = "Copy to clipboard", "aria-copied-label": ariaCopiedLabel = "Copied to clipboard", feedbackDuration = 2e3, onCopySuccess, onCopyError, disable, preventDefault = true }) => {
+	const [isCopied, setIsCopied] = useState(false);
+	if (disable) return /* @__PURE__ */ jsx("span", {
+		className,
+		children
+	});
+	const handleCopy = async (e) => {
+		e.preventDefault();
+		if (!text) return;
+		try {
+			if (preventDefault) e.preventDefault();
+			if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(text);
+			else {
+				const textArea = document.createElement("textarea");
+				textArea.value = text;
+				textArea.style.position = "fixed";
+				textArea.style.left = "-999999px";
+				textArea.style.top = "-999999px";
+				document.body.appendChild(textArea);
+				textArea.focus();
+				textArea.select();
+				document.body.removeChild(textArea);
+			}
+			setIsCopied(true);
+			setTimeout(() => setIsCopied(false), feedbackDuration);
+			onCopySuccess?.(e);
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : "Failed to copy to clipboard";
+			onCopyError?.(error instanceof Error ? error : new Error(errorMessage));
+		}
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter" || event.key === " ") handleCopy(event);
+	};
+	const currentAriaLabel = isCopied ? ariaCopiedLabel : ariaLabel;
+	const IconComponent = isCopied ? CopyCheck : CopyIcon;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex max-w-full cursor-pointer items-center gap-2 rounded-md p-0.5 hover:bg-neutral/10", className),
+		onClick: handleCopy,
+		onKeyDown: handleKeyDown,
+		role: "button",
+		tabIndex: 0,
+		"aria-label": currentAriaLabel,
+		"aria-pressed": isCopied,
+		"data-testid": "copy-to-clipboard",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 break-all",
+			children
+		}), text && /* @__PURE__ */ jsx(IconComponent, {
+			className: "ml-1 ml-auto size-4 min-w-4 shrink-0",
+			"aria-hidden": "true"
+		})]
+	});
+};
+
+//#endregion
+export { CopyToClipboard };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/CopyToClipboard/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["CopyToClipboard: FC<CopyToClipboardProps>"],"sources":["../../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the CopyToClipboard component\n */\nexport interface CopyToClipboardProps extends PropsWithChildren {\n  /**\n   * The text to copy to the clipboard when clicked\n   * @example \"Hello World\"\n   * @example \"npm install @intlayer/design-system\"\n   */\n  text: string;\n\n  /**\n   * Additional CSS classes for the wrapper element\n   * @example \"bg-blue-100 text-blue-800\"\n   */\n  className?: string;\n\n  /**\n   * Accessible label for screen readers when copy operation is available\n   * @default \"Copy to clipboard\"\n   */\n  'aria-label'?: string;\n\n  /**\n   * Accessible label for screen readers when content has been copied\n   * @default \"Copied to clipboard\"\n   */\n  'aria-copied-label'?: string;\n\n  /**\n   * Duration in milliseconds to show the \"copied\" state\n   * @default 2000\n   */\n  feedbackDuration?: number;\n\n  /**\n   * Callback function called when copy operation succeeds\n   */\n  onCopySuccess?: (e: MouseEvent | KeyboardEvent) => void;\n\n  /**\n   * Callback function called when copy operation fails\n   */\n  onCopyError?: (error: Error) => void;\n\n  /**\n   * Disable the copy to clipboard functionality and return the children\n   * @default false\n   */\n  disable?: boolean;\n\n  /**\n   * Prevent the default behavior of the link when clicked\n   * @default true\n   */\n  preventDefault?: boolean;\n}\n\n/**\n * CopyToClipboard Component\n *\n * A versatile component that allows users to copy text to their clipboard with visual feedback.\n * Provides accessibility features, customizable feedback duration, and error handling.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <CopyToClipboard text=\"Hello World\">\n *   <span>Click to copy</span>\n * </CopyToClipboard>\n *\n * // With custom styling and callbacks\n * <CopyToClipboard\n *   text=\"npm install @intlayer/design-system\"\n *   className=\"bg-gray-100 p-2\"\n *   feedbackDuration={3000}\n *   onCopySuccess={() => console.log('Copied!')}\n * >\n *   <code>npm install @intlayer/design-system</code>\n * </CopyToClipboard>\n * ```\n *\n * @component\n * @accessibility\n * - Uses proper ARIA labels for copy and copied states\n * - Supports keyboard navigation (Enter and Space keys)\n * - Announces state changes to screen readers\n * - Provides visual focus indicators\n */\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n  'aria-label': ariaLabel = 'Copy to clipboard',\n  'aria-copied-label': ariaCopiedLabel = 'Copied to clipboard',\n  feedbackDuration = 2000,\n  onCopySuccess,\n  onCopyError,\n  disable,\n  preventDefault = true,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  if (disable) return <span className={className}>{children}</span>;\n\n  const handleCopy = async (e: MouseEvent | KeyboardEvent) => {\n    e.preventDefault();\n\n    if (!text) return;\n\n    try {\n      if (preventDefault) {\n        e.preventDefault();\n      }\n\n      if (navigator.clipboard?.writeText) {\n        await navigator.clipboard.writeText(text);\n      } else {\n        // Fallback for older browsers\n        const textArea = document.createElement('textarea');\n        textArea.value = text;\n        textArea.style.position = 'fixed';\n        textArea.style.left = '-999999px';\n        textArea.style.top = '-999999px';\n        document.body.appendChild(textArea);\n        textArea.focus();\n        textArea.select();\n        document.body.removeChild(textArea);\n      }\n\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), feedbackDuration);\n      onCopySuccess?.(e);\n    } catch (error) {\n      const errorMessage =\n        error instanceof Error ? error.message : 'Failed to copy to clipboard';\n      onCopyError?.(error instanceof Error ? error : new Error(errorMessage));\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      handleCopy(event);\n    }\n  };\n\n  const currentAriaLabel = isCopied ? ariaCopiedLabel : ariaLabel;\n\n  const IconComponent = isCopied ? CopyCheck : CopyIcon;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex max-w-full cursor-pointer items-center gap-2 rounded-md p-0.5 hover:bg-neutral/10',\n        className\n      )}\n      onClick={handleCopy}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={currentAriaLabel}\n      aria-pressed={isCopied}\n      data-testid=\"copy-to-clipboard\"\n    >\n      <span className=\"min-w-0 break-all\">{children}</span>\n\n      {text && (\n        <IconComponent\n          className=\"ml-1 ml-auto size-4 min-w-4 shrink-0\"\n          aria-hidden=\"true\"\n        />\n      )}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqGA,MAAaA,mBAA6C,EACxD,MACA,UACA,WACA,cAAc,YAAY,qBAC1B,qBAAqB,kBAAkB,uBACvC,mBAAmB,KACnB,eACA,aACA,SACA,iBAAiB,WACb;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAE/C,KAAI,QAAS,QAAO,oBAAC;EAAgB;EAAY;GAAgB;CAEjE,MAAM,aAAa,OAAO,MAAkC;AAC1D,IAAE,gBAAgB;AAElB,MAAI,CAAC,KAAM;AAEX,MAAI;AACF,OAAI,eACF,GAAE,gBAAgB;AAGpB,OAAI,UAAU,WAAW,UACvB,OAAM,UAAU,UAAU,UAAU,KAAK;QACpC;IAEL,MAAM,WAAW,SAAS,cAAc,WAAW;AACnD,aAAS,QAAQ;AACjB,aAAS,MAAM,WAAW;AAC1B,aAAS,MAAM,OAAO;AACtB,aAAS,MAAM,MAAM;AACrB,aAAS,KAAK,YAAY,SAAS;AACnC,aAAS,OAAO;AAChB,aAAS,QAAQ;AACjB,aAAS,KAAK,YAAY,SAAS;;AAGrC,eAAY,KAAK;AACjB,oBAAiB,YAAY,MAAM,EAAE,iBAAiB;AACtD,mBAAgB,EAAE;WACX,OAAO;GACd,MAAM,eACJ,iBAAiB,QAAQ,MAAM,UAAU;AAC3C,iBAAc,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,aAAa,CAAC;;;CAI3E,MAAM,iBAAiB,UAAyB;AAC9C,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,YAAW,MAAM;;CAIrB,MAAM,mBAAmB,WAAW,kBAAkB;CAEtD,MAAM,gBAAgB,WAAW,YAAY;AAE7C,QACE,qBAAC;EACC,WAAW,GACT,iGACA,UACD;EACD,SAAS;EACT,WAAW;EACX,MAAK;EACL,UAAU;EACV,cAAY;EACZ,gBAAc;EACd,eAAY;aAEZ,oBAAC;GAAK,WAAU;GAAqB;IAAgB,EAEpD,QACC,oBAAC;GACC,WAAU;GACV,eAAY;IACZ;GAEC"}

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

@@ -0,0 +1,43 @@
+'use client';
+
+
+import { SaveForm } from "../DictionaryFieldEditor/SaveForm/SaveForm.mjs";
+import { NodeWrapper } from "./NodeWrapper/index.mjs";
+import { createElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditedContent, useFocusDictionary } 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;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 flex-col justify-between gap-2",
+		children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ createElement(NodeWrapper, {
+			...props,
+			keyPath: [],
+			dictionary,
+			key: JSON.stringify((editedContent?.[dictionary.localId] ?? dictionary).content),
+			editedContent: editedContent?.[dictionary.localId]?.content,
+			focusedKeyPath,
+			section: dictionary.content,
+			onContentChange: (content) => {
+				addEditedContent(dictionary.localId, content.newValue, content.keyPath);
+			},
+			onFocusKeyPath: setFocusedContentKeyPath
+		}) }), /* @__PURE__ */ jsx(SaveForm, {
+			dictionary,
+			mode,
+			className: "mb-4 flex-col",
+			onDelete: () => {
+				setFocusedContent(null);
+				onDelete?.();
+			}
+		})]
+	});
+};
+
+//#endregion
+export { DictionaryEditor };
+//# sourceMappingURL=DictionaryEditor.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,34 @@
+import { cn } from "../../utils/cn.mjs";
+import { Accordion } from "../Accordion/Accordion.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/DictionaryEditor/ItemLayout.tsx
+const ItemLayout = ({ level, title, description, children, rightParam, isSelected,...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("rounded-md p-2 transition", "hover:bg-card/30 [&:has(.section:hover)]:bg-transparent", level === 2 && "hover:bg-card/30", level >= 3 && "", isSelected === true && "bg-card/40"),
+	...props,
+	children: /* @__PURE__ */ jsx(Accordion, {
+		isOpen: isSelected,
+		label: title,
+		header: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex w-full items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(level === 0 && "text-2xl", level === 1 && "text-xl", level === 2 && "text-lg", level >= 3 && "text-base"),
+					children: title
+				}), rightParam && /* @__PURE__ */ jsx("div", {
+					className: "flex w-auto items-center justify-between p-3",
+					children: rightParam
+				})]
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "pl-3 text-card text-sm",
+				children: description
+			})]
+		}),
+		children
+	})
+});
+
+//#endregion
+export { ItemLayout };
+//# sourceMappingURL=ItemLayout.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemLayout.mjs","names":["ItemLayout: FC<ItemWrapperProps>"],"sources":["../../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"pl-3 text-card text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"mappings":";;;;;AAaA,MAAaA,cAAoC,EAC/C,OACA,OACA,aACA,UACA,YACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,6BACA,2DACA,UAAU,KAAK,oBACf,SAAS,KAAK,IACd,eAAe,QAAQ,aACxB;CACD,GAAI;WAEJ,oBAAC;EACC,QAAQ;EACR,OAAO;EACP,QACE,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;eACb,oBAAC;KACC,WAAW,GACT,UAAU,KAAK,YACf,UAAU,KAAK,WACf,UAAU,KAAK,WACf,SAAS,KAAK,YACf;eAEA;MACI,EACN,cACC,oBAAC;KAAI,WAAU;eACZ;MACG;KAEJ,EACL,eACC,oBAAC;IAAE,WAAU;cAA0B;KAAgB;IAErD;EAGP;GACS;EACR"}

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

@@ -0,0 +1,36 @@
+import { ItemLayout } from "../ItemLayout.mjs";
+import { NodeWrapper } from "./index.mjs";
+import { jsx } from "react/jsx-runtime";
+import { isSameKeyPath } from "@intlayer/core";
+import { NodeType } from "@intlayer/types";
+
+//#region src/components/DictionaryEditor/NodeWrapper/ArrayWrapper.tsx
+const ArrayWrapper = (props) => {
+	const { keyPath, section, onFocusKeyPath, focusedKeyPath = [] } = props;
+	return section.map((subSection, key) => {
+		const newKeyPathEl = {
+			key,
+			type: NodeType.Array
+		};
+		const newKeyPath = [...keyPath, newKeyPathEl];
+		return /* @__PURE__ */ jsx(ItemLayout, {
+			level: keyPath.length,
+			title: `${key}`,
+			description: "",
+			isSelected: isSameKeyPath(newKeyPath, focusedKeyPath),
+			onClick: (e) => {
+				e.stopPropagation();
+				onFocusKeyPath(newKeyPath);
+			},
+			children: /* @__PURE__ */ jsx(NodeWrapper, {
+				...props,
+				keyPath: newKeyPath,
+				section: subSection
+			})
+		}, JSON.stringify(subSection));
+	});
+};
+
+//#endregion
+export { ArrayWrapper };
+//# sourceMappingURL=ArrayWrapper.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayWrapper.mjs","names":["ArrayWrapper: FC<ArrayWrapperProps>","newKeyPathEl: KeyPath","newKeyPath: KeyPath[]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/ArrayWrapper.tsx"],"sourcesContent":["import { isSameKeyPath } from '@intlayer/core';\nimport type { ContentNode } from '@intlayer/types';\nimport { type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { ItemLayout } from '../ItemLayout';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype ArrayWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: ContentNode[];\n};\n\nexport const ArrayWrapper: FC<ArrayWrapperProps> = (props) => {\n  const { keyPath, section, onFocusKeyPath, focusedKeyPath = [] } = props;\n\n  return section.map((subSection, key) => {\n    const newKeyPathEl: KeyPath = {\n      key,\n      type: NodeType.Array,\n    };\n    const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n    return (\n      <ItemLayout\n        level={keyPath.length}\n        key={JSON.stringify(subSection)}\n        title={`${key}`}\n        description=\"\"\n        isSelected={isSameKeyPath(newKeyPath, focusedKeyPath)}\n        onClick={(e) => {\n          e.stopPropagation();\n          onFocusKeyPath(newKeyPath);\n        }}\n      >\n        <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />\n      </ItemLayout>\n    );\n  });\n};\n"],"mappings":";;;;;;;AAWA,MAAaA,gBAAuC,UAAU;CAC5D,MAAM,EAAE,SAAS,SAAS,gBAAgB,iBAAiB,EAAE,KAAK;AAElE,QAAO,QAAQ,KAAK,YAAY,QAAQ;EACtC,MAAMC,eAAwB;GAC5B;GACA,MAAM,SAAS;GAChB;EACD,MAAMC,aAAwB,CAAC,GAAG,SAAS,aAAa;AAExD,SACE,oBAAC;GACC,OAAO,QAAQ;GAEf,OAAO,GAAG;GACV,aAAY;GACZ,YAAY,cAAc,YAAY,eAAe;GACrD,UAAU,MAAM;AACd,MAAE,iBAAiB;AACnB,mBAAe,WAAW;;aAG5B,oBAAC;IAAY,GAAI;IAAO,SAAS;IAAY,SAAS;KAAc;KAT/D,KAAK,UAAU,WAAW,CAUpB;GAEf"}

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

@@ -0,0 +1,33 @@
+import { NodeWrapper, traceKeys } from "./index.mjs";
+import { createElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { NodeType } from "@intlayer/types";
+
+//#region src/components/DictionaryEditor/NodeWrapper/ConditionWrapper.tsx
+const ConditionWrapper = (props) => {
+	const { keyPath, section } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: "ml-2 grid grid-cols-[auto,1fr] gap-2",
+		children: Object.keys(section).filter((key) => !traceKeys.includes(key)).map((key) => {
+			const newKeyPathEl = {
+				type: NodeType.Condition,
+				key
+			};
+			const newKeyPath = [...keyPath, newKeyPathEl];
+			const subSection = section[NodeType.Condition][key];
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "flex items-center font-bold",
+				children: key
+			}), /* @__PURE__ */ createElement(NodeWrapper, {
+				...props,
+				key,
+				keyPath: newKeyPath,
+				section: subSection
+			})] });
+		})
+	});
+};
+
+//#endregion
+export { ConditionWrapper };
+//# sourceMappingURL=ConditionWrapper.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionWrapper.mjs","names":["ConditionWrapper: FC<ConditionWrapperProps>","newKeyPathEl: KeyPath","newKeyPath: KeyPath[]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/ConditionWrapper.tsx"],"sourcesContent":["import type { ConditionContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps, traceKeys } from './index';\n\ntype ConditionWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: ConditionContent<ContentNode>;\n};\n\nexport const ConditionWrapper: FC<ConditionWrapperProps> = (props) => {\n  const { keyPath, section } = props;\n\n  return (\n    <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n      {Object.keys(section)\n        .filter((key) => !traceKeys.includes(key))\n        .map((key) => {\n          const newKeyPathEl: KeyPath = {\n            type: NodeType.Condition,\n            key,\n          };\n          const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n          const subSection =\n            section[NodeType.Condition][\n              key as keyof (typeof section)[NodeType.Condition]\n            ]!;\n\n          return (\n            <>\n              <span className=\"flex items-center font-bold\">{key}</span>\n              <NodeWrapper\n                {...props}\n                key={key}\n                keyPath={newKeyPath}\n                section={subSection}\n              />\n            </>\n          );\n        })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AASA,MAAaA,oBAA+C,UAAU;CACpE,MAAM,EAAE,SAAS,YAAY;AAE7B,QACE,oBAAC;EAAI,WAAU;YACZ,OAAO,KAAK,QAAQ,CAClB,QAAQ,QAAQ,CAAC,UAAU,SAAS,IAAI,CAAC,CACzC,KAAK,QAAQ;GACZ,MAAMC,eAAwB;IAC5B,MAAM,SAAS;IACf;IACD;GACD,MAAMC,aAAwB,CAAC,GAAG,SAAS,aAAa;GAExD,MAAM,aACJ,QAAQ,SAAS,WACf;AAGJ,UACE,8CACE,oBAAC;IAAK,WAAU;cAA+B;KAAW,EAC1D,8BAAC;IACC,GAAI;IACC;IACL,SAAS;IACT,SAAS;KACT,IACD;IAEL;GACA"}

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

@@ -0,0 +1,33 @@
+import { NodeWrapper, traceKeys } from "./index.mjs";
+import { createElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { NodeType } from "@intlayer/types";
+
+//#region src/components/DictionaryEditor/NodeWrapper/EnumerationWrapper.tsx
+const EnumerationWrapper = (props) => {
+	const { keyPath, section } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: "ml-2 grid grid-cols-[auto,1fr] gap-2",
+		children: Object.keys(section).filter((key) => !traceKeys.includes(key)).map((key) => {
+			const newKeyPathEl = {
+				type: NodeType.Enumeration,
+				key
+			};
+			const newKeyPath = [...keyPath, newKeyPathEl];
+			const subSection = section[NodeType.Enumeration][key];
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "flex items-center font-bold",
+				children: key
+			}), /* @__PURE__ */ createElement(NodeWrapper, {
+				...props,
+				key,
+				keyPath: newKeyPath,
+				section: subSection
+			})] });
+		})
+	});
+};
+
+//#endregion
+export { EnumerationWrapper };
+//# sourceMappingURL=EnumerationWrapper.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnumerationWrapper.mjs","names":["EnumerationWrapper: FC<EnumerationWrapperProps>","newKeyPathEl: KeyPath","newKeyPath: KeyPath[]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/EnumerationWrapper.tsx"],"sourcesContent":["import type { EnumerationContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps, traceKeys } from './index';\n\ntype EnumerationWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: EnumerationContent<ContentNode>;\n};\n\nexport const EnumerationWrapper: FC<EnumerationWrapperProps> = (props) => {\n  const { keyPath, section } = props;\n\n  return (\n    <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n      {Object.keys(section)\n        .filter((key) => !traceKeys.includes(key))\n        .map((key) => {\n          const newKeyPathEl: KeyPath = {\n            type: NodeType.Enumeration,\n            key,\n          };\n          const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n          const subSection =\n            section[NodeType.Enumeration][\n              key as keyof (typeof section)[NodeType.Enumeration]\n            ]!;\n\n          return (\n            <>\n              <span className=\"flex items-center font-bold\">{key}</span>\n              <NodeWrapper\n                {...props}\n                key={key}\n                keyPath={newKeyPath}\n                section={subSection}\n              />\n            </>\n          );\n        })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AASA,MAAaA,sBAAmD,UAAU;CACxE,MAAM,EAAE,SAAS,YAAY;AAE7B,QACE,oBAAC;EAAI,WAAU;YACZ,OAAO,KAAK,QAAQ,CAClB,QAAQ,QAAQ,CAAC,UAAU,SAAS,IAAI,CAAC,CACzC,KAAK,QAAQ;GACZ,MAAMC,eAAwB;IAC5B,MAAM,SAAS;IACf;IACD;GACD,MAAMC,aAAwB,CAAC,GAAG,SAAS,aAAa;GAExD,MAAM,aACJ,QAAQ,SAAS,aACf;AAGJ,UACE,8CACE,oBAAC;IAAK,WAAU;cAA+B;KAAW,EAC1D,8BAAC;IACC,GAAI;IACC;IACL,SAAS;IACT,SAAS;KACT,IACD;IAEL;GACA"}

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

@@ -0,0 +1,37 @@
+import { StringWrapper } from "./StringWrapper.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getContentNodeByKeyPath } from "@intlayer/core";
+import { useEditedContent } from "@intlayer/editor-react";
+import { NodeType } from "@intlayer/types";
+
+//#region src/components/DictionaryEditor/NodeWrapper/FileWrapper.tsx
+const FileWrapper = (props) => {
+	const { keyPath, section } = props;
+	const { addEditedContent } = useEditedContent();
+	const editedContentValue = getContentNodeByKeyPath(props.editedContent, keyPath);
+	const subSection = section[NodeType.File];
+	const { content } = section;
+	const newKeyPath = [...keyPath, { type: NodeType.File }];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ml-2 grid grid-cols-[auto,1fr] gap-2",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "text-neutral text-sm",
+			children: [subSection, " "]
+		}), /* @__PURE__ */ jsx(StringWrapper, {
+			...props,
+			keyPath: newKeyPath,
+			section: content,
+			editedContentValue: editedContentValue?.content,
+			onContentChange: (content$1) => {
+				addEditedContent(props.dictionary.localId, {
+					...section,
+					content: content$1.newValue
+				}, keyPath);
+			}
+		})]
+	});
+};
+
+//#endregion
+export { FileWrapper };
+//# sourceMappingURL=FileWrapper.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileWrapper.mjs","names":["FileWrapper: FC<FileWrapperProps>","newKeyPath: KeyPath[]","content"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/FileWrapper.tsx"],"sourcesContent":["import { type FileContent, getContentNodeByKeyPath } from '@intlayer/core';\nimport { useEditedContent } from '@intlayer/editor-react';\nimport {\n  type KeyPath,\n  type LocalDictionaryId,\n  NodeType,\n} from '@intlayer/types';\nimport type { FC } from 'react';\nimport { StringWrapper, type StringWrapperProps } from './StringWrapper';\n\ntype FileWrapperProps = Omit<StringWrapperProps, 'section'> & {\n  section: FileContent;\n};\n\nexport const FileWrapper: FC<FileWrapperProps> = (props) => {\n  const { keyPath, section } = props;\n  const { addEditedContent } = useEditedContent();\n  const editedContentValue = getContentNodeByKeyPath(\n    props.editedContent,\n    keyPath\n  ) as FileContent | undefined;\n\n  const subSection = section[NodeType.File];\n  const { content } = section;\n\n  const newKeyPath: KeyPath[] = [\n    ...keyPath,\n    {\n      type: NodeType.File,\n    },\n  ];\n\n  return (\n    <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n      <span className=\"text-neutral text-sm\">{subSection} </span>\n      <StringWrapper\n        {...props}\n        keyPath={newKeyPath}\n        section={content}\n        editedContentValue={editedContentValue?.content}\n        onContentChange={(content) => {\n          addEditedContent(\n            props.dictionary.localId as LocalDictionaryId,\n            {\n              ...section,\n              content: content.newValue,\n            } as FileContent,\n            keyPath\n          );\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAcA,MAAaA,eAAqC,UAAU;CAC1D,MAAM,EAAE,SAAS,YAAY;CAC7B,MAAM,EAAE,qBAAqB,kBAAkB;CAC/C,MAAM,qBAAqB,wBACzB,MAAM,eACN,QACD;CAED,MAAM,aAAa,QAAQ,SAAS;CACpC,MAAM,EAAE,YAAY;CAEpB,MAAMC,aAAwB,CAC5B,GAAG,SACH,EACE,MAAM,SAAS,MAChB,CACF;AAED,QACE,qBAAC;EAAI,WAAU;aACb,qBAAC;GAAK,WAAU;cAAwB,YAAW;IAAQ,EAC3D,oBAAC;GACC,GAAI;GACJ,SAAS;GACT,SAAS;GACT,oBAAoB,oBAAoB;GACxC,kBAAkB,cAAY;AAC5B,qBACE,MAAM,WAAW,SACjB;KACE,GAAG;KACH,SAASC,UAAQ;KAClB,EACD,QACD;;IAEH;GACE"}

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

@@ -0,0 +1,22 @@
+import { NodeWrapper } from "./index.mjs";
+import { jsx } from "react/jsx-runtime";
+import { NodeType } from "@intlayer/types";
+
+//#region src/components/DictionaryEditor/NodeWrapper/InsertionWrapper.tsx
+const InsertionWrapper = (props) => {
+	const { keyPath, section } = props;
+	const newKeyPath = [...keyPath, { type: NodeType.Insertion }];
+	const subSection = section[NodeType.Insertion];
+	return /* @__PURE__ */ jsx("div", {
+		className: "ml-2 grid grid-cols-[auto,1fr] gap-2",
+		children: /* @__PURE__ */ jsx(NodeWrapper, {
+			...props,
+			keyPath: newKeyPath,
+			section: subSection
+		})
+	});
+};
+
+//#endregion
+export { InsertionWrapper };
+//# sourceMappingURL=InsertionWrapper.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InsertionWrapper.mjs","names":["InsertionWrapper: FC<InsertionWrapperProps>","newKeyPath: KeyPath[]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/InsertionWrapper.tsx"],"sourcesContent":["import type { InsertionContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype InsertionWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: InsertionContent<ContentNode>;\n};\n\nexport const InsertionWrapper: FC<InsertionWrapperProps> = (props) => {\n  const { keyPath, section } = props;\n\n  const newKeyPath: KeyPath[] = [\n    ...keyPath,\n    {\n      type: NodeType.Insertion,\n    },\n  ];\n\n  const subSection = section[NodeType.Insertion];\n\n  return (\n    <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n      <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />\n    </div>\n  );\n};\n"],"mappings":";;;;;AASA,MAAaA,oBAA+C,UAAU;CACpE,MAAM,EAAE,SAAS,YAAY;CAE7B,MAAMC,aAAwB,CAC5B,GAAG,SACH,EACE,MAAM,SAAS,WAChB,CACF;CAED,MAAM,aAAa,QAAQ,SAAS;AAEpC,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAY,GAAI;GAAO,SAAS;GAAY,SAAS;IAAc;GAChE"}

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

@@ -0,0 +1,22 @@
+import { NodeWrapper } from "./index.mjs";
+import { jsx } from "react/jsx-runtime";
+import { NodeType } from "@intlayer/types";
+
+//#region src/components/DictionaryEditor/NodeWrapper/MarkdownWrapper.tsx
+const MarkdownWrapper = (props) => {
+	const { keyPath, section } = props;
+	const newKeyPath = [...keyPath, { type: NodeType.Markdown }];
+	const subSection = section[NodeType.Markdown];
+	return /* @__PURE__ */ jsx("div", {
+		className: "ml-2 grid grid-cols-[auto,1fr] gap-2",
+		children: /* @__PURE__ */ jsx(NodeWrapper, {
+			...props,
+			keyPath: newKeyPath,
+			section: subSection
+		})
+	});
+};
+
+//#endregion
+export { MarkdownWrapper };
+//# sourceMappingURL=MarkdownWrapper.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownWrapper.mjs","names":["MarkdownWrapper: FC<MarkdownWrapperProps>","newKeyPath: KeyPath[]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/MarkdownWrapper.tsx"],"sourcesContent":["import type { MarkdownContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype MarkdownWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: MarkdownContent<ContentNode>;\n};\n\nexport const MarkdownWrapper: FC<MarkdownWrapperProps> = (props) => {\n  const { keyPath, section } = props;\n\n  const newKeyPath: KeyPath[] = [\n    ...keyPath,\n    {\n      type: NodeType.Markdown,\n    },\n  ];\n\n  const subSection = section[NodeType.Markdown] as ContentNode;\n\n  return (\n    <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n      <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />\n    </div>\n  );\n};\n"],"mappings":";;;;;AASA,MAAaA,mBAA6C,UAAU;CAClE,MAAM,EAAE,SAAS,YAAY;CAE7B,MAAMC,aAAwB,CAC5B,GAAG,SACH,EACE,MAAM,SAAS,UAChB,CACF;CAED,MAAM,aAAa,QAAQ,SAAS;AAEpC,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAY,GAAI;GAAO,SAAS;GAAY,SAAS;IAAc;GAChE"}

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

@@ -0,0 +1,36 @@
+import { ItemLayout } from "../ItemLayout.mjs";
+import { NodeWrapper, traceKeys } from "./index.mjs";
+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 { keyPath, section, focusedKeyPath = [], onFocusKeyPath } = props;
+	return Object.keys(section).filter((key) => !traceKeys.includes(key)).map((key) => {
+		const newKeyPathEl = {
+			key,
+			type: NodeType.Object
+		};
+		const newKeyPath = [...keyPath, newKeyPathEl];
+		return /* @__PURE__ */ jsx(ItemLayout, {
+			level: keyPath.length,
+			title: key,
+			description: "",
+			isSelected: isSameKeyPath(newKeyPath, focusedKeyPath),
+			onClick: (e) => {
+				e.stopPropagation();
+				onFocusKeyPath(newKeyPath);
+			},
+			children: /* @__PURE__ */ jsx(NodeWrapper, {
+				...props,
+				keyPath: newKeyPath,
+				section: section[key]
+			})
+		}, key);
+	});
+};
+
+//#endregion
+export { NestedObjectWrapper };
+//# sourceMappingURL=NestedObjectWrapper.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,34 @@
+import { cn } from "../../../utils/cn.mjs";
+import { EditableFieldTextArea } from "../../EditableField/EditableFieldTextArea.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { getContentNodeByKeyPath } from "@intlayer/core";
+
+//#region src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx
+const StringWrapper = ({ keyPath, section, editedContent, editedContentValue: editedContentValueProp, onContentChange, onFocusKeyPath, renderSection }) => {
+	const editedContentValue = editedContentValueProp ?? getContentNodeByKeyPath(editedContent, keyPath);
+	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);
+	return /* @__PURE__ */ jsx("span", {
+		role: "button",
+		tabIndex: 0,
+		className: cn("w-full rounded-md p-2 text-left transition", "hover:bg-card/30 [&:has(.section:hover)]:bg-transparent", level === 2 && "hover:bg-card/30", level >= 3 && ""),
+		onClick: (e) => {
+			e.stopPropagation();
+			onFocusKeyPath(keyPath);
+		},
+		children: typeof renderSection === "function" ? renderSection(content) : /* @__PURE__ */ jsx(EditableFieldTextArea, {
+			"aria-label": "Editable field",
+			defaultValue: content,
+			onSave: (newValue) => onContentChange({
+				keyPath,
+				newValue
+			}),
+			onCancel: () => null
+		})
+	});
+};
+
+//#endregion
+export { StringWrapper };
+//# sourceMappingURL=StringWrapper.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,23 @@
+import { NodeWrapper } from "./index.mjs";
+import { jsx } from "react/jsx-runtime";
+import { NodeType } from "@intlayer/types";
+
+//#region src/components/DictionaryEditor/NodeWrapper/TranslationWrapper.tsx
+const TranslationWrapper = (props) => {
+	const { keyPath, section, locale } = props;
+	const newKeyPathEl = {
+		type: NodeType.Translation,
+		key: locale
+	};
+	const newKeyPath = [...keyPath, newKeyPathEl];
+	const subSection = section.translation[locale];
+	return /* @__PURE__ */ jsx(NodeWrapper, {
+		...props,
+		keyPath: newKeyPath,
+		section: subSection
+	});
+};
+
+//#endregion
+export { TranslationWrapper };
+//# sourceMappingURL=TranslationWrapper.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TranslationWrapper.mjs","names":["TranslationWrapper: FC<TranslationWrapperProps>","newKeyPathEl: KeyPath","newKeyPath: KeyPath[]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/TranslationWrapper.tsx"],"sourcesContent":["import type { TranslationContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype TranslationWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: TranslationContent<ContentNode>;\n};\n\nexport const TranslationWrapper: FC<TranslationWrapperProps> = (props) => {\n  const { keyPath, section, locale } = props;\n\n  const newKeyPathEl: KeyPath = {\n    type: NodeType.Translation,\n    key: locale,\n  };\n\n  const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n  const subSection =\n    section.translation[\n      locale as unknown as keyof (typeof section)['translation']\n    ]!;\n\n  return <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />;\n};\n"],"mappings":";;;;;AASA,MAAaA,sBAAmD,UAAU;CACxE,MAAM,EAAE,SAAS,SAAS,WAAW;CAErC,MAAMC,eAAwB;EAC5B,MAAM,SAAS;EACf,KAAK;EACN;CAED,MAAMC,aAAwB,CAAC,GAAG,SAAS,aAAa;CAExD,MAAM,aACJ,QAAQ,YACN;AAGJ,QAAO,oBAAC;EAAY,GAAI;EAAO,SAAS;EAAY,SAAS;GAAc"}