@kyro-cms/admin 0.12.4 → 0.12.5

package/src/components/fields/BlocksField.tsx

@@ -48,6 +48,7 @@ interface BlocksFieldProps {
 }
 
 import { GripVertical } from "../ui/icons";
+import { useTranslation } from "react-i18next";
 
 function getBlockPreviewSnippet(
   data: Record<string, any>,
@@ -82,6 +83,7 @@ const SortableBlockComponent = ({
   onDuplicate: (id: string) => void;
   compact?: boolean;
 }) => {
+    const { t } = useTranslation();
   const {
     attributes,
     listeners,
@@ -89,7 +91,7 @@ const SortableBlockComponent = ({
     transform,
     transition,
     isDragging,
-  } = useSortable({ id: block.id });
+  } = useSortable({ id: block.id as string });
 
   const { removeBlock, updateBlock } = useBlockActions();
   const isEditing = editingBlockId === block.id;
@@ -99,19 +101,6 @@ const SortableBlockComponent = ({
   const nameInputRef = useRef<HTMLInputElement>(null);
   const [copied, setCopied] = useState(false);
 
-  const copyToClipboard = useCallback(async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    try {
-      const { id, ...blockProps } = block;
-      const payload = JSON.stringify({ __kyro_block: true, type: block.type, blockProps });
-      await navigator.clipboard.writeText(payload);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy block", err);
-    }
-  }, [block]);
-
   useEffect(() => {
     if (editingName && nameInputRef.current) {
       nameInputRef.current.focus();
@@ -211,7 +200,7 @@ const SortableBlockComponent = ({
                   setEditingName(true);
                 }}
                 className="p-0.5 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
-                title="Rename"
+                title={t("tooltips.rename", { defaultValue: "Rename" })}
               >
                 <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
               </button>
@@ -222,18 +211,11 @@ const SortableBlockComponent = ({
                   onDuplicate(block.id as string);
                 }}
                 className="p-0.5 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
-                title="Duplicate in place"
+                title={t("tooltips.duplicateInPlace", { defaultValue: "Duplicate in place" })}
               >
                 <Copy className="w-3 h-3" />
               </button>
-              <button
-                type="button"
-                onClick={copyToClipboard}
-                className="p-0.5 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
-                title="Copy Block to Clipboard"
-              >
-                {copied ? <Check className="w-3 h-3 text-green-500" /> : <ClipboardCopy className="w-3 h-3" />}
-              </button>
+
               <button
                 type="button"
                 onClick={(e) => {
@@ -241,7 +223,7 @@ const SortableBlockComponent = ({
                   setShowDeleteConfirm(true);
                 }}
                 className="p-0.5 hover:bg-[var(--kyro-danger-bg)] hover:text-[var(--kyro-danger)] rounded text-[var(--kyro-text-muted)] transition-colors"
-                title="Remove"
+                title={t("tooltips.remove", { defaultValue: "Remove" })}
               >
                 <X className="w-3 h-3" />
               </button>
@@ -308,16 +290,16 @@ const SortableBlockComponent = ({
               )}
             </div>
           )}
-          {blockSchema?.admin?.description && (
+          {!!blockSchema?.admin?.description && (
             <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5 truncate opacity-80">
-              {blockSchema.admin.description}
+              {blockSchema.admin.description as string}
             </div>
           )}
         </div>
 
-        {block.children && Array.isArray(block.children) && block.children.length > 0 && (
+        {!!block.children && Array.isArray(block.children) && (block.children as any[]).length > 0 && (
           <span className="text-[10px] bg-[var(--kyro-surface-accent)] px-2 py-0.5 rounded text-[var(--kyro-text-muted)] font-medium">
-            {block.children.length} nested
+            {(block.children as any[]).length} nested
           </span>
         )}
 
@@ -354,7 +336,7 @@ const SortableBlockComponent = ({
                 setEditingName(true);
               }}
               className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
-              title="Rename Block"
+              title={t("tooltips.renameBlock", { defaultValue: "Rename Block" })}
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
             </button>
@@ -365,18 +347,11 @@ const SortableBlockComponent = ({
                 onDuplicate(block.id as string);
               }}
               className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
-              title="Duplicate Block"
+              title={t("tooltips.duplicateBlock", { defaultValue: "Duplicate Block" })}
             >
               <Copy className="w-3.5 h-3.5" />
             </button>
-            <button
-              type="button"
-              onClick={copyToClipboard}
-              className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
-              title="Copy Block to Clipboard"
-            >
-              {copied ? <Check className="w-3.5 h-3.5 text-green-500" /> : <ClipboardCopy className="w-3.5 h-3.5" />}
-            </button>
+
             <button
               type="button"
               onClick={(e) => {
@@ -384,7 +359,7 @@ const SortableBlockComponent = ({
                 setShowDeleteConfirm(true);
               }}
               className="p-1 hover:bg-[var(--kyro-danger-bg)] hover:text-[var(--kyro-danger)] rounded text-[var(--kyro-text-muted)] transition-colors"
-              title="Remove Block"
+              title={t("tooltips.removeBlock", { defaultValue: "Remove Block" })}
             >
               <X className="w-3.5 h-3.5" />
             </button>
@@ -504,8 +479,8 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
     if (!deepEqual(valueArray, lastValueArray)) {
       const valueArrayCopy = [...valueArray];
       prevBlocksLengthRef.current = valueArrayCopy.length;
-      prevBlockIdsRef.current = new Set(valueArrayCopy.map((b: Record<string, unknown>) => b.id));
-      store.getState().setBlocks(valueArrayCopy);
+      prevBlockIdsRef.current = new Set(valueArrayCopy.map((b: any) => b.id as string));
+      store.getState().setBlocks(valueArrayCopy as any);
       lastValueRef.current = valueArrayCopy;
       isInitializedRef.current = true;
     } else if (valueArray.length === 0 && !isInitializedRef.current) {
@@ -571,32 +546,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
     setIsDrawerOpen(false);
   }, [field.blocks, blocks, store]);
 
-  const handleContainerPaste = useCallback((e: React.ClipboardEvent<HTMLDivElement>) => {
-    const activeEl = document.activeElement;
-    if (
-      activeEl &&
-      (activeEl.tagName === "INPUT" ||
-        activeEl.tagName === "TEXTAREA" ||
-        activeEl.getAttribute("contenteditable") === "true")
-    ) {
-      return;
-    }
-
-    const text = e.clipboardData?.getData("text");
-    if (!text) return;
 
-    try {
-      const parsed = JSON.parse(text);
-      if (parsed && parsed.__kyro_block) {
-        e.preventDefault();
-        e.stopPropagation();
-        handlePasteBlock(parsed);
-        toast.success(`Block pasted: ${parsed.type}`);
-      }
-    } catch {
-      // Ignore
-    }
-  }, [handlePasteBlock]);
 
   const duplicateBlock = useCallback(
     (blockId: string) => {
@@ -693,14 +643,14 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
   const activeBlock = activeDrag
     ? dynamicCategories
       .flatMap((cat) => cat.blocks)
-      .find((b) => `drawer-${b.type}` === activeDrag.id) ||
+      .find((b: any) => `drawer-${b.type}` === activeDrag.id) ||
     blocks.find((b) => b.id === activeDrag.id)
     : null;
 
   const activeBlockLabel = activeBlock
-    ? "label" in activeBlock
+    ? "label" in (activeBlock as object)
       ? (activeBlock as Record<string, unknown>).label
-      : activeBlock.type
+      : (activeBlock as any).type
     : "Block";
 
   const borderClass = getBorderClass();
@@ -720,7 +670,6 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
     <BlocksContext.Provider value={storeRef.current}>
       <div 
         className="kyro-blocks-field"
-        onPaste={handleContainerPaste}
         tabIndex={0}
         style={{ outline: "none" }}
       >
@@ -731,7 +680,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
           onDragEnd={handleDragEnd}
         >
           <div className={pickerMode === "dropdown" ? "mb-4" : "flex items-center justify-between mb-2"}>
-            <label className={`kyro-form-label ${pickerMode === "dropdown" ? "block mb-2" : ""}`}>{field.label || field.name}</label>
+            <label className={`kyro-form-label ${pickerMode === "dropdown" ? "block mb-2" : ""}`}>{(field.label || field.name) as string}</label>
             {pickerMode === "dropdown" ? (
               <div ref={dropdownRef} className="relative w-full">
                 <button
@@ -756,7 +705,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
                             {category.title}
                           </div>
                         )}
-                        {category.blocks.map((block) => (
+                        {(category as any).blocks.map((block: any) => (
                           <button
                             key={block.slug}
                             type="button"
@@ -809,7 +758,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
                       {category.title}
                     </h3>
                     <div className="grid grid-cols-3 gap-2">
-                      {category.blocks.map((block) => (
+                      {(category as any).blocks.map((block: any) => (
                         <DraggableBlockType
                           key={block.slug}
                           block={{
@@ -869,7 +818,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
           <DragOverlay>
             {activeDrag && activeBlock && (
               <div className="bg-[var(--kyro-surface)] border border-[var(--kyro-primary)] rounded-md p-3 shadow-lg">
-                {(activeBlock as Record<string, unknown>).label || activeBlock.type || "Block"}
+                {(activeBlock as Record<string, unknown>).label as string || (activeBlock as any).type || "Block"}
               </div>
             )}
           </DragOverlay>

package/src/components/fields/ButtonField.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { ExternalLink } from "../ui/icons";
+import { useTranslation } from "react-i18next";
 
 interface ButtonFieldProps {
   text?: string;
@@ -14,6 +15,7 @@ export const ButtonField: React.FC<ButtonFieldProps> = ({
   onChange,
   compact = false,
 }) => {
+    const { t } = useTranslation();
   const inputClass = compact
     ? "flex-1 px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
     : "flex-1 px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
@@ -25,7 +27,7 @@ export const ButtonField: React.FC<ButtonFieldProps> = ({
         value={text}
         onChange={(e) => onChange("text", e.target.value)}
         className={inputClass}
-        placeholder="Button text..."
+        placeholder={t("fields.buttonText", { defaultValue: "Button text..." })}
       />
       <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
       <input

package/src/components/fields/CardField.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 interface CardFieldProps {
   title?: string;
@@ -19,6 +20,7 @@ export const CardField: React.FC<CardFieldProps> = ({
   onChange,
   compact = false,
 }) => {
+    const { t } = useTranslation();
   const inputClass = compact
     ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
     : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
@@ -34,20 +36,20 @@ export const CardField: React.FC<CardFieldProps> = ({
         value={title}
         onChange={(e) => onChange("title", e.target.value)}
         className={`${inputClass} font-bold text-base`}
-        placeholder="Card title..."
+        placeholder={t("fields.cardTitle", { defaultValue: "Card title..." })}
       />
       <textarea
         value={description}
         onChange={(e) => onChange("description", e.target.value)}
         className={textareaClass}
-        placeholder="Card description..."
+        placeholder={t("fields.cardDescription", { defaultValue: "Card description..." })}
       />
       <input
         type="text"
         value={icon}
         onChange={(e) => onChange("icon", e.target.value)}
         className={inputClass}
-        placeholder="Icon (emoji or name)..."
+        placeholder={t("fields.iconEmojiOrName", { defaultValue: "Icon (emoji or name)..." })}
       />
       <div className="flex items-center gap-2">
         <input
@@ -55,7 +57,7 @@ export const CardField: React.FC<CardFieldProps> = ({
           value={linkText}
           onChange={(e) => onChange("linkText", e.target.value)}
           className="flex-1 px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
-          placeholder="Link text..."
+          placeholder={t("fields.linkText", { defaultValue: "Link text..." })}
         />
         <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
         <input

package/src/components/fields/GroupLayout.tsx

@@ -1,6 +1,4 @@
-import React, { useState, useCallback } from "react";
-import type { Field } from "@kyro-cms/core/client";
-import { Copy, ClipboardPaste, Check } from "../ui/icons";
+import React from "react";
 import type { Field } from "@kyro-cms/core/client";
 
 interface GroupLayoutProps {
@@ -21,34 +19,6 @@ export function GroupLayout({
   renderField,
 }: GroupLayoutProps) {
   const groupData = value || {};
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(async (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    try {
-      const payload = JSON.stringify({ __kyro_container: true, value: groupData });
-      await navigator.clipboard.writeText(payload);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy", err);
-    }
-  }, [groupData]);
-
-  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_group || parsed.__kyro_container) && parsed.value) {
-        onChange({ ...groupData, ...parsed.value });
-      }
-    } catch (err) {
-      console.error("Failed to paste", err);
-    }
-  }, [groupData, onChange]);
 
   return (
     <div className="kyro-form-group border border-[var(--kyro-border)] rounded-[var(--kyro-radius-lg)] p-6 bg-[var(--kyro-surface-accent)]/30">
@@ -56,24 +26,7 @@ export function GroupLayout({
         <h3 className="text-sm font-bold tracking-widest text-[var(--kyro-text-primary)]">
           {field.label || field.name}
         </h3>
-        <div className="flex items-center gap-1">
-          <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 Group Data"
-          >
-            {copied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
-          </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 Group Data"
-          >
-            <ClipboardPaste className="w-4 h-4" />
-          </button>
-        </div>
+
       </div>
       <div className={field.admin?.inline ? "flex items-start gap-4" : "space-y-6"}>
         {(field as Field & { fields?: Field[] }).fields.map((f: Field) =>

package/src/components/fields/HeadingField.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 interface HeadingFieldProps {
   text?: string;
@@ -11,6 +12,7 @@ export const HeadingField: React.FC<HeadingFieldProps> = ({
   onChange,
   compact = false,
 }) => {
+    const { t } = useTranslation();
   const inputClass = compact
     ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
     : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
@@ -22,7 +24,7 @@ export const HeadingField: React.FC<HeadingFieldProps> = ({
         value={text}
         onChange={(e) => onChange("text", e.target.value)}
         className={inputClass}
-        placeholder="Enter heading text..."
+        placeholder={t("fields.enterHeadingText", { defaultValue: "Enter heading text..." })}
       />
     </div>
   );

package/src/components/fields/HeadingSubheadingField.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 interface HeadingSubheadingFieldProps {
   heading?: string;
@@ -13,6 +14,7 @@ export const HeadingSubheadingField: React.FC<HeadingSubheadingFieldProps> = ({
   onChange,
   compact = false,
 }) => {
+    const { t } = useTranslation();
   const inputClass = compact
     ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
     : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
@@ -28,13 +30,13 @@ export const HeadingSubheadingField: React.FC<HeadingSubheadingFieldProps> = ({
         value={heading}
         onChange={(e) => onChange("title", e.target.value)}
         className={`${inputClass} font-bold text-base`}
-        placeholder="Heading..."
+        placeholder={t("fields.heading", { defaultValue: "Heading..." })}
       />
       <textarea
         value={subheading}
         onChange={(e) => onChange("subtitle", e.target.value)}
         className={textareaClass}
-        placeholder="Subheading..."
+        placeholder={t("fields.subheading", { defaultValue: "Subheading..." })}
       />
     </div>
   );

package/src/components/fields/HeroField.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 interface HeroFieldProps {
   heading?: string;
@@ -17,6 +18,7 @@ export const HeroField: React.FC<HeroFieldProps> = ({
   onChange,
   compact = false,
 }) => {
+    const { t } = useTranslation();
   const inputClass = compact
     ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
     : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
@@ -33,13 +35,13 @@ export const HeroField: React.FC<HeroFieldProps> = ({
           value={heading}
           onChange={(e) => onChange("title", e.target.value)}
           className={`${inputClass} font-bold text-base`}
-          placeholder="Hero heading..."
+          placeholder={t("fields.heroHeading", { defaultValue: "Hero heading..." })}
         />
         <textarea
           value={subheading}
           onChange={(e) => onChange("subtitle", e.target.value)}
           className={textareaClass}
-          placeholder="Hero subheading..."
+          placeholder={t("fields.heroSubheading", { defaultValue: "Hero subheading..." })}
         />
         <div className="flex items-center gap-2">
           <input
@@ -47,7 +49,7 @@ export const HeroField: React.FC<HeroFieldProps> = ({
             value={ctaText}
             onChange={(e) => onChange("ctaText", e.target.value)}
             className="flex-1 px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
-            placeholder="CTA text..."
+            placeholder={t("fields.ctaText", { defaultValue: "CTA text..." })}
           />
           <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
           <input
@@ -69,13 +71,13 @@ export const HeroField: React.FC<HeroFieldProps> = ({
         value={heading}
         onChange={(e) => onChange("title", e.target.value)}
         className={`${inputClass} font-bold text-base`}
-        placeholder="Hero heading..."
+        placeholder={t("fields.heroHeading", { defaultValue: "Hero heading..." })}
       />
       <textarea
         value={subheading}
         onChange={(e) => onChange("subtitle", e.target.value)}
         className={textareaClass}
-        placeholder="Hero subheading..."
+        placeholder={t("fields.heroSubheading", { defaultValue: "Hero subheading..." })}
       />
       <div className="flex items-center gap-2">
         <input
@@ -83,7 +85,7 @@ export const HeroField: React.FC<HeroFieldProps> = ({
           value={ctaText}
           onChange={(e) => onChange("ctaText", e.target.value)}
           className="flex-1 px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
-          placeholder="CTA text..."
+          placeholder={t("fields.ctaText", { defaultValue: "CTA text..." })}
         />
         <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
         <input

package/src/components/fields/JSONField.tsx

@@ -89,7 +89,7 @@ export const JSONField: React.FC<JSONFieldProps> = ({
     return (
       <div className="kyro-form-field">
         <label className="kyro-form-label">
-          {field.label || field.name}
+          {(field.label || field.name) as string}
           {field.required && (
             <span className="kyro-form-label-required">*</span>
           )}
@@ -103,7 +103,7 @@ export const JSONField: React.FC<JSONFieldProps> = ({
     <div className="kyro-form-field">
       <div className="flex items-center justify-between mb-2">
         <label className="kyro-form-label">
-          {field.label || field.name}
+          {(field.label || field.name) as string}
           {field.required && (
             <span className="kyro-form-label-required">*</span>
           )}
@@ -199,8 +199,8 @@ export const JSONField: React.FC<JSONFieldProps> = ({
         )}
       </div>
 
-      {field.admin?.description && !error && !parseError && (
-        <p className="kyro-form-help">{field.admin.description}</p>
+      {!!field.admin?.description && !error && !parseError && (
+        <p className="kyro-form-help">{(field as any).admin.description}</p>
       )}
       {(error || parseError) && (
         <p className="kyro-form-error">{error || parseError}</p>
@@ -215,14 +215,13 @@ const TreeView: React.FC<{ data: TreeNode }> = ({ data }) => {
 
   const renderValue = (node: TreeNode) => {
     if (node.type === "object") {
-      const entries = Object.entries(node.value);
       return (
         <div className="pl-4 border-l border-[var(--kyro-border)]">
-          {entries.map(([key, val]) => (
+          {Object.entries(node.value as object).map(([key, child]) => (
             <TreeNodeView
               key={key}
               name={key}
-              value={val}
+              value={child}
               path={[...node.path, key]}
             />
           ))}
@@ -232,7 +231,7 @@ const TreeView: React.FC<{ data: TreeNode }> = ({ data }) => {
     if (node.type === "array") {
       return (
         <div className="pl-4 border-l border-[var(--kyro-border)]">
-          {node.value.map((item: unknown, index: number) => (
+          {(node.value as any[]).map((item: unknown, index: number) => (
             <TreeNodeView
               key={index}
               name={String(index)}
@@ -269,11 +268,11 @@ const TreeView: React.FC<{ data: TreeNode }> = ({ data }) => {
 
   const getPreview = (item: TreeNode) => {
     if (item.type === "object") {
-      const keys = Object.keys(item.value);
+      const keys = Object.keys(item.value as object);
       return `{${keys.length} ${keys.length === 1 ? "key" : "keys"}}`;
     }
     if (item.type === "array") {
-      return `[${item.value.length} ${item.value.length === 1 ? "item" : "items"}]`;
+      return `[${(item.value as any[]).length} ${(item.value as any[]).length === 1 ? "item" : "items"}]`;
     }
     return null;
   };

package/src/components/fields/LinkField.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { ExternalLink } from "../ui/icons";
+import { useTranslation } from "react-i18next";
 
 interface LinkFieldProps {
   text?: string;
@@ -14,6 +15,7 @@ export const LinkField: React.FC<LinkFieldProps> = ({
   onChange,
   compact = false,
 }) => {
+    const { t } = useTranslation();
   return (
     <div className={compact ? "flex items-center gap-2" : "space-y-2"}>
       {compact ? (
@@ -23,7 +25,7 @@ export const LinkField: React.FC<LinkFieldProps> = ({
             value={text}
             onChange={(e) => onChange("text", e.target.value)}
             className="flex-1 min-w-0 px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
-            placeholder="Link text..."
+            placeholder={t("fields.linkText", { defaultValue: "Link text..." })}
           />
           <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
           <input
@@ -52,7 +54,7 @@ export const LinkField: React.FC<LinkFieldProps> = ({
             value={text}
             onChange={(e) => onChange("text", e.target.value)}
             className="w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
-            placeholder="Link text..."
+            placeholder={t("fields.linkText", { defaultValue: "Link text..." })}
           />
           <input
             type="url"

package/src/components/fields/ListField.tsx

@@ -14,6 +14,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { useTranslation } from "react-i18next";
 
 interface ListFieldProps {
   items?: string[];
@@ -79,6 +80,7 @@ export const ListField: React.FC<ListFieldProps> = ({
   onChange,
   compact = false,
 }) => {
+    const { t } = useTranslation();
   const [inputValue, setInputValue] = React.useState("");
   const [mappedItems, setMappedItems] = React.useState<{ id: string; text: string }[]>([]);
 
@@ -174,7 +176,7 @@ export const ListField: React.FC<ListFieldProps> = ({
           onChange={(e) => setInputValue(e.target.value)}
           onKeyDown={handleKeyDown}
           className={inputClass}
-          placeholder="Type and press Enter to add..."
+          placeholder={t("fields.typeAndPressEnter", { defaultValue: "Type and press Enter to add..." })}
         />
       </div>
     </DndContext>