@kyro-cms/admin 0.12.4 → 0.12.5

package/src/components/fields/MarkdownField.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useMemo, useEffect } from "react";
 import type { MarkdownField as MarkdownFieldType } from "@kyro-cms/core/client";
+import { useTranslation } from "react-i18next";
 
 interface MarkdownFieldProps {
   field: MarkdownFieldType;
@@ -109,6 +110,7 @@ export const MarkdownField: React.FC<MarkdownFieldProps> = ({
   error,
   disabled,
 }) => {
+    const { t } = useTranslation();
   const [showPreview, setShowPreview] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
 
@@ -204,23 +206,7 @@ export const MarkdownField: React.FC<MarkdownFieldProps> = ({
             rows={12}
             style={{ pointerEvents: "auto", cursor: "text", zIndex: 100 }}
             className={`w-full p-4 font-mono text-sm resize-y focus:outline-none bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]`}
-            placeholder="Enter markdown content...
-
-# Heading 1
-## Heading 2
-
-**Bold text** and *italic text*
-
-- List item 1
-- List item 2
-
-[Link text](https://example.com)
-
-`inline code`
-
-```
-code block
-```"
+            placeholder={t("fields.enterMarkdownContentHeading", { defaultValue: "Enter markdown content...\n\n# Heading 1\n## Heading 2\n\n**Bold text** and *italic text*\n\n- List item 1\n- List item 2\n\n[Link text](https://example.com)\n\n`inline code`\n\n```\ncode block\n```" })}
           />
         ) : (
           <div

package/src/components/fields/RelationshipBlockField.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Search, Loader2, X } from "../ui/icons";
 import { apiGet, buildSearchQuery } from "../../lib/api";
 import { EmptyState } from "../ui/EmptyState";
+import { useTranslation } from "react-i18next";
 
 interface RelationshipBlockFieldProps {
   relationTo?: string;
@@ -22,9 +23,10 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
   onChange,
   compact = false,
 }) => {
+    const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState("");
-  const [options, setOptions] = useState<Record<string, unknown>[]>([]);
+  const [options, setOptions] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [collections, setCollections] = useState<string[]>([]);
   const [loadingCollections, setLoadingCollections] = useState(true);
@@ -33,7 +35,7 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
     apiGet("/api/collections")
       .then((data) => {
         setCollections(
-          (data.collections || []).map((c: Record<string, unknown>) => c.slug || c.name || c),
+          (data.collections || []).map((c: any) => c.slug || c.name || c),
         );
         setLoadingCollections(false);
       })
@@ -56,7 +58,7 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
     if (isOpen) fetchOptions(search);
   }, [isOpen, search, relationTo, labelField]);
 
-  const getLabel = (opt: Record<string, unknown>) => {
+  const getLabel = (opt: any) => {
     return (
       opt?.[labelField] ||
       opt?.title ||
@@ -71,7 +73,7 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
 
   const activeIds = hasMany ? selectedIds : selectedId ? [selectedId] : [];
 
-  const handleSelect = (opt: Record<string, unknown>) => {
+  const handleSelect = (opt: any) => {
     if (hasMany) {
       if (activeIds.includes(opt.id)) {
         onChange(
@@ -172,7 +174,7 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
                 Loading...
               </div>
             ) : options.length === 0 ? (
-              <EmptyState title="No results found" />
+              <EmptyState title={t("tooltips.noResultsFound", { defaultValue: "No results found" })} />
             ) : (
               <div className="py-1">
                 {options.map((opt) => (

package/src/components/fields/RelationshipField.tsx

@@ -16,6 +16,7 @@ import {
   horizontalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { useTranslation } from "react-i18next";
 
 interface RelationshipFieldProps {
   field: {
@@ -121,6 +122,7 @@ export function RelationshipField({
   error,
   disabled,
 }: RelationshipFieldProps) {
+    const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState("");
   const [options, setOptions] = useState<ResolvedDoc[]>([]);
@@ -452,7 +454,7 @@ export function RelationshipField({
                 Loading...
               </div>
             ) : options.length === 0 ? (
-              <EmptyState title="No results found" />
+              <EmptyState title={t("tooltips.noResultsFound", { defaultValue: "No results found" })} />
             ) : (
               <div className="py-1">
                 {options.map((opt) => (

package/src/components/fields/RichTextField.tsx

@@ -45,6 +45,7 @@ import {
   Minimize2,
   ChevronDown,
 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 interface RichTextFieldProps {
   field: Field;
@@ -78,6 +79,7 @@ const MenuBar = ({
   setIsExpanded: (expanded: boolean) => void;
   onOpenMediaPicker: () => void;
 }) => {
+    const { t } = useTranslation();
   const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
   const menuBarRef = useRef<HTMLDivElement>(null);
 
@@ -196,14 +198,14 @@ const MenuBar = ({
         <ToolbarButton
           onClick={() => editor.chain().focus().undo().run()}
           disabled={!editor.can().chain().focus().undo().run()}
-          title="Undo (Ctrl+Z)"
+          title={t("tooltips.undoCtrlz", { defaultValue: "Undo (Ctrl+Z)" })}
         >
           <Undo size={12} />
         </ToolbarButton>
         <ToolbarButton
           onClick={() => editor.chain().focus().redo().run()}
           disabled={!editor.can().chain().focus().redo().run()}
-          title="Redo (Ctrl+Y)"
+          title={t("tooltips.redoCtrly", { defaultValue: "Redo (Ctrl+Y)" })}
         >
           <Redo size={12} />
         </ToolbarButton>
@@ -215,7 +217,7 @@ const MenuBar = ({
           onClick={() => editor.chain().focus().toggleBold().run()}
           disabled={!editor.can().chain().focus().toggleBold().run()}
           isActive={editor.isActive("bold")}
-          title="Bold (Ctrl+B)"
+          title={t("tooltips.boldCtrlb", { defaultValue: "Bold (Ctrl+B)" })}
         >
           <Bold size={12} />
         </ToolbarButton>
@@ -223,7 +225,7 @@ const MenuBar = ({
           onClick={() => editor.chain().focus().toggleItalic().run()}
           disabled={!editor.can().chain().focus().toggleItalic().run()}
           isActive={editor.isActive("italic")}
-          title="Italic (Ctrl+I)"
+          title={t("tooltips.italicCtrli", { defaultValue: "Italic (Ctrl+I)" })}
         >
           <Italic size={12} />
         </ToolbarButton>
@@ -231,7 +233,7 @@ const MenuBar = ({
           onClick={() => editor.chain().focus().toggleUnderline().run()}
           disabled={!editor.can().chain().focus().toggleUnderline().run()}
           isActive={editor.isActive("underline")}
-          title="Underline (Ctrl+U)"
+          title={t("tooltips.underlineCtrlu", { defaultValue: "Underline (Ctrl+U)" })}
         >
           <UnderlineIcon size={12} />
         </ToolbarButton>
@@ -239,7 +241,7 @@ const MenuBar = ({
           onClick={() => editor.chain().focus().toggleStrike().run()}
           disabled={!editor.can().chain().focus().toggleStrike().run()}
           isActive={editor.isActive("strike")}
-          title="Strikethrough"
+          title={t("tooltips.strikethrough", { defaultValue: "Strikethrough" })}
         >
           <Strikethrough size={12} />
         </ToolbarButton>
@@ -247,14 +249,14 @@ const MenuBar = ({
           onClick={() => editor.chain().focus().toggleCode().run()}
           disabled={!editor.can().chain().focus().toggleCode().run()}
           isActive={editor.isActive("code")}
-          title="Inline Code"
+          title={t("tooltips.inlineCode", { defaultValue: "Inline Code" })}
         >
           <Code size={12} />
         </ToolbarButton>
         <ToolbarButton
           onClick={() => editor.chain().focus().toggleHighlight().run()}
           isActive={editor.isActive("highlight")}
-          title="Highlight Text"
+          title={t("tooltips.highlightText", { defaultValue: "Highlight Text" })}
         >
           <Highlighter size={12} />
         </ToolbarButton>
@@ -263,7 +265,7 @@ const MenuBar = ({
         <div className="relative flex items-center justify-center">
           <ToolbarButton
             onClick={() => toggleDropdown("color")}
-            title="Text Color"
+            title={t("tooltips.textColor", { defaultValue: "Text Color" })}
             isActive={activeDropdown === "color" || editor.isActive("textStyle")}
           >
             <Palette size={12} />
@@ -298,7 +300,7 @@ const MenuBar = ({
         <DropdownTrigger
           onClick={() => toggleDropdown("heading")}
           isActive={activeDropdown === "heading"}
-          title="Heading hierarchy"
+          title={t("tooltips.headingHierarchy", { defaultValue: "Heading hierarchy" })}
         >
           <span className="font-medium text-[11px] leading-none min-w-[70px] text-left">
             {getHeadingLabel()}
@@ -340,7 +342,7 @@ const MenuBar = ({
         <DropdownTrigger
           onClick={() => toggleDropdown("lists")}
           isActive={activeDropdown === "lists"}
-          title="List Types"
+          title={t("tooltips.listTypes", { defaultValue: "List Types" })}
         >
           {getListIcon()}
         </DropdownTrigger>
@@ -391,7 +393,7 @@ const MenuBar = ({
         <DropdownTrigger
           onClick={() => toggleDropdown("blocks")}
           isActive={activeDropdown === "blocks"}
-          title="Structural Blocks"
+          title={t("tooltips.structuralBlocks", { defaultValue: "Structural Blocks" })}
         >
           {getBlockIcon()}
         </DropdownTrigger>
@@ -441,7 +443,7 @@ const MenuBar = ({
         <DropdownTrigger
           onClick={() => toggleDropdown("align")}
           isActive={activeDropdown === "align"}
-          title="Alignment"
+          title={t("tooltips.alignment", { defaultValue: "Alignment" })}
         >
           {getAlignIcon()}
         </DropdownTrigger>
@@ -492,11 +494,11 @@ const MenuBar = ({
         <ToolbarButton
           onClick={setLink}
           isActive={editor.isActive("link")}
-          title="Link"
+          title={t("tooltips.link", { defaultValue: "Link" })}
         >
           <LinkIcon size={12} />
         </ToolbarButton>
-        <ToolbarButton onClick={addImage} title="Add Image">
+        <ToolbarButton onClick={addImage} title={t("tooltips.addImage", { defaultValue: "Add Image" })}>
           <ImageIcon size={12} />
         </ToolbarButton>
       </div>
@@ -560,6 +562,7 @@ function RichTextEditor({
   error,
   disabled,
 }: RichTextFieldProps) {
+    const { t } = useTranslation();
   const [isExpanded, setIsExpanded] = useState(false);
   const [panelWidth, setPanelWidth] = useState(0);
   const [isMediaPickerOpen, setIsMediaPickerOpen] = useState(false);
@@ -772,7 +775,7 @@ function RichTextEditor({
         <SlidePanel
           open={isMediaPickerOpen}
           onClose={() => setIsMediaPickerOpen(false)}
-          title="Select Image"
+          title={t("tooltips.selectImage", { defaultValue: "Select Image" })}
           width="xl"
         >
     <MediaGallery

package/src/components/fields/SecretField.tsx

@@ -1,6 +1,4 @@
-import { useState } from "react";
 import type { SecretField as SecretFieldType } from "@kyro-cms/core/client";
-import { IconCopy, IconCheck, IconRefreshCw } from "../ui/icons";
 import FieldLayout from "./FieldLayout";
 
 interface SecretFieldComponentProps {
@@ -18,84 +16,26 @@ export default function SecretField({
   error,
   disabled,
 }: SecretFieldComponentProps) {
-  const [copied, setCopied] = useState(false);
-  const [regenerating, setRegenerating] = useState(false);
 
   const fullValue = value ?? "";
   const displayValue = fullValue.length > 8
     ? fullValue.slice(0, -8) + "*".repeat(8)
     : fullValue;
 
-  const handleCopy = async () => {
-    if (!fullValue) return;
-    try {
-      await navigator.clipboard.writeText(fullValue);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1800);
-    } catch {
-      const ta = document.createElement("textarea");
-      ta.value = fullValue;
-      ta.style.position = "fixed";
-      ta.style.opacity = "0";
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand("copy");
-      document.body.removeChild(ta);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1800);
-    }
-  };
 
-  const handleRegenerate = () => {
-    if (regenerating || disabled) return;
-    setRegenerating(true);
-    const bytes = new Uint8Array(32);
-    crypto.getRandomValues(bytes);
-    const hex = Array.from(bytes)
-      .map((b) => b.toString(16).padStart(2, "0"))
-      .join("");
-    onChange?.(hex);
-    setTimeout(() => setRegenerating(false), 400);
-  };
 
   return (
     <FieldLayout field={field} error={error}>
-      <div className="flex items-center gap-1.5">
-        <div className="relative flex-1">
-          <input
-            id={field.name}
-            type="text"
-            value={displayValue}
-            readOnly
-            disabled={disabled}
-            className="kyro-form-input font-mono text-xs tracking-wider pr-10 opacity-70 bg-[var(--kyro-bg-secondary)] cursor-not-allowed select-none"
-            spellCheck={false}
-          />
-        </div>
-        <button
-          type="button"
-          onClick={handleCopy}
-          disabled={!fullValue || disabled}
-          className="p-2 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-alpha)] transition-all disabled:opacity-40 disabled:cursor-not-allowed active:scale-95"
-          title={copied ? "Copied!" : "Copy full secret"}
-        >
-          {copied ? (
-            <IconCheck className="w-3.5 h-3.5 text-[var(--kyro-success)]" />
-          ) : (
-            <IconCopy className="w-3.5 h-3.5" />
-          )}
-        </button>
-        <button
-          type="button"
-          onClick={handleRegenerate}
+      <div className="relative">
+        <input
+          id={field.name}
+          type="text"
+          value={displayValue}
+          readOnly
           disabled={disabled}
-          className="p-2 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:border-[var(--kyro-warning)] hover:bg-[var(--kyro-warning)]/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed active:scale-95"
-          title="Regenerate secret"
-        >
-          <IconRefreshCw
-            className={`w-3.5 h-3.5 ${regenerating ? "animate-spin" : ""}`}
-          />
-        </button>
+          className="kyro-form-input font-mono text-xs tracking-wider opacity-70 bg-[var(--kyro-bg-secondary)] cursor-not-allowed select-none"
+          spellCheck={false}
+        />
       </div>
     </FieldLayout>
   );

package/src/components/fields/SelectField.tsx

@@ -40,7 +40,7 @@ export default function SelectField({
   const siblingDataStr = JSON.stringify(siblingData || {});
 
   useEffect(() => {
-    if (field.options !== "__KYRO_DYNAMIC_OPTIONS__") return;
+    if ((field.options as any) !== "__KYRO_DYNAMIC_OPTIONS__") return;
     
     const fetchOptions = async () => {
       try {
@@ -80,11 +80,11 @@ export default function SelectField({
   // Resolve dynamic options at runtime if configured
   let options: Array<{ label: string; value: string }> = dynamicOptions || [];
   
-  if (field.options !== "__KYRO_DYNAMIC_OPTIONS__") {
+  if ((field.options as any) !== "__KYRO_DYNAMIC_OPTIONS__") {
     if (typeof field.options === "function") {
-      options = field.options({ data: formData || {}, siblingData: siblingData || {} });
+      options = (field.options as any)({ data: formData || {}, siblingData: siblingData || {} });
     } else if (Array.isArray(field.options)) {
-      options = field.options;
+      options = field.options as any;
     }
   }
 
@@ -120,13 +120,18 @@ export default function SelectField({
         multiple={field.hasMany}
         disabled={disabled || isReadOnly}
         required={field.required}
+        style={{
+          color: field.hasMany 
+            ? undefined 
+            : (options as any[]).find(opt => opt.value === value)?.color || undefined,
+        }}
         className={`kyro-form-input ${
           disabled || isReadOnly ? "opacity-50 cursor-not-allowed" : ""
         }`}
       >
         {!field.required && !field.hasMany && <option value="">Select...</option>}
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
+        {options.map((option: any) => (
+          <option key={option.value} value={option.value} style={{ color: option.color || undefined, fontWeight: option.color ? "bold" : "normal" }}>
             {option.label}
           </option>
         ))}

package/src/components/fields/TabsLayout.tsx

@@ -1,7 +1,6 @@
-import React, { useState, useCallback } from "react";
+import React, { useState } from "react";
 import type { Field } from "@kyro-cms/core/client";
 import { SeoPreview } from "../ui/SeoPreview";
-import { Copy, ClipboardPaste, Check } from "../ui/icons";
 
 interface TabsLayoutProps {
   field: Field;
@@ -30,34 +29,7 @@ export function TabsLayout({
     ? (formData[field.name] as Record<string, unknown>) || {}
     : formData;
 
-  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: tabData });
-      await navigator.clipboard.writeText(payload);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy", err);
-    }
-  }, [tabData]);
-
-  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) {
-        onTabDataChange({ ...tabData, ...parsed.value });
-      }
-    } catch (err) {
-      console.error("Failed to paste", err);
-    }
-  }, [tabData, onTabDataChange]);
+  // Removed copy/paste logic
 
   return (
     <div className="space-y-8">
@@ -78,24 +50,6 @@ export function TabsLayout({
             </button>
           ))}
         </div>
-        <div className="flex items-center gap-1 pr-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 Tab 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 Tab Data"
-          >
-            <ClipboardPaste className="w-4 h-4" />
-          </button>
-        </div>
       </div>
       <div className="space-y-6">
         {currentTab?.fields.map((f: Field) =>

package/src/components/fields/TextField.tsx

@@ -2,6 +2,7 @@ import type { TextField as TextFieldType } from "@kyro-cms/core/client";
 import FieldLayout from "./FieldLayout";
 import { useAutoFormStore } from "../../lib/autoform-store";
 import { slugifyText } from "../../lib/slugify";
+import { useTranslation } from "react-i18next";
 
 interface TextFieldComponentProps {
   field: TextFieldType;
@@ -18,6 +19,7 @@ export default function TextField({
   error,
   disabled,
 }: TextFieldComponentProps) {
+    const { t } = useTranslation();
   const isReadOnly =
     typeof field.admin?.readOnly === "function"
       ? false
@@ -42,10 +44,10 @@ export default function TextField({
     id: field.name,
     value: normalizedValue,
     onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => onChange?.(e.target.value),
-    placeholder: field.admin?.placeholder,
+    placeholder: field.admin?.placeholder as string | undefined,
     disabled: disabled || isReadOnly || (isSlug && isSlugLocked),
-    minLength: field.minLength,
-    maxLength: field.maxLength,
+    minLength: field.minLength as number | undefined,
+    maxLength: field.maxLength as number | undefined,
     required: field.required,
     className: `kyro-form-input ${isSlug ? "pr-24" : ""
       } ${disabled || isReadOnly || (isSlug && isSlugLocked) ? "opacity-70 bg-[var(--kyro-bg-secondary)] cursor-not-allowed" : ""}`,
@@ -55,9 +57,9 @@ export default function TextField({
     <FieldLayout field={field} error={error}>
       <div className="relative">
         {isTextarea ? (
-          <textarea {...commonProps} rows={(field as TextFieldType).rows || 4} />
+          <textarea {...commonProps} rows={(field as any).admin?.rows || 4} />
         ) : (
-          <input type={inputType} {...commonProps} pattern={field.pattern} />
+          <input type={inputType} {...commonProps} pattern={(field as any).pattern} />
         )}
 
         {isSlug && (
@@ -68,12 +70,12 @@ export default function TextField({
                 onClick={() =>
                   onChange?.(
                     slugifyText(
-                      formData[field.admin?.autoGenerate || "title"] || "",
+                      (formData[(field as any).admin?.autoGenerate || "title"] || "") as string,
                     ),
                   )
                 }
                 className="p-1 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)]"
-                title="Regenerate slug"
+                title={t("tooltips.regenerateSlug", { defaultValue: "Regenerate slug" })}
               >
                 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                   <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />

package/src/components/fields/UploadField.tsx

@@ -3,6 +3,7 @@ import { createPortal } from "react-dom";
 import { Image as ImageIcon, Film, FileText, Music, File, X, Loader2, Check } from "../ui/icons";
 import { apiGet, withCacheBust, apiPost, apiUpload, resolveApi, resolveMedia } from "../../lib/api";
 import { toast } from "../../lib/stores";
+import { useTranslation } from "react-i18next";
 
 interface UploadFieldProps {
   field: any;
@@ -502,6 +503,7 @@ function MediaPickerContent({
   setIsPickerFullscreen: (v: boolean) => void;
   setShowPicker: (v: boolean) => void;
 }) {
+    const { t } = useTranslation();
   const isItemSelected = (id: string) => selectedItems.some(i => i.id === id);
 
   return (
@@ -514,7 +516,7 @@ function MediaPickerContent({
       <div className="p-2 border-b border-[var(--kyro-border)] flex flex-col gap-2">
         <input
           type="text"
-          placeholder="Search media..."
+          placeholder={t("fields.searchMedia", { defaultValue: "Search media..." })}
           value={pickerSearch}
           onChange={(e) => setPickerSearch(e.target.value)}
           className="w-full px-2 py-1.5 text-xs rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)]"

package/src/components/fields/VideoField.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { UploadField } from "./UploadField";
+import { useTranslation } from "react-i18next";
 
 interface VideoFieldProps {
   src?: string;
@@ -16,6 +17,7 @@ export const VideoField: React.FC<VideoFieldProps> = ({
   onUploadChange,
   compact = false,
 }) => {
+    const { t } = useTranslation();
   const isExternalUrl =
     src.includes("youtube.com") ||
     src.includes("vimeo.com") ||
@@ -29,14 +31,14 @@ export const VideoField: React.FC<VideoFieldProps> = ({
           value={src}
           onChange={(e) => onChange("src", e.target.value)}
           className="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 font-mono text-xs"
-          placeholder="MP4 URL, YouTube, or Vimeo link..."
+          placeholder={t("fields.mp4UrlYoutubeOr", { defaultValue: "MP4 URL, YouTube, or Vimeo link..." })}
         />
         <input
           type="text"
           value={title}
           onChange={(e) => onChange("title", e.target.value)}
           className="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"
-          placeholder="Video title (optional)..."
+          placeholder={t("fields.videoTitleOptional", { defaultValue: "Video title (optional)..." })}
         />
       </div>
     );
@@ -57,14 +59,14 @@ export const VideoField: React.FC<VideoFieldProps> = ({
         value={src}
         onChange={(e) => onChange("src", 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 font-mono text-xs"
-        placeholder="MP4 URL, YouTube, or Vimeo link..."
+        placeholder={t("fields.mp4UrlYoutubeOr", { defaultValue: "MP4 URL, YouTube, or Vimeo link..." })}
       />
       <input
         type="text"
         value={title}
         onChange={(e) => onChange("title", 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="Video title (optional)..."
+        placeholder={t("fields.videoTitleOptional", { defaultValue: "Video title (optional)..." })}
       />
     </div>
   );

package/src/components/ui/BlockDrawer.tsx

@@ -2,6 +2,7 @@ import React, { type ReactNode } from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { SlidePanel } from "./SlidePanel";
 import { ClipboardPaste } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 interface BlockDrawerProps {
   open: boolean;
@@ -18,6 +19,7 @@ export function BlockDrawer({
   onPasteBlock,
   children,
 }: BlockDrawerProps) {
+    const { t } = useTranslation();
   const [pasteError, setPasteError] = React.useState<string | null>(null);
 
   const handlePaste = async () => {
@@ -41,7 +43,7 @@ export function BlockDrawer({
   if (!open) return null;
 
   return (
-    <SlidePanel open={open} onClose={onClose} title="Insert Block" width="md">
+    <SlidePanel open={open} onClose={onClose} title={t("tooltips.insertBlock", { defaultValue: "Insert Block" })} width="md">
       <p className="text-sm text-[var(--kyro-text-muted)] mb-4">
         Drag blocks into the editor or click to insert
       </p>