@kyro-cms/admin 0.12.3 → 0.12.5

package/src/components/blocks/ImageBlock.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 ImageBlock: 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 || {};
@@ -28,14 +30,14 @@ export const ImageBlock: React.FC<{ block: Record<string, unknown>; index: numbe
           <button 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>
           <button type="button"
             onClick={() => removeBlock(block.id)}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Remove"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
             <X className="w-3 h-3" />
           </button>
@@ -61,7 +63,7 @@ export const ImageBlock: React.FC<{ block: Record<string, unknown>; index: numbe
             value={data.alt || ""}
             onChange={(e) => handleChange("alt", e.target.value)}
             className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
-            placeholder="Alternative text..."
+            placeholder={t("fields.alternativeText", { defaultValue: "Alternative text..." })}
           />
         </div>
         <div>
@@ -73,7 +75,7 @@ export const ImageBlock: React.FC<{ block: Record<string, unknown>; index: numbe
             value={data.caption || ""}
             onChange={(e) => handleChange("caption", e.target.value)}
             className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
-            placeholder="Image caption..."
+            placeholder={t("fields.imageCaption", { defaultValue: "Image caption..." })}
           />
         </div>
       </div>

package/src/components/blocks/ListBlock.tsx

@@ -5,11 +5,13 @@ import {
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "../ui/icons";
 import { ListField } from "../fields/ListField";
+import { useTranslation } from "react-i18next";
 
 export const ListBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
@@ -31,7 +33,7 @@ export const ListBlock: 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>
@@ -39,7 +41,7 @@ export const ListBlock: 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>
@@ -47,7 +49,7 @@ export const ListBlock: 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/ParagraphBlock.tsx

@@ -4,11 +4,13 @@ import {
   useBlockActions,
 } from "../fields/extensions/blocksStore";
 import { BlockWrapper } from "./BlockWrapper";
+import { useTranslation } from "react-i18next";
 
 export const ParagraphBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock } = useBlockActions();
 
@@ -24,7 +26,7 @@ export const ParagraphBlock: React.FC<{ block: Record<string, unknown>; index: n
         value={data.text || ""}
         onChange={(e) => handleChange("text", e.target.value)}
         className="w-full px-3 py-3 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm min-h-[100px] resize-none"
-        placeholder="Enter paragraph text..."
+        placeholder={t("fields.enterParagraphText", { defaultValue: "Enter paragraph text..." })}
       />
     </BlockWrapper>
   );

package/src/components/blocks/RelationshipBlock.tsx

@@ -5,11 +5,13 @@ import {
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "../ui/icons";
 import { RelationshipBlockField } from "../fields/RelationshipBlockField";
+import { useTranslation } from "react-i18next";
 
 export const RelationshipBlock: 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 RelationshipBlock: React.FC<{ block: Record<string, unknown>; index
             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 RelationshipBlock: React.FC<{ block: Record<string, unknown>; index
             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 RelationshipBlock: React.FC<{ block: Record<string, unknown>; index
             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/RichTextBlock.tsx

@@ -5,11 +5,13 @@ import {
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X, AlignLeft } from "../ui/icons";
 import { RichTextField } from "../fields";
+import { useTranslation } from "react-i18next";
 
 export const RichTextBlock: React.FC<{ block: any; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
@@ -33,7 +35,7 @@ export const RichTextBlock: React.FC<{ block: any; 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>
@@ -41,7 +43,7 @@ export const RichTextBlock: React.FC<{ block: any; 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>
@@ -49,7 +51,7 @@ export const RichTextBlock: React.FC<{ block: any; 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/VideoBlock.tsx

@@ -5,11 +5,13 @@ import {
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "../ui/icons";
 import { VideoField } from "../fields/VideoField";
+import { useTranslation } from "react-i18next";
 
 export const VideoBlock: 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 VideoBlock: 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>
@@ -38,7 +40,7 @@ export const VideoBlock: 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>
@@ -46,7 +48,7 @@ export const VideoBlock: 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/fields/AccordionField.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from "react";
-import { ChevronDown, ChevronUp, Plus, X, Copy, ClipboardPaste, Check } from "../ui/icons";
+import { ChevronDown, ChevronUp, Plus, X } from "../ui/icons";
+import { useTranslation } from "react-i18next";
 
 interface AccordionItem {
   title: string;
@@ -18,53 +19,9 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
   compact = false,
 }) => {
   const [openIndex, setOpenIndex] = useState<number | null>(0);
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(async (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    try {
-      const payload = JSON.stringify({ __kyro_accordion: true, items });
-      await navigator.clipboard.writeText(payload);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy", err);
-    }
-  }, [items]);
-
-  const handlePaste = useCallback(async (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    try {
-      const text = await navigator.clipboard.readText();
-      const parsed = JSON.parse(text);
-      if (parsed && parsed.__kyro_accordion && Array.isArray(parsed.items)) {
-        onChange([...items, ...parsed.items]);
-      }
-    } catch (err) {
-      console.error("Failed to paste", err);
-    }
-  }, [items, onChange]);
 
   const headerControls = (
     <div className="flex justify-end gap-1 mb-2">
-      <button
-        type="button"
-        onClick={handleCopy}
-        className="p-1.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors rounded hover:bg-[var(--kyro-surface)]"
-        title="Copy Items"
-      >
-        {copied ? <Check className="w-3.5 h-3.5 text-green-500" /> : <Copy className="w-3.5 h-3.5" />}
-      </button>
-      <button
-        type="button"
-        onClick={handlePaste}
-        className="p-1.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors rounded hover:bg-[var(--kyro-surface)]"
-        title="Paste Items"
-      >
-        <ClipboardPaste className="w-3.5 h-3.5" />
-      </button>
     </div>
   );
 
@@ -109,6 +66,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
         ) : (
           <div className="space-y-1.5">
             {items.map((item: AccordionItem, index: number) => {
+                const { t } = useTranslation();
               const isOpen = openIndex === index;
               return (
                 <div
@@ -131,7 +89,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
                           handleRemove(index);
                         }}
                         className="opacity-0 group-hover:opacity-100 p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
-                        title="Remove"
+                        title={t("tooltips.remove", { defaultValue: "Remove" })}
                       >
                         <X className="w-3.5 h-3.5" />
                       </button>
@@ -152,7 +110,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
                         }
                         onClick={(e) => e.stopPropagation()}
                         className={smallInputClass}
-                        placeholder="Item title..."
+                        placeholder={t("fields.itemTitle", { defaultValue: "Item title..." })}
                       />
                       <textarea
                         value={item.content || ""}
@@ -161,7 +119,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
                         }
                         onClick={(e) => e.stopPropagation()}
                         className={`${smallInputClass} min-h-[60px] resize-none`}
-                        placeholder="Item content..."
+                        placeholder={t("fields.itemContent", { defaultValue: "Item content..." })}
                       />
                     </div>
                   )}
@@ -192,6 +150,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
       ) : (
         <div className="space-y-2">
           {items.map((item: AccordionItem, index: number) => {
+              const { t } = useTranslation();
             const isOpen = openIndex === index;
             return (
               <div
@@ -214,7 +173,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
                         handleRemove(index);
                       }}
                       className="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
-                      title="Remove"
+                      title={t("tooltips.remove", { defaultValue: "Remove" })}
                     >
                       <X className="w-4 h-4" />
                     </button>
@@ -232,7 +191,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
                       value={item.title || ""}
                       onChange={(e) => handleTitleChange(index, e.target.value)}
                       className={baseInputClass}
-                      placeholder="Item title..."
+                      placeholder={t("fields.itemTitle", { defaultValue: "Item title..." })}
                     />
                     <textarea
                       value={item.content || ""}
@@ -240,7 +199,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
                         handleContentChange(index, e.target.value)
                       }
                       className={`${baseInputClass} min-h-[60px] resize-none`}
-                      placeholder="Item content..."
+                      placeholder={t("fields.itemContent", { defaultValue: "Item content..." })}
                     />
                   </div>
                 )}

package/src/components/fields/ArrayField.tsx

@@ -14,6 +14,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { useTranslation } from "react-i18next";
 
 interface ArrayFieldItem {
   id?: string;
@@ -54,6 +55,7 @@ function SortableArrayFieldItem({
   handleRemove,
   compact,
 }: SortableArrayFieldItemProps) {
+    const { t } = useTranslation();
   const {
     attributes,
     listeners,
@@ -107,7 +109,7 @@ function SortableArrayFieldItem({
                 handleRemove(index);
               }}
               className="opacity-0 group-hover:opacity-100 p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
-              title="Remove"
+              title={t("tooltips.remove", { defaultValue: "Remove" })}
             >
               <X className="w-3.5 h-3.5" />
             </button>
@@ -149,7 +151,7 @@ function SortableArrayFieldItem({
                 }
                 onClick={(e) => e.stopPropagation()}
                 className={inputClass}
-                placeholder="Value..."
+                placeholder={t("fields.value", { defaultValue: "Value..." })}
               />
             )}
           </div>
@@ -191,7 +193,7 @@ function SortableArrayFieldItem({
               handleRemove(index);
             }}
             className="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
-            title="Remove"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
             <X className="w-4 h-4" />
           </button>
@@ -231,7 +233,7 @@ function SortableArrayFieldItem({
                 handleItemChange(index, "value", e.target.value)
               }
               className={inputClass}
-              placeholder="Value..."
+              placeholder={t("fields.value", { defaultValue: "Value..." })}
             />
           )}
         </div>
@@ -350,14 +352,14 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
           </div>
         ) : (
           <SortableContext
-            items={itemIds}
+            items={itemIds as any}
             strategy={verticalListSortingStrategy}
           >
             <div className={compact ? "space-y-1" : "space-y-2"}>
               {items.map((item, index) => (
                 <SortableArrayFieldItem
-                  key={item.id || item._key || index}
-                  id={item.id || item._key || `idx-${index}`}
+                  key={(item as any).id || (item as any)._key || index}
+                  id={(item as any).id || (item as any)._key || `idx-${index}`}
                   index={index}
                   isOpen={openIndex === index}
                   setOpenIndex={setOpenIndex}

package/src/components/fields/ArrayLayout.tsx

@@ -16,6 +16,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { useTranslation } from "react-i18next";
 
 const SIMPLE_TYPES = new Set(["text", "number", "checkbox", "select", "radio", "color", "email", "password"]);
 
@@ -67,6 +68,7 @@ function SortableArrayItem({
   compact,
   getItemLabel,
 }: SortableArrayItemProps) {
+    const { t } = useTranslation();
   const {
     attributes,
     listeners,
@@ -114,7 +116,7 @@ function SortableArrayItem({
           disabled={disabled}
           onClick={onRemove}
           className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-error)] transition-colors disabled:opacity-30 p-0.5 mt-1.5 flex-shrink-0"
-          title="Remove"
+          title={t("tooltips.remove", { defaultValue: "Remove" })}
         >
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />