intlayer-editor 8.5.0 → 8.5.1

package/client/dist/assets/{CodeBlockShiki-D9plzEFQ.js → CodeBlockShiki-DoD2Sc7u.js}

@@ -3,7 +3,7 @@ import { a as __toESM } from "./chunk-C0u3WHrm.js";
 import { t as require_react } from "./react-BI_C_976.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-BkWmzJHO.js";
 import { t as __vitePreload } from "./preload-helper-B4JcPOPd.js";
-import { t as CodeDefault } from "./index-CDOIYDRk.js";
+import { t as CodeDefault } from "./index-B57zBtFg.js";
 //#region ../@intlayer/design-system/dist/esm/components/IDE/CodeBlockShiki.mjs
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 var import_jsx_runtime = require_jsx_runtime();

package/client/dist/assets/{MarkdownRendererPlugin-Dp6Cig6u.js → MarkdownRendererPlugin-qmrNTiKL.js}

@@ -1,4 +1,4 @@
-import { n as useMarkdownContext } from "./index-CDOIYDRk.js";
+import { n as useMarkdownContext } from "./index-B57zBtFg.js";
 //#region ../react-intlayer/dist/esm/markdown/MarkdownRendererPlugin.mjs
 var MarkdownRendererPlugin = (props) => {
 	const { children, options, components } = props;

package/client/dist/assets/{index-CDOIYDRk.js → index-B57zBtFg.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/HTMLRendererPlugin-B6Eld7in.js","assets/chunk-C0u3WHrm.js","assets/react-BI_C_976.js","assets/CodeBlockShiki-D9plzEFQ.js","assets/preload-helper-B4JcPOPd.js","assets/jsx-runtime-BkWmzJHO.js","assets/dist-D8J9DkzO.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/HTMLRendererPlugin-B6Eld7in.js","assets/chunk-C0u3WHrm.js","assets/react-BI_C_976.js","assets/CodeBlockShiki-DoD2Sc7u.js","assets/preload-helper-B4JcPOPd.js","assets/jsx-runtime-BkWmzJHO.js","assets/dist-D8J9DkzO.js"])))=>i.map(i=>d[i]);
 import { a as __toESM, i as __toCommonJS, n as __esmMin, r as __exportAll, t as __commonJSMin } from "./chunk-C0u3WHrm.js";
 import { t as require_react } from "./react-BI_C_976.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-BkWmzJHO.js";
@@ -9570,7 +9570,7 @@ var configuration = {
 	},
 	metadata: {
 		"name": "Intlayer",
-		"version": "8.5.0",
+		"version": "8.5.1",
 		"doc": "https://intlayer.org/docs"
 	}
 };
@@ -12089,7 +12089,7 @@ var compile = (markdown = "", ctx, options = {}) => {
 };
 //#endregion
 //#region ../react-intlayer/dist/esm/plugins.mjs
-var LazyMarkdownRendererPlugin = (0, import_react.lazy)(() => __vitePreload(() => import("./MarkdownRendererPlugin-Dp6Cig6u.js").then((m) => ({ default: m.MarkdownRendererPlugin })), []));
+var LazyMarkdownRendererPlugin = (0, import_react.lazy)(() => __vitePreload(() => import("./MarkdownRendererPlugin-qmrNTiKL.js").then((m) => ({ default: m.MarkdownRendererPlugin })), []));
 var LazyHTMLRendererPlugin = (0, import_react.lazy)(() => __vitePreload(() => import("./HTMLRendererPlugin-B6Eld7in.js").then((m) => ({ default: m.HTMLRendererPlugin })), __vite__mapDeps([0,1,2])));
 /** Translation plugin. Replaces node with a locale string if nodeType = Translation. */
 var intlayerNodePlugins = {
@@ -30176,7 +30176,7 @@ var CodeDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 		}, `line-${index}-${line.slice(0, 10)}`)) : children })
 	})
 });
