@kyro-cms/admin 0.3.2 → 0.3.5

package/src/components/blocks/AccordionBlock.tsx

@@ -3,10 +3,10 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { ChevronRight, X } from "../ui/icons";
 import { AccordionField } from "../fields/AccordionField";
 
-export const AccordionBlock: React.FC<{ block: any; index: number }> = ({
+export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
@@ -16,7 +16,7 @@ export const AccordionBlock: React.FC<{ block: any; index: number }> = ({
   const data = blockData?.data ?? block.data ?? {};
   const items = Array.isArray(data.items) ? data.items : [];
 
-  const handleChange = (items: any[]) => {
+  const handleChange = (items: Record<string, unknown>[]) => {
     updateBlock(block.id, { data: { ...data, items } });
   };
 
@@ -24,7 +24,7 @@ export const AccordionBlock: React.FC<{ block: any; index: number }> = ({
     <div className="block-accordion border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center gap-2">
-          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] ">
             Accordion
           </span>
           <span className="text-[10px] text-[var(--kyro-text-muted)]">

package/src/components/blocks/ArrayBlock.tsx

@@ -3,11 +3,11 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { ChevronRight, X } from "../ui/icons";
 import { ArrayField } from "../fields/ArrayField";
 import { ChildBlocksTree } from "./ChildBlocksTree";
 
-export const ArrayBlock: React.FC<{ block: any; index: number }> = ({
+export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
@@ -22,7 +22,7 @@ export const ArrayBlock: React.FC<{ block: any; index: number }> = ({
     <div className="block-array border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center gap-2">
-          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] ">
             Repeater
           </span>
           <span className="text-[10px] text-[var(--kyro-text-muted)]">

package/src/components/blocks/BlockEditModal.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ChevronRight } from "lucide-react";
+import { ChevronRight } from "../ui/icons";
 import {
   useBlockById,
   useBlockActions,
@@ -24,7 +24,7 @@ import {
 } from "../fields";
 
 interface BlockEditModalProps {
-  block: any;
+  block: Record<string, unknown>;
   onClose: () => void;
 }
 
@@ -40,17 +40,17 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
   const data = blockData?.data || block.data || {};
   const children = blockData?.children || block.children || [];
 
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 
-  const handleUpdateChildren = (newChildren: any[]) => {
+  const handleUpdateChildren = (newChildren: Record<string, unknown>[]) => {
     updateBlock(block.id, { children: newChildren });
   };
 
   const handleUpdateColumnChildren = (
     columnIndex: number,
-    newChildren: any[],
+    newChildren: Record<string, unknown>[],
   ) => {
     const columnData = data.columnData || [];
     const newColumnData = [...columnData];
@@ -90,7 +90,7 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
             <PortableTextField
               field={{ name: "richtext", label: "Content" }}
               value={data.content}
-              onChange={(value: any) => handleChange("content", value)}
+              onChange={(value: unknown) => handleChange("content", value)}
             />
           </div>
         );
@@ -184,14 +184,14 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
 
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <label className="text-[10px] font-bold uppercase tracking-widest text-[var(--kyro-text-muted)] mb-1.5 block">
+                <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] mb-1.5 block">
                   Language
                 </label>
                 <div className="relative">
                   <select
                     value={data.language || "javascript"}
                     onChange={(e) => handleChange("language", e.target.value)}
-                    className="w-full pl-3 pr-10 py-2.5 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl text-xs font-bold text-[var(--kyro-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)]/20 transition-all appearance-none cursor-pointer"
+                    className="w-full pl-3 pr-10 py-2.5 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl text-xs font-medium text-[var(--kyro-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)]/20 transition-all appearance-none cursor-pointer"
                   >
                     <option value="plaintext">Plain Text</option>
                     <option value="javascript">JS</option>

package/src/components/blocks/BlockWrapper.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { ChevronRight, X } from "../ui/icons";
+import { useBlockActions } from "../fields/extensions/blocksStore";
+
+interface BlockWrapperProps {
+  id: string;
+  type: string;
+  label?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const BlockWrapper: React.FC<BlockWrapperProps> = ({
+  id,
+  type,
+  label,
+  children,
+  className = "",
+}) => {
+  const { moveBlock, removeBlock } = useBlockActions();
+
+  return (
+    <div className={`block-${type} border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group bg-[var(--kyro-surface)] transition-all hover:border-[var(--kyro-primary)]/30 ${className}`}>
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-[10px] font-bold text-[var(--kyro-text-muted)]  tracking-wider">
+          {label || type}
+        </span>
+        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            type="button"
+            onClick={() => moveBlock(id, "up")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)]"
+            title="Move up"
+          >
+            <ChevronRight className="w-3 h-3 rotate-90" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveBlock(id, "down")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)]"
+            title="Move down"
+          >
+            <ChevronRight className="w-3 h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(id)}
+            className="p-1 hover:bg-[var(--kyro-error)]/10 rounded text-[var(--kyro-error)]"
+            title="Remove"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+
+      <div className="block-content">
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/ButtonBlock.tsx

@@ -3,10 +3,10 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { ChevronRight, X } from "../ui/icons";
 import { ButtonField } from "../fields/ButtonField";
 
-export const ButtonBlock: React.FC<{ block: any; index: number }> = ({
+export const ButtonBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,14 +15,14 @@ export const ButtonBlock: React.FC<{ block: any; index: number }> = ({
 
   const data = blockData?.data ?? block.data ?? {};
 
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 
   return (
     <div className="block-button border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
       <div className="flex items-center justify-between mb-2">
-        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] ">
           Button
         </span>
         <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">

package/src/components/blocks/ChildBlocksTree.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Plus, X, ChevronRight, ChevronDown } from "lucide-react";
+import { Plus, X, ChevronRight, ChevronDown } from "../ui/icons";
 import {
   blockCategories,
   blockIcons,
@@ -12,8 +12,8 @@ import { BlockEditModal } from "./BlockEditModal";
 
 interface ChildBlocksTreeProps {
   blockId: string;
-  children: any[];
-  onUpdateChildren: (children: any[]) => void;
+  children: Record<string, unknown>[];
+  onUpdateChildren: (children: Record<string, unknown>[]) => void;
   depth?: number;
   maxDepth?: number;
 }
@@ -47,7 +47,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
     onUpdateChildren(filtered);
   };
 
-  const handleUpdateChildData = (childId: string, newData: any) => {
+  const handleUpdateChildData = (childId: string, newData: Record<string, unknown>) => {
     const updated = children.map((child) => {
       if (child.id === childId) {
         return { ...child, data: newData };
@@ -59,7 +59,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
 
   const handleUpdateChildChildren = (
     childId: string,
-    newGrandchildren: any[],
+    newGrandchildren: Record<string, unknown>[],
   ) => {
     const updated = children.map((child) => {
       if (child.id === childId) {
@@ -82,7 +82,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
     });
   };
 
-  const renderBlock = (child: any) => {
+  const renderBlock = (child: Record<string, unknown>) => {
     const hasChildren = child.children && child.children.length > 0;
     const isExpanded = expandedIds.has(child.id);
     const BlockComponent = getBlockComponent(child.type);
@@ -92,11 +92,10 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
     return (
       <div key={child.id} className="relative group">
         <div
-          className={`flex items-center group/column gap-2 p-2 bg-[var(--kyro-bg-secondary)] rounded border transition-colors ${
-            isEditing
-              ? "bg-[var(--kyro-primary)]/10 border-[var(--kyro-primary)]"
-              : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
-          } ${canAddChildren ? "cursor-pointer" : ""}`}
+          className={`flex items-center group/column gap-2 p-2 bg-[var(--kyro-bg-secondary)] rounded border transition-colors ${isEditing
+            ? "bg-[var(--kyro-primary)]/10 border-[var(--kyro-primary)]"
+            : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
+            } ${canAddChildren ? "cursor-pointer" : ""}`}
           style={{ marginLeft: depth * indentWidth }}
           onClick={() => {
             if (canAddChildren) {
@@ -226,7 +225,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
           >
             {blockCategories.map((category) => (
               <div key={category.title} className="mb-4">
-                <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase tracking-wide mb-2">
+                <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)]  tracking-wide mb-2">
                   {category.title}
                 </h3>
                 <div className="grid grid-cols-3 gap-2">
@@ -244,7 +243,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
                         {blockIcons[block.icon]}
                       </div>
                       <div className="flex-1 min-w-0">
-                        <div className="text-xs font-medium uppercase tracking-tight text-[var(--kyro-text-primary)]">
+                        <div className="text-xs font-medium  tracking-tight text-[var(--kyro-text-primary)]">
                           {block.label}
                         </div>
                         <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5">
@@ -283,8 +282,8 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
 
 interface NestedChildBlocksProps {
   parentId: string;
-  children: any[];
-  onUpdateChildren: (children: any[]) => void;
+  children: Record<string, unknown>[];
+  onUpdateChildren: (children: Record<string, unknown>[]) => void;
   depth: number;
   maxDepth: number;
 }
@@ -316,7 +315,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
     onUpdateChildren(filtered);
   };
 
-  const handleUpdateChildData = (childId: string, newData: any) => {
+  const handleUpdateChildData = (childId: string, newData: Record<string, unknown>) => {
     const updated = children.map((child) => {
       if (child.id === childId) {
         return { ...child, data: newData };
@@ -328,7 +327,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
 
   const handleUpdateChildChildren = (
     childId: string,
-    newGrandchildren: any[],
+    newGrandchildren: Record<string, unknown>[],
   ) => {
     const updated = children.map((child) => {
       if (child.id === childId) {
@@ -351,7 +350,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
     });
   };
 
-  const renderBlock = (child: any) => {
+  const renderBlock = (child: Record<string, unknown>) => {
     const hasChildren = child.children && child.children.length > 0;
     const isExpanded = expandedIds.has(child.id);
     const BlockComponent = getBlockComponent(child.type);
@@ -361,11 +360,10 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
     return (
       <div key={child.id} className="relative group">
         <div
-          className={`flex items-center gap-2 p-2 bg-[var(--kyro-bg-secondary)] rounded border transition-colors ${
-            isEditing
-              ? "bg-[var(--kyro-primary)]/10 border-[var(--kyro-primary)]"
-              : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
-          } ${canAddChildren ? "cursor-pointer" : ""}`}
+          className={`flex items-center gap-2 p-2 bg-[var(--kyro-bg-secondary)] rounded border transition-colors ${isEditing
+            ? "bg-[var(--kyro-primary)]/10 border-[var(--kyro-primary)]"
+            : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
+            } ${canAddChildren ? "cursor-pointer" : ""}`}
           style={{ marginLeft: depth * indentWidth }}
           onClick={() => {
             if (canAddChildren) {
@@ -495,7 +493,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
           >
             {blockCategories.map((category) => (
               <div key={category.title} className="mb-4">
-                <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase tracking-wide mb-2">
+                <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)]  tracking-wide mb-2">
                   {category.title}
                 </h3>
                 <div className="grid grid-cols-3 gap-2">
@@ -513,7 +511,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
                         {blockIcons[block.icon]}
                       </div>
                       <div className="flex-1 min-w-0">
-                        <div className="text-xs font-medium uppercase tracking-tight text-[var(--kyro-text-primary)]">
+                        <div className="text-xs font-medium  tracking-tight text-[var(--kyro-text-primary)]">
                           {block.label}
                         </div>
                         <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5">

package/src/components/blocks/CodeBlock.tsx

@@ -3,10 +3,10 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X, Code2 } from "lucide-react";
+import { ChevronRight, X, Code2 } from "../ui/icons";
 import { CodeField } from "../fields/CodeField";
 
-export const CodeBlock: React.FC<{ block: any; index: number }> = ({
+export const CodeBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
@@ -14,7 +14,7 @@ export const CodeBlock: React.FC<{ block: any; index: number }> = ({
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
   const data = blockData?.data ?? block.data ?? {};
 
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 
@@ -27,15 +27,15 @@ export const CodeBlock: React.FC<{ block: any; index: number }> = ({
           </div>
           <div>
             <h4 className="text-sm font-bold tracking-tight text-[var(--kyro-text-primary)]">Code Snippet</h4>
-            <p className="text-[10px] font-medium text-[var(--kyro-text-muted)] uppercase tracking-widest">
+            <p className="text-[10px] font-medium text-[var(--kyro-text-muted)]  tracking-widest">
               Block Editor • {data.language || "javascript"}
             </p>
           </div>
         </div>
-        
+
         <div className="flex items-center gap-1.5 opacity-0 group-hover/block:opacity-100 transition-all translate-x-2 group-hover/block:translate-x-0">
           <div className="flex bg-[var(--kyro-surface-accent)]/50 p-1 rounded-xl border border-[var(--kyro-border)]">
-            <button 
+            <button
               type="button"
               onClick={() => moveBlock(block.id, "up")}
               className="p-1.5 hover:bg-[var(--kyro-surface)] rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)]"
@@ -44,7 +44,7 @@ export const CodeBlock: React.FC<{ block: any; index: number }> = ({
               <ChevronRight className="w-4 h-4 rotate-[-90deg]" />
             </button>
             <div className="w-px h-4 bg-[var(--kyro-border)] mx-1 self-center" />
-            <button 
+            <button
               type="button"
               onClick={() => removeBlock(block.id)}
               className="p-1.5 hover:bg-red-500/10 rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-red-500"
@@ -55,7 +55,7 @@ export const CodeBlock: React.FC<{ block: any; index: number }> = ({
           </div>
         </div>
       </div>
-      
+
       <div className="space-y-6">
         <CodeField
           field={{
@@ -67,17 +67,17 @@ export const CodeBlock: React.FC<{ block: any; index: number }> = ({
           value={data.code || ""}
           onChange={(val) => handleChange("code", val)}
         />
-        
+
         <div className="flex items-center gap-4 bg-[var(--kyro-surface-accent)]/20 p-4 rounded-xl border border-[var(--kyro-border)]/50">
           <div className="flex-1">
-            <label className="text-[10px] font-black uppercase tracking-widest text-[var(--kyro-text-muted)] mb-2 block">
+            <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] mb-2 block">
               Syntax Highlighting
             </label>
             <div className="relative">
               <select
                 value={data.language || "javascript"}
                 onChange={(e) => handleChange("language", e.target.value)}
-                className="w-full pl-4 pr-10 py-2.5 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl text-xs font-bold text-[var(--kyro-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)]/20 focus:border-[var(--kyro-primary)] transition-all appearance-none cursor-pointer"
+                className="w-full pl-4 pr-10 py-2.5 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl text-xs font-medium text-[var(--kyro-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)]/20 focus:border-[var(--kyro-primary)] transition-all appearance-none cursor-pointer"
               >
                 <option value="plaintext">Plain Text</option>
                 <option value="javascript">JavaScript</option>
@@ -95,16 +95,16 @@ export const CodeBlock: React.FC<{ block: any; index: number }> = ({
               </div>
             </div>
           </div>
-          
+
           <div className="hidden sm:block w-px h-10 bg-[var(--kyro-border)]" />
-          
+
           <div className="hidden sm:flex flex-col justify-center">
-            <span className="text-[10px] font-black uppercase tracking-widest text-[var(--kyro-text-muted)] mb-2">
+            <span className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] mb-2">
               Status
             </span>
             <div className="flex items-center gap-2 px-3 py-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl">
               <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
-              <span className="text-[10px] font-bold text-[var(--kyro-text-primary)] tracking-wide">EDITING</span>
+              <span className="text-[10px] font-medium text-[var(--kyro-text-primary)] tracking-wide">EDITING</span>
             </div>
           </div>
         </div>

package/src/components/blocks/ColumnsBlock.tsx

@@ -3,15 +3,15 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X, Columns3 } from "lucide-react";
 import { ColumnsField } from "../fields/ColumnsField";
+import { BlockWrapper } from "./BlockWrapper";
 
-export const ColumnsBlock: React.FC<{ block: any; index: number }> = ({
+export const ColumnsBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
   const blockData = useBlockById(block.id);
-  const { updateBlock, removeBlock, moveBlock } = useBlockActions();
+  const { updateBlock } = useBlockActions();
 
   const data = blockData?.data ?? block.data ?? {};
   const columns = data.columns || 2;
@@ -30,7 +30,7 @@ export const ColumnsBlock: React.FC<{ block: any; index: number }> = ({
 
   const handleUpdateColumnChildren = (
     columnIndex: number,
-    newChildren: any[],
+    newChildren: Record<string, unknown>[],
   ) => {
     const newColumnData = [...columnData];
     newColumnData[columnIndex] = {
@@ -43,51 +43,13 @@ export const ColumnsBlock: React.FC<{ block: any; index: number }> = ({
   };
 
   return (
-    <div className="block-columns border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
-      <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-2">
-          <Columns3 className="w-3.5 h-3.5 text-[var(--kyro-primary)]" />
-          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
-            Columns
-          </span>
-          <span className="text-[10px] text-[var(--kyro-text-muted)]">
-            ({columns})
-          </span>
-        </div>
-        <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-          <button
-            type="button"
-            onClick={() => moveBlock(block.id, "up")}
-            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move up"
-          >
-            <ChevronRight className="w-3 h-3 rotate-90" />
-          </button>
-          <button
-            type="button"
-            onClick={() => moveBlock(block.id, "down")}
-            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move down"
-          >
-            <ChevronRight className="w-3 h-3" />
-          </button>
-          <button
-            type="button"
-            onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
-            title="Remove"
-          >
-            <X className="w-3 h-3" />
-          </button>
-        </div>
-      </div>
-
+    <BlockWrapper id={block.id} type="columns" label="Columns">
       <ColumnsField
         columns={columns}
         columnData={columnData}
         onColumnsChange={handleColumnsChange}
         onUpdateColumnChildren={handleUpdateColumnChildren}
       />
-    </div>
+    </BlockWrapper>
   );
 };

package/src/components/blocks/DividerBlock.tsx

@@ -3,16 +3,16 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { ChevronRight, X } from "../ui/icons";
 
-export const DividerBlock: React.FC<{ block: any; index: number }> = ({
+export const DividerBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
   const data = blockData?.data ?? block.data ?? {};
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 

package/src/components/blocks/FileBlock.tsx

@@ -3,10 +3,10 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { ChevronRight, X } from "../ui/icons";
 import { UploadField } from "../fields/UploadField";
 
-export const FileBlock: React.FC<{ block: any; index: number }> = ({
+export const FileBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,14 +15,14 @@ export const FileBlock: React.FC<{ block: any; index: number }> = ({
 
   const data = blockData?.data ?? block.data ?? {};
 
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 
   return (
     <div className="block-file border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
       <div className="flex items-center justify-between mb-1">
-        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] ">
           File
         </span>
         <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">

package/src/components/blocks/HeadingBlock.tsx

@@ -3,57 +3,25 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
 import { HeadingField } from "../fields/HeadingField";
+import { BlockWrapper } from "./BlockWrapper";
 
-export const HeadingBlock: React.FC<{ block: any; index: number }> = ({
+export const HeadingBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
   const blockData = useBlockById(block.id);
-  const { updateBlock, removeBlock, moveBlock } = useBlockActions();
+  const { updateBlock } = useBlockActions();
 
   const data = blockData?.data || block.data || {};
 
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 
   return (
-    <div className="block-heading border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
-      <div className="flex items-center justify-between mb-1">
-        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
-          Heading
-        </span>
-        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <button
-            type="button"
-            onClick={() => moveBlock(block.id, "up")}
-            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move up"
-          >
-            <ChevronRight className="w-3 h-3 rotate-90" />
-          </button>
-          <button
-            type="button"
-            onClick={() => moveBlock(block.id, "down")}
-            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move down"
-          >
-            <ChevronRight className="w-3 h-3" />
-          </button>
-          <button
-            type="button"
-            onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Remove"
-          >
-            <X className="w-3 h-3" />
-          </button>
-        </div>
-      </div>
-
+    <BlockWrapper id={block.id} type="heading" label="Heading">
       <HeadingField text={data.text || ""} onChange={handleChange} compact />
-    </div>
+    </BlockWrapper>
   );
 };