@kyro-cms/admin 0.12.6 → 0.12.8

package/src/components/blocks/AccordionBlock.tsx

@@ -4,10 +4,14 @@ import {
   useBlockActions,
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "../ui/icons";
-import { AccordionField } from "../fields/AccordionField";
+import { AccordionField, type AccordionItem } from "../fields/AccordionField";
 import { useTranslation } from "react-i18next";
 
-export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
+interface AccordionBlockData {
+  items?: AccordionItem[];
+}
+
+export const AccordionBlock: React.FC<{ block: { id: string; data?: Record<string, unknown> }; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,10 +19,10 @@ export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: n
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
-  const data = blockData?.data ?? block.data ?? {};
+  const data = (blockData?.data ?? block.data ?? {}) as AccordionBlockData;
   const items = Array.isArray(data.items) ? data.items : [];
 
-  const handleChange = (items: Record<string, unknown>[]) => {
+  const handleChange = (items: AccordionItem[]) => {
     updateBlock(block.id, { data: { ...data, items } });
   };
 

package/src/components/blocks/ArrayBlock.tsx

@@ -6,8 +6,9 @@ import {
 import { ChevronRight, X } from "../ui/icons";
 import { ChildBlocksTree } from "./ChildBlocksTree";
 import { useTranslation } from "react-i18next";
+import type { BlockData } from "@kyro-cms/core/client";
 
-export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
+export const ArrayBlock: React.FC<{ block: { id: string; data?: Record<string, unknown>; children?: BlockData[] }; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,8 +16,8 @@ export const ArrayBlock: 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 children = blockData?.children ?? block.children ?? [];
+  const data = (blockData?.data ?? block.data ?? {}) as Record<string, unknown>;
+  const children = (blockData?.children ?? block.children ?? []) as BlockData[];
 
   return (
     <div className="block-array border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">

package/src/components/blocks/BlockEditModal.tsx

@@ -7,9 +7,10 @@ import { blockTheme } from "../fields/extensions/blockComponents";
 import { SlidePanel } from "../ui/SlidePanel";
 import { ChildBlocksTree } from "./ChildBlocksTree";
 import { FieldRenderer } from "../FieldRenderer";
+import type { BlockData } from "@kyro-cms/core/client";
 
 interface BlockEditModalProps {
-  block: Record<string, unknown>;
+  block: Record<string, any>;
   blockSchema?: Record<string, any>;
   onClose: () => void;
 }
@@ -28,7 +29,7 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
     updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 
-  const handleUpdateChildren = (newChildren: Record<string, unknown>[]) => {
+  const handleUpdateChildren = (newChildren: BlockData[]) => {
     updateBlock(block.id, { children: newChildren });
   };
 
@@ -95,7 +96,7 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
     );
   };
 
-  const theme = blockTheme[block.type as string] || blockTheme.default;
+  const theme = blockTheme[block.type] || blockTheme.default;
 
   return (
     <SlidePanel

package/src/components/blocks/CardBlock.tsx

@@ -6,14 +6,22 @@ import {
 import { CardField } from "../fields/CardField";
 import { BlockWrapper } from "./BlockWrapper";
 
-export const CardBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
+interface CardBlockData {
+  title?: string;
+  description?: string;
+  icon?: string;
+  link?: string;
+  linkText?: string;
+}
+
+export const CardBlock: 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 CardBlockData;
 
   const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });

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;
 }