-var CodeBlockShiki = (0, import_react.lazy)(() => __vitePreload(() => import("./CodeBlockShiki-D9plzEFQ.js").then((mod) => ({ default: mod.CodeBlockShiki })), __vite__mapDeps([3,1,4,5,2])));
+var CodeBlockShiki = (0, import_react.lazy)(() => __vitePreload(() => import("./CodeBlockShiki-DoD2Sc7u.js").then((mod) => ({ default: mod.CodeBlockShiki })), __vite__mapDeps([3,1,4,5,2])));
 var CodeBlock = ({ className, onChange, isEditable, children, lang, isDarkMode, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 	className: cn$2("flex w-full min-w-0 max-w-full overflow-x-auto", className),
 	...props,
@@ -34093,11 +34093,14 @@ var code_default = {
 };
 //#endregion
 //#region ../@intlayer/design-system/dist/esm/components/IDE/CopyCode.mjs
-var CopyCode = ({ code }) => {
+var CopyCode = ({ code, ...props }) => {
 	const { title, description } = useDictionary(code_default);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Popover, {
 		identifier: "copy",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, { content: code }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Popover.Detail, {
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+			content: code,
+			...props
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Popover.Detail, {
 			identifier: "copy",
 			className: "flex min-w-64 flex-col gap-3 p-3 text-sm",
 			xAlign: PopoverXAlign.END,
@@ -44498,11 +44501,136 @@ var Modal = ({ children, isOpen, container, onClose, hasCloseButton = false, tit
 		})
 	}), containerElement);
 };
+var table_default = {
+	key: "table",
+	content: {
+		"nodeType": "translation",
+		"translation": {
+			"en": { "modal": {
+				"title": "Show all table content",
+				"description": "Open the table in a modal to view all data content clearly"
+			} },
+			"en-GB": { "modal": {
+				"title": "Show all table content",
+				"description": "Open the table in a modal to view all data content clearly"
+			} },
+			"fr": { "modal": {
+				"title": "Afficher tout le contenu du tableau",
+				"description": "Ouvrir le tableau dans une fenêtre modale pour voir tout le contenu clairement"
+			} },
+			"es": { "modal": {
+				"title": "Mostrar todo el contenido de la tabla",
+				"description": "Abrir la tabla en una ventana flotante para ver todo el contenido claramente"
+			} },
+			"de": { "modal": {
+				"title": "Alle Tabellendaten anzeigen",
+				"description": "Tabelle in einem Modal öffnen, um alle Daten übersichtlich anzuzeigen"
+			} },
+			"ja": { "modal": {
+				"title": "テーブルのすべての内容を表示",
+				"description": "テーブルをモーダルで開き、すべてのデータを明確に表示"
+			} },
+			"ko": { "modal": {
+				"title": "테이블의 모든 내용 표시",
+				"description": "테이블을 모달로 열어 모든 데이터를 명확하게 확인"
+			} },
+			"zh": { "modal": {
+				"title": "显示表格的所有内容",
+				"description": "在弹窗中打开表格以清晰地查看所有数据"
+			} },
+			"it": { "modal": {
+				"title": "Mostra tutto il contenuto della tabella",
+				"description": "Apri la tabella in una finestra modale per visualizzare tutti i dati in modo chiaro"
+			} },
+			"pt": { "modal": {
+				"title": "Mostrar todo o conteúdo da tabela",
+				"description": "Abrir a tabela em um modal para ver todo o conteúdo claramente"
+			} },
+			"hi": { "modal": {
+				"title": "सभी तालिका सामग्री दिखाएं",
+				"description": "सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें"
+			} },
+			"ar": { "modal": {
+				"title": "اظهار جميع محتويات الجدول",
+				"description": "افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح"
+			} },
+			"ru": { "modal": {
+				"title": "Показать все данные таблицы",
+				"description": "Открыть таблицу в модальном окне для четкого просмотра всех данных"
+			} }
+		}
+	},
+	localIds: ["table::local::../@intlayer/design-system/dist/esm/components/Table/table.content.mjs"]
+};
 //#endregion
-//#region ../@intlayer/design-system/dist/esm/components/Table/Table.mjs
+//#region ../@intlayer/design-system/dist/esm/components/Table/ExpandButton.mjs
+var ExpandButton = ({ setIsModalOpen }) => {
+	const { modal: modalContent } = useDictionary(table_default);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "pointer-events-none absolute inset-y-0 right-4 z-10",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "pointer-events-auto sticky top-48 pt-4",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Popover, {
+				identifier: "expand",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+					variant: "hoverable",
+					size: "icon-md",
+					onClick: () => {
+						setIsModalOpen(true);
+					},
+					label: modalContent.title,
+					Icon: MoveDiagonal
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Popover.Detail, {
+					identifier: "expand",
+					className: "flex min-w-64 flex-col gap-3 p-3 text-sm",
+					xAlign: PopoverXAlign.END,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: modalContent.title }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "text-neutral",
+						children: modalContent.description
+					})]
+				})]
+			})
+		})
+	});
+};
+//#endregion
+//#region ../@intlayer/design-system/dist/esm/components/Table/useTableWidths.mjs
 var CHAR_WIDTH_REM = .55;
 var MIN_WIDTH_REM = 5;
 var MAX_WIDTH_REM = 30;
