@kyro-cms/admin 0.12.4 → 0.12.6

package/src/components/UserMenu.tsx

@@ -3,12 +3,14 @@ import { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
 import { User, Shield, Key, Webhook, Clock, FileText, ExternalLink, HelpCircle, LogOut, Terminal, Zap } from "./ui/icons";
 import { useAuthStore } from "../lib/stores";
 import { apiGet } from "../lib/api";
+import { useTranslation } from "react-i18next";
 
 interface UserMenuProps {
   adminPath: string;
 }
 
 export function UserMenu({ adminPath }: UserMenuProps) {
+  const { t } = useTranslation();
   const currentUser = useAuthStore((s) => s.user);
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
   const [apiAccess, setApiAccess] = useState<{ graphqlEnabled?: boolean } | null>(null);
@@ -41,7 +43,7 @@ export function UserMenu({ adminPath }: UserMenuProps) {
       trigger={
         <div
           className="flex justify-center p-.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] rounded-xl transition-all shadow-sm active:scale-95"
-          title="Account"
+          title={t("userMenu.account", { defaultValue: "Account" })}
         >
           {avatarUrl ? (
             <img src={avatarUrl} alt="" className="w-8 h-8 rounded-full object-cover" />
@@ -53,7 +55,7 @@ export function UserMenu({ adminPath }: UserMenuProps) {
     >
       <div className="px-4 py-2 mb-1">
         <p className="text-[10px] font-medium tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
-          Account
+          {t("userMenu.account", { defaultValue: "Account" })}
         </p>
       </div>
 
@@ -68,21 +70,21 @@ export function UserMenu({ adminPath }: UserMenuProps) {
           }
         }}
       >
-        Profile Settings
+        {t("userMenu.profileSettings", { defaultValue: "Profile Settings" })}
       </DropdownItem>
 
       <DropdownItem
         icon={<Shield className="w-4 h-4" />}
         onClick={() => window.location.href = `${adminPath}/roles`}
       >
-        Permissions
+        {t("userMenu.permissions", { defaultValue: "Permissions" })}
       </DropdownItem>
 
       <DropdownSeparator />
 
       <div className="px-4 py-2 mb-1">
         <p className="text-[10px] font-medium tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
-          Developer
+          {t("userMenu.developer", { defaultValue: "Developer" })}
         </p>
       </div>
 
@@ -90,33 +92,33 @@ export function UserMenu({ adminPath }: UserMenuProps) {
         icon={<Key className="w-4 h-4" />}
         onClick={() => (window.location.href = `${adminPath}/keys`)}
       >
-        API Keys
+        {t("userMenu.apiKeys", { defaultValue: "API Keys" })}
       </DropdownItem>
 
       <DropdownItem
         icon={<Webhook className="w-4 h-4" />}
         onClick={() => (window.location.href = `${adminPath}/webhooks`)}
       >
-        Web Hooks
+        {t("userMenu.webHooks", { defaultValue: "Web Hooks" })}
       </DropdownItem>
       <DropdownItem
         icon={<Clock className="w-4 h-4" />}
         onClick={() => (window.location.href = `${adminPath}/sessions`)}
       >
-        Sessions
+        {t("userMenu.sessions", { defaultValue: "Sessions" })}
       </DropdownItem>
       <DropdownItem
         icon={<FileText className="w-4 h-4" />}
         onClick={() => (window.location.href = `${adminPath}/audit`)}
       >
-        Audit Logs
+        {t("userMenu.auditLogs", { defaultValue: "Audit Logs" })}
       </DropdownItem>
 
       <DropdownItem
         icon={<Terminal className="w-4 h-4" />}
         onClick={() => (window.location.href = `${adminPath}/rest-playground`)}
       >
-        API Explorer
+        {t("userMenu.apiExplorer", { defaultValue: "API Explorer" })}
       </DropdownItem>
 
       {(apiAccess === null || apiAccess?.graphqlEnabled) && (
@@ -124,7 +126,7 @@ export function UserMenu({ adminPath }: UserMenuProps) {
           icon={<Zap className="w-4 h-4" />}
           onClick={() => (window.location.href = `${adminPath}/graphql`)}
         >
-          GraphQL Playground
+          {t("userMenu.graphqlPlayground", { defaultValue: "GraphQL Playground" })}
         </DropdownItem>
       )}
 
@@ -132,22 +134,22 @@ export function UserMenu({ adminPath }: UserMenuProps) {
 
       <div className="px-4 py-2 mb-1">
         <p className="text-[10px] font-medium tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
-          Resources
+          {t("userMenu.resources", { defaultValue: "Resources" })}
         </p>
       </div>
 
       <DropdownItem
         icon={<ExternalLink className="w-4 h-4" />}
-        onClick={() => window.open("https://docs.kyro.dev", "_blank")}
+        onClick={() => window.open("https://kyro-cms.com/getting-started.html", "_blank")}
       >
-        Documentation
+        {t("userMenu.documentation", { defaultValue: "Documentation" })}
       </DropdownItem>
 
       <DropdownItem
         icon={<HelpCircle className="w-4 h-4" />}
-        onClick={() => window.open("https://github.com/danielDozie/kyro-cms/issues", "_blank")}
+        onClick={() => window.open("https://github.com/danielDozie/kyro-cms/issues/new", "_blank")}
       >
-        Get Support
+        {t("userMenu.getSupport", { defaultValue: "Get Support" })}
       </DropdownItem>
 
       <DropdownSeparator />
@@ -157,7 +159,7 @@ export function UserMenu({ adminPath }: UserMenuProps) {
         danger
         onClick={() => document.getElementById("logout-btn")?.click()}
       >
-        Sign Out
+        {t("actions.signOut", { defaultValue: "Sign Out" })}
       </DropdownItem>
     </Dropdown>
   );

package/src/components/VersionHistoryPanel.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { SlidePanel } from "./ui/SlidePanel";
 import { Spinner } from "./ui/Spinner";
 import { History, Eye, GitCompare, Undo2, CheckCircle2, Clock, User } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 interface Version {
   id: string;
@@ -38,6 +39,7 @@ export function VersionHistoryPanel({
   onCompare,
   loading = false,
 }: VersionHistoryPanelProps) {
+    const { t } = useTranslation();
   const formatDate = (dateValue: any) => {
     if (!dateValue) return "Unknown date";
     const date = new Date(dateValue);
@@ -82,7 +84,7 @@ export function VersionHistoryPanel({
     <SlidePanel
       open={open}
       onClose={onClose}
-      title="Version History"
+      title={t("tooltips.versionHistory", { defaultValue: "Version History" })}
       width="md"
     >
       {loading ? (
@@ -159,7 +161,7 @@ export function VersionHistoryPanel({
                     <button type="button"
                       onClick={() => onPreview(version)}
                       className="p-2 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-primary)]/10 rounded-md transition-colors"
-                      title="Preview this version"
+                      title={t("tooltips.previewThisVersion", { defaultValue: "Preview this version" })}
                     >
                       <Eye className="w-4 h-4" />
                     </button>
@@ -172,7 +174,7 @@ export function VersionHistoryPanel({
                           )
                         }
                         className="p-2 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-primary)]/10 rounded-md transition-colors"
-                        title="Compare with current"
+                        title={t("tooltips.compareWithCurrent", { defaultValue: "Compare with current" })}
                       >
                         <GitCompare className="w-4 h-4" />
                       </button>
@@ -181,7 +183,7 @@ export function VersionHistoryPanel({
                       <button type="button"
                         onClick={() => onRestore(version)}
                         className="p-2 text-amber-600 hover:bg-amber-500/10 rounded-md transition-colors"
-                        title="Restore this version"
+                        title={t("tooltips.restoreThisVersion", { defaultValue: "Restore this version" })}
                       >
                         <Undo2 className="w-4 h-4" />
                       </button>

package/src/components/WebhookManager.tsx

@@ -24,7 +24,7 @@ import { useUIStore, toast } from "../lib/stores";
 import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 import { Badge } from "./ui/Badge";
 import { PageHeader } from "./ui/PageHeader";
-
+import { useTranslation } from "react-i18next";
 
 interface WebhookConfigField {
   name: string;
@@ -76,6 +76,7 @@ const ACTION_ICONS: Record<string, string> = {
 };
 
 export function WebhookManager() {
+    const { t } = useTranslation();
   const {
     items: webhooks,
     loading,
@@ -265,7 +266,7 @@ export function WebhookManager() {
   return (
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
       <PageHeader
-        title="Webhooks"
+        title={t("tooltips.webhooks", { defaultValue: "Webhooks" })}
         description="Get notified when your content changes."
         icon={Webhook}
         actions={[
@@ -410,7 +411,7 @@ export function WebhookManager() {
                       type="button"
                       onClick={() => handleViewHistory(webhook.id)}
                       className="p-2 rounded-lg border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] transition-colors flex items-center gap-1.5"
-                      title="View delivery history"
+                      title={t("tooltips.viewDeliveryHistory", { defaultValue: "View delivery history" })}
                     >
                       <Activity className="w-3.5 h-3.5" />
                       <span className="text-[11px] font-medium hidden sm:inline">History</span>
@@ -420,7 +421,7 @@ export function WebhookManager() {
                       type="button"
                       onClick={() => handleTest(webhook.id)}
                       className="p-2 rounded-lg border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] transition-colors flex items-center gap-1.5"
-                      title="Send test request"
+                      title={t("tooltips.sendTestRequest", { defaultValue: "Send test request" })}
                     >
                       <Send className="w-3.5 h-3.5" />
                       <span className="text-[11px] font-medium">Test</span>
@@ -439,7 +440,7 @@ export function WebhookManager() {
                       type="button"
                       onClick={() => remove(webhook.id, "Webhook")}
                       className="p-2 rounded-lg border border-[var(--kyro-border)] hover:border-red-500/30 hover:bg-red-500/5 transition-colors"
-                      title="Delete"
+                      title={t("tooltips.delete", { defaultValue: "Delete" })}
                     >
                       <Trash2 className="w-3.5 h-3.5 text-red-500/50 hover:text-red-500" />
                     </button>
@@ -455,7 +456,7 @@ export function WebhookManager() {
       <Modal
         open={showCreateModal && step === "action"}
         onClose={() => setShowCreateModal(false)}
-        title="New webhook"
+        title={t("tooltips.newWebhook", { defaultValue: "New webhook" })}
       >
         <ModalContent>
           <div className="space-y-4">
@@ -552,7 +553,7 @@ export function WebhookManager() {
                       type="text"
                       value={formData.secret}
                       onChange={(e) => setFormData({ ...formData, secret: e.target.value })}
-                      placeholder="Optional"
+                      placeholder={t("fields.optional", { defaultValue: "Optional" })}
                       className="w-full px-3 py-2.5 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
                     />
                   </div>
@@ -639,7 +640,7 @@ export function WebhookManager() {
       <Modal
         open={showTestModal}
         onClose={() => setShowTestModal(false)}
-        title="Test webhook"
+        title={t("tooltips.testWebhook", { defaultValue: "Test webhook" })}
       >
         <ModalContent>
           <div className="p-6 rounded-xl bg-[var(--kyro-surface)] border border-[var(--kyro-border)] text-center">
@@ -681,7 +682,7 @@ export function WebhookManager() {
       <Modal
         open={showHelpModal}
         onClose={() => setShowHelpModal(false)}
-        title="How webhooks work"
+        title={t("tooltips.howWebhooksWork", { defaultValue: "How webhooks work" })}
       >
         <ModalContent>
           <div className="space-y-6">
@@ -737,7 +738,7 @@ export function WebhookManager() {
       <Modal
         open={showHistoryModal}
         onClose={() => setShowHistoryModal(false)}
-        title="Delivery History"
+        title={t("tooltips.deliveryHistory", { defaultValue: "Delivery History" })}
       >
         <ModalContent>
           <div className="space-y-4">

package/src/components/autoform/AutoFormApiView.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useAutoFormStore } from "../../lib/autoform-store";
+import { useTranslation } from "react-i18next";
 
 interface AutoFormApiViewProps {
   collectionSlug?: string;
@@ -10,6 +11,7 @@ export function AutoFormApiView({
   collectionSlug,
   globalSlug,
 }: AutoFormApiViewProps) {
+    const { t } = useTranslation();
   const { formData } = useAutoFormStore();
 
   return (
@@ -57,7 +59,7 @@ export function AutoFormApiView({
                         navigator.clipboard.writeText(String(formData.id));
                       }}
                       className="p-1.5 hover:bg-[var(--kyro-bg-secondary)] rounded-lg transition-colors text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
-                      title="Copy ID"
+                      title={t("tooltips.copyId", { defaultValue: "Copy ID" })}
                     >
                       <svg
                         width="14"

package/src/components/autoform/AutoFormEditView.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import type { CollectionConfig, GlobalConfig, Field } from "@kyro-cms/core/client";
 import { useAutoFormStore } from "../../lib/autoform-store";
+import { useTranslation } from "react-i18next";
 
 interface AutoFormEditViewProps {
   config: CollectionConfig | GlobalConfig;
@@ -15,6 +16,7 @@ export function AutoFormEditView({
   collectionSlug,
   renderField,
 }: AutoFormEditViewProps) {
+    const { t } = useTranslation();
   const { showPreview, sidebarCollapsed, formData, previewUrl } = useAutoFormStore();
 
   if (layout === "single") {
@@ -67,7 +69,7 @@ export function AutoFormEditView({
             <iframe
               src={previewUrl || ""}
               className="w-full h-full border-none"
-              title="Live Preview"
+              title={t("tooltips.livePreview", { defaultValue: "Live Preview" })}
             />
             <div className="absolute inset-0 bg-transparent pointer-events-none border-[12px] border-[var(--kyro-surface)] rounded-3xl" />
           </div>

package/src/components/autoform/AutoFormHeader.tsx

@@ -5,6 +5,7 @@ import { SplitButton } from "../ui/SplitButton";
 import type { SplitButtonStatus } from "../ui/SplitButton";
 import { useAutoFormStore } from "../../lib/autoform-store";
 import { adminPath as ADMIN_BASE } from "../../lib/paths";
+import { useTranslation } from "react-i18next";
 
 type View = "edit" | "version" | "api";
 
@@ -41,6 +42,7 @@ export function AutoFormHeader({
   handleSchedulePublish,
   handleConflictOverride,
 }: AutoFormHeaderProps) {
+    const { t } = useTranslation();
   const [now, setNow] = useState(Date.now());
   const [showSchedulePicker, setShowSchedulePicker] = useState(false);
   const scheduleRef = useRef<HTMLDivElement>(null);
@@ -194,7 +196,7 @@ export function AutoFormHeader({
         <button
           type="button"
           className="kyro-btn p-2 md:p-2.5 rounded-xl border border-[var(--kyro-border)] hover:bg-[var(--kyro-bg-secondary)] transition-all"
-          title="More actions"
+          title={t("tooltips.moreActions", { defaultValue: "More actions" })}
         >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
             <circle cx="12" cy="5" r="1.5" />
@@ -377,8 +379,7 @@ export function AutoFormHeader({
               <button
                 type="button"
                 onClick={() => {
-                  setFormData(lastSavedData);
-                  markSaved();
+                  useAutoFormStore.getState().loadDocument(lastSavedData, lastSavedData);
                 }}
                 className="text-[var(--kyro-primary)] text-[10px] font-medium hover:underline"
               >
@@ -424,8 +425,7 @@ export function AutoFormHeader({
                 <button
                   type="button"
                   onClick={() => {
-                    setFormData(lastSavedData);
-                    markSaved();
+                    useAutoFormStore.getState().loadDocument(lastSavedData, lastSavedData);
                   }}
                   className="text-[var(--kyro-primary)] hover:underline"
                 >
@@ -475,7 +475,7 @@ export function AutoFormHeader({
               type="button"
               onClick={() => setShowPreview(!showPreview)}
               className={`kyro-btn p-2.5 rounded-xl transition-all flex items-center gap-2 ${showPreview ? "shadow-lg" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`}
-              title="Live Preview"
+              title={t("tooltips.livePreview", { defaultValue: "Live Preview" })}
             >
               <ExternalLink className="w-4 h-4" />
               {showPreview && (

package/src/components/blocks/AccordionBlock.tsx

@@ -5,11 +5,13 @@ import {
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "../ui/icons";
 import { AccordionField } from "../fields/AccordionField";
+import { useTranslation } from "react-i18next";
 
 export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
@@ -36,7 +38,7 @@ export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: n
             type="button"
             onClick={() => moveBlock(block.id, "up")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move up"
+            title={t("tooltips.moveUp", { defaultValue: "Move up" })}
           >
             <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
@@ -44,7 +46,7 @@ export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: n
             type="button"
             onClick={() => moveBlock(block.id, "down")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move down"
+            title={t("tooltips.moveDown", { defaultValue: "Move down" })}
           >
             <ChevronRight className="w-3 h-3" />
           </button>
@@ -52,7 +54,7 @@ export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: n
             type="button"
             onClick={() => removeBlock(block.id)}
             className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
-            title="Remove"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
             <X className="w-3 h-3" />
           </button>

package/src/components/blocks/ArrayBlock.tsx

@@ -5,11 +5,13 @@ import {
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "../ui/icons";
 import { ChildBlocksTree } from "./ChildBlocksTree";
+import { useTranslation } from "react-i18next";
 
 export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
@@ -32,7 +34,7 @@ export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: numbe
             type="button"
             onClick={() => moveBlock(block.id, "up")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move up"
+            title={t("tooltips.moveUp", { defaultValue: "Move up" })}
           >
             <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
@@ -40,7 +42,7 @@ export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: numbe
             type="button"
             onClick={() => moveBlock(block.id, "down")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move down"
+            title={t("tooltips.moveDown", { defaultValue: "Move down" })}
           >
             <ChevronRight className="w-3 h-3" />
           </button>
@@ -48,7 +50,7 @@ export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: numbe
             type="button"
             onClick={() => removeBlock(block.id)}
             className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
-            title="Remove"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
             <X className="w-3 h-3" />
           </button>

package/src/components/blocks/BlockWrapper.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { ChevronRight, X } from "../ui/icons";
 import { useBlockActions } from "../fields/extensions/blocksStore";
+import { useTranslation } from "react-i18next";
 
 interface BlockWrapperProps {
   id: string;
@@ -17,6 +18,7 @@ export const BlockWrapper: React.FC<BlockWrapperProps> = ({
   children,
   className = "",
 }) => {
+    const { t } = useTranslation();
   const { moveBlock, removeBlock } = useBlockActions();
 
   return (
@@ -30,7 +32,7 @@ export const BlockWrapper: React.FC<BlockWrapperProps> = ({
             type="button"
             onClick={() => moveBlock(id, "up")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)]"
-            title="Move up"
+            title={t("tooltips.moveUp", { defaultValue: "Move up" })}
           >
             <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
@@ -38,7 +40,7 @@ export const BlockWrapper: React.FC<BlockWrapperProps> = ({
             type="button"
             onClick={() => moveBlock(id, "down")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)]"
-            title="Move down"
+            title={t("tooltips.moveDown", { defaultValue: "Move down" })}
           >
             <ChevronRight className="w-3 h-3" />
           </button>
@@ -46,7 +48,7 @@ export const BlockWrapper: React.FC<BlockWrapperProps> = ({
             type="button"
             onClick={() => removeBlock(id)}
             className="p-1 hover:bg-[var(--kyro-error)]/10 rounded text-[var(--kyro-error)]"
-            title="Remove"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
             <X className="w-3 h-3" />
           </button>

package/src/components/blocks/CodeBlock.tsx

@@ -5,11 +5,13 @@ import {
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X, Code2 } from "../ui/icons";
 import { CodeField } from "../fields/CodeField";
+import { useTranslation } from "react-i18next";
 
 export const CodeBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
   const data = blockData?.data ?? block.data ?? {};
@@ -39,7 +41,7 @@ export const CodeBlock: React.FC<{ block: Record<string, unknown>; index: number
               type="button"
               onClick={() => moveBlock(block.id, "up")}
               className="p-1.5 hover:bg-[var(--kyro-surface)] rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)]"
-              title="Move up"
+              title={t("tooltips.moveUp", { defaultValue: "Move up" })}
             >
               <ChevronRight className="w-4 h-4 rotate-[-90deg]" />
             </button>
@@ -48,7 +50,7 @@ export const CodeBlock: React.FC<{ block: Record<string, unknown>; index: number
               type="button"
               onClick={() => removeBlock(block.id)}
               className="p-1.5 hover:bg-[var(--kyro-danger-bg)] rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)]"
-              title="Remove"
+              title={t("tooltips.remove", { defaultValue: "Remove" })}
             >
               <X className="w-4 h-4" />
             </button>

package/src/components/blocks/FileBlock.tsx

@@ -5,11 +5,13 @@ import {
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "../ui/icons";
 import { UploadField } from "../fields/UploadField";
+import { useTranslation } from "react-i18next";
 
 export const FileBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
@@ -30,7 +32,7 @@ export const FileBlock: React.FC<{ block: Record<string, unknown>; index: number
             type="button"
             onClick={() => moveBlock(block.id, "up")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move up"
+            title={t("tooltips.moveUp", { defaultValue: "Move up" })}
           >
             <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
@@ -38,7 +40,7 @@ export const FileBlock: React.FC<{ block: Record<string, unknown>; index: number
             type="button"
             onClick={() => moveBlock(block.id, "down")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move down"
+            title={t("tooltips.moveDown", { defaultValue: "Move down" })}
           >
             <ChevronRight className="w-3 h-3" />
           </button>
@@ -46,7 +48,7 @@ export const FileBlock: React.FC<{ block: Record<string, unknown>; index: number
             type="button"
             onClick={() => removeBlock(block.id)}
             className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
-            title="Remove"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
             <X className="w-3 h-3" />
           </button>

package/src/components/blocks/HeroBlock.tsx

@@ -7,11 +7,13 @@ import { ChevronRight, X } from "../ui/icons";
 import { HeroField } from "../fields/HeroField";
 import { UploadField } from "../fields/UploadField";
 import { ChildBlocksTree } from "./ChildBlocksTree";
+import { useTranslation } from "react-i18next";
 
 export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
@@ -35,7 +37,7 @@ export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number
             type="button"
             onClick={() => moveBlock(block.id, "up")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move up"
+            title={t("tooltips.moveUp", { defaultValue: "Move up" })}
           >
             <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
@@ -43,7 +45,7 @@ export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number
             type="button"
             onClick={() => moveBlock(block.id, "down")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move down"
+            title={t("tooltips.moveDown", { defaultValue: "Move down" })}
           >
             <ChevronRight className="w-3 h-3" />
           </button>
@@ -51,7 +53,7 @@ export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number
             type="button"
             onClick={() => removeBlock(block.id)}
             className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
-            title="Remove"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
             <X className="w-3 h-3" />
           </button>