@kyro-cms/admin 0.12.5 → 0.12.7

package/src/components/blocks/ChildBlocksTree.tsx

@@ -12,11 +12,12 @@ import { BlockEditModal } from "./BlockEditModal";
 import { useStore } from "zustand";
 import { BlocksContext } from "../fields/extensions/blocksStore";
 import { useContext } from "react";
+import type { BlockData } from "@kyro-cms/core/client";
 
 interface ChildBlocksTreeProps {
   blockId: string;
-  children: Record<string, unknown>[];
-  onUpdateChildren: (children: Record<string, unknown>[]) => void;
+  children: BlockData[];
+  onUpdateChildren: (children: BlockData[]) => void;
   depth?: number;
   maxDepth?: number;
 }
@@ -61,12 +62,12 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
       }
       return child;
     });
-    onUpdateChildren(updated);
+    onUpdateChildren(updated as BlockData[]);
   };
 
   const handleUpdateChildChildren = (
     childId: string,
-    newGrandchildren: Record<string, unknown>[],
+    newGrandchildren: BlockData[],
   ) => {
     const updated = children.map((child) => {
       if (child.id === childId) {
@@ -89,7 +90,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
     });
   };
 
-  const renderBlock = (child: Record<string, unknown>) => {
+  const renderBlock = (child: BlockData) => {
     const hasChildren = child.children && child.children.length > 0;
     const isExpanded = expandedIds.has(child.id);
     const BlockComponent = getBlockComponent(child.type);
@@ -139,8 +140,8 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
           <div className="flex-1 min-w-0">
             <div className="text-xs font-medium text-[var(--kyro-text-secondary)] truncate">
               {getBlockDisplayLabel(child)}
-              {child.data?.text ? ` - ${child.data.text.slice(0, 30)}` : ""}
-              {child.data?.heading ? ` - ${child.data.heading.slice(0, 30)}` : ""}
+              {typeof child.data?.text === 'string' ? ` - ${child.data.text.slice(0, 30)}` : ""}
+              {typeof child.data?.heading === 'string' ? ` - ${child.data.heading.slice(0, 30)}` : ""}
             </div>
             {blockSchema?.admin?.description && (
               <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5 truncate opacity-80">
@@ -151,7 +152,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
 
           {hasChildren && (
             <span className="text-[10px] bg-[var(--kyro-surface-accent)] px-2 py-0.5 rounded text-[var(--kyro-text-muted)] font-medium">
-              {child.children.length} nested
+              {child.children?.length} nested
             </span>
           )}
 
@@ -203,7 +204,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
           <div className="mt-1">
             <NestedChildBlocks
               parentId={child.id}
-              children={child.children}
+              children={child.children ?? []}
               onUpdateChildren={(newGrandchildren) =>
                 handleUpdateChildChildren(child.id, newGrandchildren)
               }
@@ -297,8 +298,8 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
 
 interface NestedChildBlocksProps {
   parentId: string;
-  children: Record<string, unknown>[];
-  onUpdateChildren: (children: Record<string, unknown>[]) => void;
+  children: BlockData[];
+  onUpdateChildren: (children: BlockData[]) => void;
   depth: number;
   maxDepth: number;
 }
@@ -341,12 +342,12 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
       }
       return child;
     });
-    onUpdateChildren(updated);
+    onUpdateChildren(updated as BlockData[]);
   };
 
   const handleUpdateChildChildren = (
     childId: string,
-    newGrandchildren: Record<string, unknown>[],
+    newGrandchildren: BlockData[],
   ) => {
     const updated = children.map((child) => {
       if (child.id === childId) {
@@ -369,7 +370,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
     });
   };
 
-  const renderBlock = (child: Record<string, unknown>) => {
+  const renderBlock = (child: BlockData) => {
     const hasChildren = child.children && child.children.length > 0;
     const isExpanded = expandedIds.has(child.id);
     const BlockComponent = getBlockComponent(child.type);
@@ -419,8 +420,8 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
           <div className="flex-1 min-w-0">
             <div className="text-xs font-medium text-[var(--kyro-text-secondary)] truncate">
               {getBlockDisplayLabel(child)}
-              {child.data?.text ? ` - ${child.data.text.slice(0, 30)}` : ""}
-              {child.data?.heading ? ` - ${child.data.heading.slice(0, 30)}` : ""}
+              {typeof child.data?.text === 'string' ? ` - ${child.data.text.slice(0, 30)}` : ""}
+              {typeof child.data?.heading === 'string' ? ` - ${child.data.heading.slice(0, 30)}` : ""}
             </div>
             {blockSchema?.admin?.description && (
               <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5 truncate opacity-80">
@@ -431,7 +432,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
 
           {hasChildren && (
             <span className="text-[10px] bg-[var(--kyro-surface-accent)] px-2 py-0.5 rounded text-[var(--kyro-text-muted)] font-medium">
-              {child.children.length} nested
+              {child.children?.length} nested
             </span>
           )}
 
@@ -483,7 +484,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
           <div className="mt-1">
             <NestedChildBlocks
               parentId={child.id}
-              children={child.children}
+              children={child.children ?? []}
               onUpdateChildren={(newGrandchildren) =>
                 handleUpdateChildChildren(child.id, newGrandchildren)
               }

package/src/components/blocks/CodeBlock.tsx

@@ -7,14 +7,19 @@ 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 }> = ({
+interface CodeBlockData {
+  language?: string;
+  code?: string;
+}
+
+export const CodeBlock: React.FC<{ block: { id: string; data?: 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 ?? {};
+  const data = (blockData?.data ?? block.data ?? {}) as CodeBlockData;
 
   const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });

package/src/components/blocks/FileBlock.tsx

@@ -7,7 +7,11 @@ 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 }> = ({
+interface FileBlockData {
+  file?: string | null;
+}
+
+export const FileBlock: React.FC<{ block: { id: string; data?: Record<string, unknown> }; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,7 +19,7 @@ export const FileBlock: React.FC<{ block: Record<string, unknown>; index: number
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
-  const data = blockData?.data ?? block.data ?? {};
+  const data = (blockData?.data ?? block.data ?? {}) as FileBlockData;
 
   const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });

package/src/components/blocks/GenericBlock.tsx

@@ -4,7 +4,7 @@ import { FieldRenderer } from "../FieldRenderer";
 import { useBlockById, useBlockActions } from "../fields/extensions/blocksStore";
 
 interface GenericBlockProps {
-  block: Record<string, unknown>;
+  block: { id: string; data?: Record<string, unknown>; type?: string };
   index: number;
   blockSchema: Record<string, any>;
 }

package/src/components/blocks/HeadingBlock.tsx

@@ -6,14 +6,18 @@ import {
 import { HeadingField } from "../fields/HeadingField";
 import { BlockWrapper } from "./BlockWrapper";
 
-export const HeadingBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
+interface HeadingBlockData {
+  text?: string;
+}
+
+export const HeadingBlock: React.FC<{ block: { id: string; data?: Record<string, unknown> }; index: number }> = ({
   block,
   index,
 }) => {
   const blockData = useBlockById(block.id);
   const { updateBlock } = useBlockActions();
 
-  const data = blockData?.data || block.data || {};
+  const data = (blockData?.data ?? block.data ?? {}) as HeadingBlockData;
 
   const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });

package/src/components/blocks/HeadingSubheadingBlock.tsx

@@ -6,14 +6,19 @@ import {
 import { HeadingSubheadingField } from "../fields/HeadingSubheadingField";
 import { BlockWrapper } from "./BlockWrapper";
 
-export const HeadingSubheadingBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
+interface HeadingSubheadingBlockData {
+  title?: string;
+  subtitle?: string;
+}
+
+export const HeadingSubheadingBlock: React.FC<{ block: { id: string; data?: Record<string, unknown> }; index: number }> = ({
   block,
   index,
 }) => {
   const blockData = useBlockById(block.id);
   const { updateBlock } = useBlockActions();
 
-  const data = blockData?.data || block.data || {};
+  const data = (blockData?.data ?? block.data ?? {}) as HeadingSubheadingBlockData;
 
   const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });

package/src/components/blocks/HeroBlock.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import type { BlockData } from "@kyro-cms/core/client";
 import {
   useBlockById,
   useBlockActions,
@@ -9,7 +10,15 @@ 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 }> = ({
+interface HeroBlockData {
+  title?: string;
+  subtitle?: string;
+  ctaText?: string;
+  ctaUrl?: string;
+  bgImage?: string | null;
+}
+
+export const HeroBlock: React.FC<{ block: { id: string; data?: Record<string, unknown>; children?: BlockData[] }; index: number }> = ({
   block,
   index,
 }) => {
@@ -17,8 +26,8 @@ export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
-  const data = blockData?.data ?? block.data ?? {};
-  const children = blockData?.children ?? block.children ?? [];
+  const data = (blockData?.data ?? block.data ?? {}) as HeroBlockData;
+  const children = (blockData?.children ?? block.children ?? []) as BlockData[];
 
   const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });

package/src/components/blocks/ImageBlock.tsx

@@ -7,14 +7,20 @@ 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 }> = ({
+interface ImageBlockData {
+  src?: string | null;
+  alt?: string;
+  caption?: string;
+}
+
+export const ImageBlock: React.FC<{ block: { id: string; data?: 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 || {};
+  const data = (blockData?.data ?? block.data ?? {}) as ImageBlockData;
 
   const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });

package/src/components/blocks/ListBlock.tsx

@@ -7,7 +7,11 @@ 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 }> = ({
+interface ListBlockData {
+  items?: string[];
+}
+
+export const ListBlock: React.FC<{ block: { id: string; data?: Record<string, unknown> }; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,7 +19,7 @@ export const ListBlock: React.FC<{ block: Record<string, unknown>; index: number
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
-  const data = blockData?.data || block.data || {};
+  const data = (blockData?.data ?? block.data ?? {}) as ListBlockData;
   const listItems = Array.isArray(data.items) ? data.items : [];
 
   const handleChange = (items: string[]) => {

package/src/components/blocks/ParagraphBlock.tsx

@@ -6,7 +6,7 @@ import {
 import { BlockWrapper } from "./BlockWrapper";
 import { useTranslation } from "react-i18next";
 
-export const ParagraphBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
+export const ParagraphBlock: React.FC<{ block: { id: string; data?: Record<string, unknown> }; index: number }> = ({
   block,
   index,
 }) => {
@@ -14,7 +14,7 @@ export const ParagraphBlock: React.FC<{ block: Record<string, unknown>; index: n
   const blockData = useBlockById(block.id);
   const { updateBlock } = useBlockActions();
 
-  const data = blockData?.data || block.data || {};
+  const data = (blockData?.data || block.data || {}) as { text?: string };
 
   const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });

package/src/components/blocks/RelationshipBlock.tsx

@@ -7,7 +7,15 @@ 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 }> = ({
+interface RelationshipBlockData {
+  relationTo?: string;
+  hasMany?: boolean;
+  selectedIds?: string[];
+  selectedId?: string;
+  labelField?: string;
+}
+
+export const RelationshipBlock: React.FC<{ block: { id: string; data?: Record<string, unknown> }; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,7 +23,7 @@ export const RelationshipBlock: React.FC<{ block: Record<string, unknown>; index
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
-  const data = blockData?.data ?? block.data ?? {};
+  const data = (blockData?.data ?? block.data ?? {}) as RelationshipBlockData;
 
   const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });

package/src/components/blocks/VideoBlock.tsx

@@ -7,7 +7,12 @@ 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 }> = ({
+interface VideoBlockData {
+  src?: string;
+  title?: string;
+}
+
+export const VideoBlock: React.FC<{ block: { id: string; data?: Record<string, unknown> }; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,7 +20,7 @@ export const VideoBlock: React.FC<{ block: Record<string, unknown>; index: numbe
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
-  const data = blockData?.data ?? block.data ?? {};
+  const data = (blockData?.data ?? block.data ?? {}) as VideoBlockData;
 
   const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });

package/src/components/fields/AccordionField.tsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback } from "react";
 import { ChevronDown, ChevronUp, Plus, X } from "../ui/icons";
 import { useTranslation } from "react-i18next";
 
-interface AccordionItem {
+export interface AccordionItem {
   title: string;
   content: string;
 }

package/src/components/fields/ArrayLayout.tsx

@@ -27,7 +27,7 @@ interface ArrayLayoutProps {
   renderField: (
     field: Field,
     parentData: Record<string, unknown>,
-    onChange: (value: unknown) => void,
+    onChange: (value: Record<string, unknown>) => void,
   ) => React.ReactNode;
   disabled?: boolean;
 }
@@ -46,12 +46,16 @@ interface SortableArrayItemProps {
   setOpenIndex: (index: number | null) => void;
   item: Record<string, unknown>;
   field: Field;
-  renderField: any;
-  onChangeItem: (newItem: any) => void;
+  renderField: (
+    field: Field,
+    parentData: Record<string, unknown>,
+    onChange: (value: Record<string, unknown>) => void,
+  ) => React.ReactNode;
+  onChangeItem: (newItem: Record<string, unknown>) => void;
   onRemove: () => void;
   disabled?: boolean;
   compact: boolean;
-  getItemLabel: (item: any) => string;
+  getItemLabel: (item: Record<string, unknown>) => string;
 }
 
 function SortableArrayItem({
@@ -68,31 +72,28 @@ function SortableArrayItem({
   compact,
   getItemLabel,
 }: SortableArrayItemProps) {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
   const {
     attributes,
     listeners,
     setNodeRef,
     transform,
     transition,
-    isDragging,
   } = useSortable({ id });
 
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
-    zIndex: isDragging ? 10 : 1,
-    opacity: isDragging ? 0.8 : 1,
   };
 
+  const fields = (field as Field & { fields?: Field[] }).fields || [];
+
   if (compact) {
     return (
       <div
         ref={setNodeRef}
         style={style}
-        className={`flex items-start gap-2 px-3 py-1.5 border-b border-[var(--kyro-border)] last:border-b-0 hover:bg-[var(--kyro-sidebar-active)]/5 transition-colors ${
-          isDragging ? "bg-[var(--kyro-surface-accent)]/50" : ""
-        }`}
+        className="flex items-start gap-2 px-3 py-1.5 border-b border-[var(--kyro-border)] last:border-b-0"
       >
         <div
           {...attributes}
@@ -104,8 +105,8 @@ function SortableArrayItem({
         <span className="text-[10px] font-bold text-[var(--kyro-text-muted)] pt-2.5 min-w-[18px] text-center">
           {index + 1}
         </span>
-        <div className={`flex-1 min-w-0 ${((field as any).fields || []).length >= 3 ? "flex flex-col gap-1.5" : "flex items-start gap-1.5"}`}>
-          {((field as any).fields || []).map((f: Field) => (
+        <div className={`flex-1 min-w-0 ${fields.length >= 3 ? "flex flex-col gap-1.5" : "flex items-start gap-1.5"}`}>
+          {fields.map((f: Field) => (
             <div key={f.name} className="flex-1 min-w-0">
               {renderField(f, item, onChangeItem)}
             </div>
@@ -130,50 +131,44 @@ function SortableArrayItem({
     <div
       ref={setNodeRef}
       style={style}
-      className={`border border-[var(--kyro-border)] rounded-lg overflow-hidden group bg-[var(--kyro-surface)] ${
-        isDragging ? "border-[var(--kyro-primary)] shadow-md" : ""
-      }`}
+      className={`border border-[var(--kyro-border)] rounded-[var(--kyro-radius-md)] bg-[var(--kyro-surface-accent)]/10 overflow-hidden`}
     >
-      <div className="w-full flex items-center justify-between p-3 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-sidebar-active)]/10 transition-colors">
-        <div className="flex items-center gap-2 flex-1 min-w-0">
-          <div
-            {...attributes}
-            {...listeners}
-            className="p-1 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] hover:bg-[var(--kyro-border)] rounded flex-shrink-0"
-          >
-            <GripVertical className="w-4 h-4" />
-          </div>
-          <span
-            role="button"
-            tabIndex={0}
-            onClick={() => setOpenIndex(isOpen ? null : index)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                setOpenIndex(isOpen ? null : index);
-              }
-            }}
-            className="text-xs font-bold tracking-widest text-[var(--kyro-text-muted)] truncate cursor-pointer flex-1 py-1 text-left"
-          >
-            {getItemLabel(item) || `Item ${index + 1}`}
+      <div className="flex items-center gap-2 px-4 py-3 bg-[var(--kyro-surface-accent)]/20 border-b border-[var(--kyro-border)]">
+        <div
+          {...attributes}
+          {...listeners}
+          className="p-1 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] hover:bg-[var(--kyro-surface-accent)] rounded flex-shrink-0"
+        >
+          <GripVertical className="w-3.5 h-3.5" />
+        </div>
+        
+        <span className="text-xs font-bold text-[var(--kyro-text-muted)] min-w-[18px]">
+          {index + 1}
+        </span>
+        
+        <div className="flex-1 min-w-0">
+          <span className="text-xs font-medium text-[var(--kyro-text-primary)] truncate block">
+            {getItemLabel(item) || `${field.label || field.name} Item`}
           </span>
         </div>
-        <div className="flex items-center gap-1">
+
+        <div className="flex items-center gap-1 flex-shrink-0">
           <button
             type="button"
             disabled={disabled}
-            onClick={(e) => {
-              e.stopPropagation();
-              onRemove();
-            }}
-            className="text-[11px] font-bold text-[var(--kyro-error)] opacity-0 group-hover:opacity-100 transition-opacity disabled:opacity-30 hover:bg-[var(--kyro-danger-bg)] rounded px-1.5 py-0.5"
+            onClick={onRemove}
+            className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-error)] transition-colors disabled:opacity-30 p-1 rounded hover:bg-[var(--kyro-surface-accent)]"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
-            Remove
+            <svg width="14" height="14" 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" />
+            </svg>
           </button>
+          
           <button
             type="button"
             onClick={() => setOpenIndex(isOpen ? null : index)}
-            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            className="p-1 rounded hover:bg-[var(--kyro-surface-accent)] transition-colors"
           >
             {isOpen ? (
               <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
@@ -185,7 +180,7 @@ function SortableArrayItem({
       </div>
       {isOpen && (
         <div className="p-4 bg-[var(--kyro-surface)] space-y-4">
-          {((field as any).fields || []).map((f: Field) =>
+          {fields.map((f: Field) =>
             renderField(f, item, onChangeItem),
           )}
         </div>
@@ -201,7 +196,7 @@ export function ArrayLayout({
   renderField,
   disabled,
 }: ArrayLayoutProps) {
-  const items = Array.isArray(value) ? value : [];
+  const items = (Array.isArray(value) ? value : []) as Record<string, unknown>[];
   const fields = (field as Field & { fields?: { name?: string; type?: string; relationTo?: string; label?: string }[] }).fields || [];
   const firstField = fields[0];
   const labelField = firstField?.name || "user";
@@ -212,14 +207,14 @@ export function ArrayLayout({
   React.useEffect(() => {
     let needsUpdate = false;
     const updated = items
-      .filter((item: any) => {
+      .filter((item) => {
         if (typeof item !== "object" || item === null) {
           needsUpdate = true;
           return false;
         }
         return true;
       })
-      .map((item: any) => {
+      .map((item) => {
         if (!item.id && !item._key) {
           needsUpdate = true;
           return {
@@ -239,13 +234,14 @@ export function ArrayLayout({
       const val = item[key];
       if (val && typeof val === "string") return val;
     }
-    for (const f of fields) {
+    const fieldsTyped = fields as Field[];
+    for (const f of fieldsTyped) {
       if (f.type === "text" || f.type === "textarea") {
         const val = item[f.name!];
         if (val && typeof val === "string") return val;
       }
-      if (f.type === "group" && (f as any).fields) {
-        for (const inner of (f as any).fields) {
+      if (f.type === "group" && (f as Field & { fields?: Field[] }).fields) {
+        for (const inner of (f as Field & { fields?: Field[] }).fields || []) {
           if (inner.type === "text" || inner.type === "textarea") {
             const group = item[f.name!] as Record<string, unknown> | undefined;
             const val = group?.[inner.name!];
@@ -272,8 +268,8 @@ export function ArrayLayout({
     const { active, over } = event;
     if (!over || active.id === over.id) return;
 
-    const oldIndex = items.findIndex((item: any) => (item.id || item._key) === active.id);
-    const newIndex = items.findIndex((item: any) => (item.id || item._key) === over.id);
+    const oldIndex = items.findIndex((item) => (item.id || item._key) === active.id);
+    const newIndex = items.findIndex((item) => (item.id || item._key) === over.id);
 
     if (oldIndex !== -1 && newIndex !== -1) {
       const newItems = [...items];
@@ -284,7 +280,7 @@ export function ArrayLayout({
   };
 
   const itemIds = React.useMemo(() => {
-    return items.map((item: any) => item?.id || item?._key || "");
+    return items.map((item) => (item?.id || item?._key || "") as string);
   }, [items]);
 
   if (isRelationship) {
@@ -296,11 +292,12 @@ export function ArrayLayout({
             name: labelField,
             relationTo: (field as Field & { fields?: { relationTo?: string }[] }).fields?.[0]?.relationTo || "",
             hasMany: true,
-            label: (field as Field & { fields?: { label?: string }[] }).fields?.[0]?.label,
+            // Omit the inner field's label to avoid duplicate labels in the UI
+            label: undefined,
           }}
           value={(items as Record<string, unknown>[]).map((i) => i[labelField]).filter(Boolean)}
           onChange={(newValue) => {
-            const newItems = (newValue || []).map((id: string) => ({
+            const newItems = ((newValue as string[]) || []).map((id: string) => ({
               [labelField]: id,
               id: Math.random().toString(36).substr(2, 9),
             }));

package/src/components/fields/BlocksField.tsx

@@ -75,7 +75,7 @@ const SortableBlockComponent = ({
   onDuplicate,
   compact,
 }: {
-  block: Record<string, unknown>;
+  block: Record<string, any>;
   index: number;
   blockSchema?: Record<string, any>;
   editingBlockId: string | null;

package/src/components/fields/ChildrenField.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { ChildBlocksTree } from "../blocks/ChildBlocksTree";
+import type { BlockData } from "@kyro-cms/core/client";
 
 interface ChildrenFieldProps {
   blockId: string;
-  children: Record<string, unknown>[];
-  onUpdateChildren: (newChildren: Record<string, unknown>[]) => void;
+  children: BlockData[];
+  onUpdateChildren: (newChildren: BlockData[]) => void;
   label?: string;
   compact?: boolean;
 }