+var useTableWidths = (tableRef, modalTableRef, dependencies) => {
+	(0, import_react.useEffect)(() => {
+		if (!tableRef.current) return;
+		const colLengths = [];
+		Array.from(tableRef.current.querySelectorAll("tr")).forEach((row) => {
+			Array.from(row.children).forEach((cell, index) => {
+				const len = cell.textContent?.trim().length ?? 0;
+				if (colLengths[index] === void 0 || len > colLengths[index]) colLengths[index] = len;
+			});
+		});
+		const applyToTable = (table) => {
+			const rows = Array.from(table.querySelectorAll("tr"));
+			if (rows.length === 0) return;
+			const applyColStyle = (el, index) => {
+				const minRem = Math.min(MAX_WIDTH_REM, Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM));
+				el.style.minWidth = `${minRem}rem`;
+				el.style.maxWidth = `${MAX_WIDTH_REM}rem`;
+			};
+			table.querySelectorAll("th").forEach((th, index) => {
+				applyColStyle(th, index);
+			});
+			rows.forEach((row) => {
+				row.querySelectorAll("td").forEach((td, index) => {
+					applyColStyle(td, index);
+				});
+			});
+		};
+		applyToTable(tableRef.current);
+		if (modalTableRef.current) applyToTable(modalTableRef.current);
+	}, dependencies);
+};
+//#endregion
+//#region ../@intlayer/design-system/dist/esm/components/Table/Table.mjs
 /**
 * Table component that provides an enhanced table experience with modal expansion and collapsible content
 *
@@ -44640,63 +44768,52 @@ var MAX_WIDTH_REM = 30;
 * @see {@link Modal} - Component used for full-screen table view
 * @see {@link Button} - Component used for the modal trigger button
 */
-var Table = ({ className, isRollable = false, displayModal, ...props }) => {
+var Table = ({ className, isRollable = false, displayModal, onClick, ...props }) => {
 	const [isModalOpen, setIsModalOpen] = (0, import_react.useState)(false);
+	const [highlightedRowIndex, setHighlightedRowIndex] = (0, import_react.useState)(null);
 	const tableRef = (0, import_react.useRef)(null);
 	const modalTableRef = (0, import_react.useRef)(null);
+	useTableWidths(tableRef, modalTableRef, [props.children, isModalOpen]);
 	(0, import_react.useEffect)(() => {
-		if (!tableRef.current) return;
-		const colLengths = [];
-		Array.from(tableRef.current.querySelectorAll("tr")).forEach((row) => {
-			Array.from(row.children).forEach((cell, index) => {
-				const len = cell.textContent?.trim().length ?? 0;
-				if (colLengths[index] === void 0 || len > colLengths[index]) colLengths[index] = len;
-			});
-		});
-		const applyToTable = (table) => {
-			const rows = Array.from(table.querySelectorAll("tr"));
-			if (rows.length === 0) return;
-			const applyColStyle = (el, index) => {
-				const minRem = Math.min(MAX_WIDTH_REM, Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM));
-				el.style.minWidth = `${minRem}rem`;
-				el.style.maxWidth = `${MAX_WIDTH_REM}rem`;
-			};
-			table.querySelectorAll("th").forEach((th, index) => {
-				applyColStyle(th, index);
-			});
-			rows.forEach((row) => {
-				row.querySelectorAll("td").forEach((td, index) => {
-					applyColStyle(td, index);
+		if (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {
+			const row = modalTableRef.current.rows[highlightedRowIndex];
+			if (row) {
+				row.scrollIntoView({
+					behavior: "smooth",
+					block: "center"
 				});
-			});
-		};
-		applyToTable(tableRef.current);
-		if (modalTableRef.current) applyToTable(modalTableRef.current);
-	}, [props.children, isModalOpen]);
+				row.classList.add("bg-neutral/40", "dark:bg-neutral-dark/40");
+				row.style.transition = "background-color 0.3s ease-in-out";
+			}
+		}
+	}, [isModalOpen, highlightedRowIndex]);
+	(0, import_react.useEffect)(() => {
+		if (!isModalOpen) setHighlightedRowIndex(null);
+	}, [isModalOpen]);
+	const handleTableClick = (e) => {
+		if (displayModal) {
+			const tr = e.target.closest("tr");
+			if (tr?.closest("tbody")) {
+				setHighlightedRowIndex(tr.rowIndex);
+				setIsModalOpen(true);
+			}
+		}
+		onClick?.(e);
+	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "relative overflow-hidden rounded-2xl bg-background pr-4 [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
+		className: "group relative",
 		children: [
-			displayModal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "sticky top-48 z-10",
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: "absolute top-4 right-2",
-					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
-						variant: "hoverable",
-						size: "icon-md",
-						onClick: () => {
-							setIsModalOpen(true);
-						},
-						label: "Move",
-						Icon: MoveDiagonal
-					})
-				})
-			}),
+			displayModal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExpandButton, { setIsModalOpen }),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExpandCollapse, {
 				isRollable,
-				className: "max-w-full overflow-x-auto",
+				className: "max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", {
 					ref: tableRef,
-					className: cn$2("w-full table-auto text-left", className),
+					className: cn$2("w-full table-auto overflow-hidden", displayModal && "[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors", className),
+					onClick: handleTableClick,
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") handleTableClick(e);
+					},
 					...props
 				})
 			}),
@@ -45221,106 +45338,6 @@ var renameKey = (obj, oldKey, newKey) => {
 	return newObj;
 };
 //#endregion
-//#region ../@intlayer/design-system/dist/esm/components/ContentEditor/ContentEditorInput.mjs
-/**
-* ContentEditorInput Component
-*
-* An inline editing component for single-line text input with validation,
-* cancel/save functionality, and support for additional action buttons.
-*
-* ## Features
-* - **Inline Input Editing**: Edit single-line content with immediate feedback
-* - **Validation Support**: Optional content validation with visual feedback
-* - **Action Buttons**: Built-in save/cancel with support for additional buttons
-* - **Keyboard Shortcuts**: Enter to save, Escape to cancel
-* - **Accessibility**: Full ARIA support and keyboard navigation
-* - **State Management**: Handles editing states and validation
-*
-* ## Accessibility
-* - Proper ARIA labels and descriptions for all controls
-* - Keyboard navigation (Tab, Enter, Escape)
-* - Screen reader support for validation states
-* - Focus management and visual indicators
-*
-* @param children - Current input value
-* @param onContentChange - Callback when content is saved
-* @param disabled - Whether the editor is disabled
-* @param validate - Optional validation function
-* @param additionalButtons - Extra buttons to display
-* @param props - Additional Input component props
-*/
-var ContentEditorInput$1 = ({ children, onContentChange, disabled, validate, additionalButtons, ...props }) => {
-	const [newValue, setNewValue] = (0, import_react.useState)(children);
-	const [resetIncrementor, setResetIncrementor] = (0, import_react.useState)(0);
-	const isEdited = newValue !== children;
-	const handleCancel = () => {
-		setNewValue(children);
-		setResetIncrementor((prev) => prev + 1);
-	};
-	const handleValid = () => {
-		onContentChange(newValue);
-	};
-	const handleOnContentChange = (e) => {
-		setNewValue(e.currentTarget.value);
-	};
-	const handleKeyDown = (e) => {
-		if (e.key === "Enter" && !disabled && isValid) {
-			e.preventDefault();
-			handleValid();
-		} else if (e.key === "Escape") {
-			e.preventDefault();
-			handleCancel();
-		}
-	};
-	(0, import_react.useEffect)(() => {
-		setNewValue(children);
-		setResetIncrementor((prev) => prev + 1);
-	}, [children]);
-	const isValid = validate?.(newValue) ?? true;
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "flex size-full flex-col items-center justify-between gap-2",
-		role: "group",
-		"aria-label": "Content editor input",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
-			onChange: handleOnContentChange,
-			onKeyDown: handleKeyDown,
-			"aria-label": "Editable input value",
-			"aria-describedby": isEdited || additionalButtons ? "content-editor-input-actions" : void 0,
-			"aria-invalid": !isValid,
-			variant: InputVariant.INVISIBLE,
-			className: "size-full",
-			defaultValue: children,
-			disabled,
-			...props
-		}, resetIncrementor), (isEdited || additionalButtons) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-			id: "content-editor-input-actions",
-			className: "flex w-full items-center justify-end gap-2",
-			role: "group",
-			"aria-label": "Edit actions",
-			children: [isEdited && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
-				Icon: Check,
-				label: `Save changes${!isValid ? " (invalid content)" : ""}`,
-				variant: ButtonVariant.HOVERABLE,
-				color: ButtonColor.TEXT,
-				size: ButtonSize.ICON_SM,
-				className: "cursor-pointer hover:scale-110",
-				disabled: disabled || !isValid,
-				onClick: handleValid,
-				"aria-describedby": !isValid ? "validation-error" : void 0
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
-				Icon: X$1,
-				label: "Cancel changes",
-				variant: ButtonVariant.HOVERABLE,
-				size: ButtonSize.ICON_SM,
-				color: ButtonColor.TEXT,
-				className: "cursor-pointer hover:scale-110",
-				onClick: handleCancel,
-				disabled
-			})] }), additionalButtons]
-		})]
-	}, String(children));
-};
-//#endregion
 //#region ../../node_modules/.bun/@tanstack+query-core@5.95.2/node_modules/@tanstack/query-core/build/modern/subscribable.js
 var Subscribable = class {
 	constructor() {
@@ -51130,6 +51147,106 @@ var useWriteDictionary = () => {
 	});
 };
 //#endregion
+//#region ../@intlayer/design-system/dist/esm/components/ContentEditor/ContentEditorInput.mjs
+/**
+* ContentEditorInput Component
+*
+* An inline editing component for single-line text input with validation,
+* cancel/save functionality, and support for additional action buttons.
+*
+* ## Features
+* - **Inline Input Editing**: Edit single-line content with immediate feedback
+* - **Validation Support**: Optional content validation with visual feedback
+* - **Action Buttons**: Built-in save/cancel with support for additional buttons
+* - **Keyboard Shortcuts**: Enter to save, Escape to cancel
+* - **Accessibility**: Full ARIA support and keyboard navigation
+* - **State Management**: Handles editing states and validation
+*
+* ## Accessibility
+* - Proper ARIA labels and descriptions for all controls
+* - Keyboard navigation (Tab, Enter, Escape)
+* - Screen reader support for validation states
+* - Focus management and visual indicators
+*
+* @param children - Current input value
+* @param onContentChange - Callback when content is saved
+* @param disabled - Whether the editor is disabled
+* @param validate - Optional validation function
+* @param additionalButtons - Extra buttons to display
+* @param props - Additional Input component props
+*/
+var ContentEditorInput$1 = ({ children, onContentChange, disabled, validate, additionalButtons, ...props }) => {
+	const [newValue, setNewValue] = (0, import_react.useState)(children);
+	const [resetIncrementor, setResetIncrementor] = (0, import_react.useState)(0);
+	const isEdited = newValue !== children;
+	const handleCancel = () => {
+		setNewValue(children);
+		setResetIncrementor((prev) => prev + 1);
+	};
+	const handleValid = () => {
+		onContentChange(newValue);
+	};
+	const handleOnContentChange = (e) => {
+		setNewValue(e.currentTarget.value);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && !disabled && isValid) {
+			e.preventDefault();
+			handleValid();
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			handleCancel();
+		}
+	};
+	(0, import_react.useEffect)(() => {
+		setNewValue(children);
+		setResetIncrementor((prev) => prev + 1);
+	}, [children]);
+	const isValid = validate?.(newValue) ?? true;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex size-full flex-col items-center justify-between gap-2",
+		role: "group",
+		"aria-label": "Content editor input",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+			onChange: handleOnContentChange,
+			onKeyDown: handleKeyDown,
+			"aria-label": "Editable input value",
+			"aria-describedby": isEdited || additionalButtons ? "content-editor-input-actions" : void 0,
+			"aria-invalid": !isValid,
+			variant: InputVariant.INVISIBLE,
+			className: "size-full",
+			defaultValue: children,
+			disabled,
+			...props
+		}, resetIncrementor), (isEdited || additionalButtons) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			id: "content-editor-input-actions",
+			className: "flex w-full items-center justify-end gap-2",
+			role: "group",
+			"aria-label": "Edit actions",
+			children: [isEdited && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+				Icon: Check,
+				label: `Save changes${!isValid ? " (invalid content)" : ""}`,
+				variant: ButtonVariant.HOVERABLE,
+				color: ButtonColor.TEXT,
+				size: ButtonSize.ICON_SM,
+				className: "cursor-pointer hover:scale-110",
+				disabled: disabled || !isValid,
+				onClick: handleValid,
+				"aria-describedby": !isValid ? "validation-error" : void 0
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+				Icon: X$1,
+				label: "Cancel changes",
+				variant: ButtonVariant.HOVERABLE,
+				size: ButtonSize.ICON_SM,
+				color: ButtonColor.TEXT,
+				className: "cursor-pointer hover:scale-110",
+				onClick: handleCancel,
+				disabled
+			})] }), additionalButtons]
+		})]
+	}, String(children));
+};
+//#endregion
 //#region ../@intlayer/design-system/dist/esm/hooks/useUser/index.mjs
 var useUser = () => {
 	const { session, revalidateSession, setSession } = useAuth();

package/client/dist/assets/{index-SO-phafd.css → index-B5Qkzjg3.css}

@@ -585,6 +585,10 @@
     inset: calc(var(--spacing) * 0);
   }
 
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
+
   .start {
     inset-inline-start: var(--spacing);
   }
@@ -609,10 +613,6 @@
     top: calc(var(--spacing) * 2);
   }
 
-  .top-4 {
-    top: calc(var(--spacing) * 4);
-  }
-
   .top-5 {
     top: calc(var(--spacing) * 5);
   }
@@ -3006,6 +3006,16 @@
     }
   }
 
+  .bg-neutral\/40 {
+    background-color: #5d5d5d66;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-neutral\/40 {
+      background-color: color-mix(in oklab, var(--color-neutral) 40%, transparent);
+    }
+  }
+
   .bg-orange-100 {
     background-color: var(--color-orange-100);
   }
@@ -7019,6 +7029,26 @@
     color: var(--color-neutral);
   }
 
+  .\[\&_tbody_tr\]\:cursor-pointer tbody tr {
+    cursor: pointer;
+  }
+
+  .\[\&_tbody_tr\]\:transition-colors tbody tr {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .\[\&_tbody_tr\:hover\]\:bg-neutral\/40 tbody tr:hover {
+    background-color: #5d5d5d66;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[\&_tbody_tr\:hover\]\:bg-neutral\/40 tbody tr:hover {
+      background-color: color-mix(in oklab, var(--color-neutral) 40%, transparent);
+    }
+  }
+
   .\[\&\+div\]\:text-xs + div {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));

package/client/dist/index.html

@@ -5,12 +5,12 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Intlayer Editor</title>
-    <script type="module" crossorigin src="/assets/index-CDOIYDRk.js"></script>
+    <script type="module" crossorigin src="/assets/index-B57zBtFg.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/chunk-C0u3WHrm.js">
     <link rel="modulepreload" crossorigin href="/assets/preload-helper-B4JcPOPd.js">
     <link rel="modulepreload" crossorigin href="/assets/jsx-runtime-BkWmzJHO.js">
     <link rel="modulepreload" crossorigin href="/assets/react-BI_C_976.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-SO-phafd.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-B5Qkzjg3.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intlayer-editor",
-  "version": "8.5.0",
+  "version": "8.5.1",
   "private": false,
   "description": "Integrate the Intlayer visual editor into your Intlayer projects, enabling CMS-like content management with multilingual support.",
   "keywords": [
@@ -93,17 +93,17 @@
     "@fastify/formbody": "8.0.2",
     "@fastify/helmet": "13.0.2",
     "@fastify/static": "9.0.0",
-    "@intlayer/chokidar": "8.5.0",
-    "@intlayer/config": "8.5.0",
-    "@intlayer/unmerged-dictionaries-entry": "8.5.0",
+    "@intlayer/chokidar": "8.5.1",
+    "@intlayer/config": "8.5.1",
+    "@intlayer/unmerged-dictionaries-entry": "8.5.1",
     "fastify": "5.8.2",
-    "fastify-intlayer": "8.5.0",
+    "fastify-intlayer": "8.5.1",
     "mime": "4.1.0"
   },
   "devDependencies": {
-    "@intlayer/design-system": "8.5.0",
-    "@intlayer/editor-react": "8.5.0",
-    "@intlayer/types": "8.5.0",
+    "@intlayer/design-system": "8.5.1",
+    "@intlayer/editor-react": "8.5.1",
+    "@intlayer/types": "8.5.1",
     "@tailwindcss/vite": "4.2.2",
     "@tanstack/react-query": "5.95.2",
     "@types/node": "25.5.0",
@@ -117,18 +117,18 @@
     "framer-motion": "12.38.0",
     "fuse.js": "7.1.0",
     "globals": "17.4.0",
-    "intlayer": "8.5.0",
+    "intlayer": "8.5.1",
     "lucide-react": "1.0.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "react-intlayer": "8.5.0",
+    "react-intlayer": "8.5.1",
     "react-router-dom": "7.13.1",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4.2.2",
     "tsdown": "0.21.4",
     "typescript": "6.0.2",
     "vite": "8.0.2",
-    "vite-intlayer": "8.5.0",
+    "vite-intlayer": "8.5.1",
     "vitest": "4.1.1"
   },
   "engines": {