@kyro-cms/admin 0.12.0 → 0.12.3

package/src/components/fields/BlocksField.tsx

@@ -11,8 +11,11 @@ import {
   getBlockLabel,
   blockTheme,
 } from "./extensions/blockComponents";
+import { Check, ClipboardCopy } from "lucide-react";
 import { GenericBlock } from "../blocks/GenericBlock";
 import { BlockEditModal } from "../blocks/BlockEditModal";
+import { deepEqual } from "../../lib/deep-equal";
+import { toast } from "../../lib/stores";
 import {
 
   DndContext,
@@ -94,6 +97,20 @@ const SortableBlockComponent = ({
   const [editingName, setEditingName] = useState(false);
   const [nameDraft, setNameDraft] = useState((block.name as string) || "");
   const nameInputRef = useRef<HTMLInputElement>(null);
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = useCallback(async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      const { id, ...blockProps } = block;
+      const payload = JSON.stringify({ __kyro_block: true, type: block.type, blockProps });
+      await navigator.clipboard.writeText(payload);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy block", err);
+    }
+  }, [block]);
 
   useEffect(() => {
     if (editingName && nameInputRef.current) {
@@ -123,16 +140,16 @@ const SortableBlockComponent = ({
 
   if (compact) {
     return (
-      <div ref={setNodeRef} style={style} className="relative group">
+      <div ref={setNodeRef} style={style} className="relative group w-full">
         <div
           onClick={() => setEditingBlockId(block.id as string)}
-          className={`flex items-center gap-1 pl-5 pr-1.5 py-1 bg-[var(--kyro-bg-secondary)] rounded-md border transition-colors cursor-pointer text-xs whitespace-nowrap ${isEditing
+          className={`flex items-center gap-2 pl-7 pr-2 py-2 w-full bg-[var(--kyro-bg-secondary)] rounded-md border transition-colors cursor-pointer text-sm ${isEditing
               ? `${(blockTheme[block.type as string] || blockTheme.default).border} bg-[var(--kyro-primary)]/5`
               : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
             }`}
         >
           <div
-            className="absolute left-0.5 top-1/2 -translate-y-1/2 p-0.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded touch-none"
+            className="absolute left-1.5 top-1/2 -translate-y-1/2 p-0.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded touch-none"
             {...attributes}
             {...listeners}
             onClick={(e) => e.stopPropagation()}
@@ -158,7 +175,7 @@ const SortableBlockComponent = ({
             />
           ) : (
             <span
-              className="font-medium text-[var(--kyro-text-secondary)] truncate max-w-[120px] transition-colors"
+              className="font-medium text-[var(--kyro-text-secondary)] flex-1 min-w-0 truncate transition-colors text-left"
             >
               {itemLabel}
             </span>
@@ -205,10 +222,18 @@ const SortableBlockComponent = ({
                   onDuplicate(block.id as string);
                 }}
                 className="p-0.5 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
-                title="Duplicate"
+                title="Duplicate in place"
               >
                 <Copy className="w-3 h-3" />
               </button>
+              <button
+                type="button"
+                onClick={copyToClipboard}
+                className="p-0.5 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
+                title="Copy Block to Clipboard"
+              >
+                {copied ? <Check className="w-3 h-3 text-green-500" /> : <ClipboardCopy className="w-3 h-3" />}
+              </button>
               <button
                 type="button"
                 onClick={(e) => {
@@ -344,6 +369,14 @@ const SortableBlockComponent = ({
             >
               <Copy className="w-3.5 h-3.5" />
             </button>
+            <button
+              type="button"
+              onClick={copyToClipboard}
+              className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
+              title="Copy Block to Clipboard"
+            >
+              {copied ? <Check className="w-3.5 h-3.5 text-green-500" /> : <ClipboardCopy className="w-3.5 h-3.5" />}
+            </button>
             <button
               type="button"
               onClick={(e) => {
@@ -468,7 +501,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
     const lastValueArray = lastValueRef.current || [];
 
     // Deep compare to catch external data changes (e.g. discard draft / auto-save restore)
-    if (JSON.stringify(valueArray) !== JSON.stringify(lastValueArray)) {
+    if (!deepEqual(valueArray, lastValueArray)) {
       const valueArrayCopy = [...valueArray];
       prevBlocksLengthRef.current = valueArrayCopy.length;
       prevBlockIdsRef.current = new Set(valueArrayCopy.map((b: Record<string, unknown>) => b.id));
@@ -490,7 +523,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
     if (!lastValue) return; // Wait until initialized
 
     // Deep compare blocks vs lastValue to detect content edits, not just ID changes
-    if (JSON.stringify(blocks) !== JSON.stringify(lastValue)) {
+    if (!deepEqual(blocks, lastValue)) {
       lastValueRef.current = [...blocks]; // Update ref BEFORE firing onChange to prevent loops
       onChangeRef.current(blocks);
     }
@@ -518,6 +551,53 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
     [store],
   );
 
+  const handlePasteBlock = useCallback((parsedData: any) => {
+    const allowedBlocks = (field.blocks as Array<{ slug: string }>) || [];
+    const isAllowed = allowedBlocks.some((b) => b.slug === parsedData.type);
+    
+    if (!isAllowed) {
+      alert(`The block type "${parsedData.type}" is not allowed in this collection.`);
+      return;
+    }
+
+    const newId = Math.random().toString(36).substring(2, 11);
+    const newBlock = {
+      ...(parsedData.blockProps || {}),
+      id: newId,
+      type: parsedData.type,
+    };
+
+    store.getState().setBlocks([...blocks, newBlock]);
+    setIsDrawerOpen(false);
+  }, [field.blocks, blocks, store]);
+
+  const handleContainerPaste = useCallback((e: React.ClipboardEvent<HTMLDivElement>) => {
+    const activeEl = document.activeElement;
+    if (
+      activeEl &&
+      (activeEl.tagName === "INPUT" ||
+        activeEl.tagName === "TEXTAREA" ||
+        activeEl.getAttribute("contenteditable") === "true")
+    ) {
+      return;
+    }
+
+    const text = e.clipboardData?.getData("text");
+    if (!text) return;
+
+    try {
+      const parsed = JSON.parse(text);
+      if (parsed && parsed.__kyro_block) {
+        e.preventDefault();
+        e.stopPropagation();
+        handlePasteBlock(parsed);
+        toast.success(`Block pasted: ${parsed.type}`);
+      }
+    } catch {
+      // Ignore
+    }
+  }, [handlePasteBlock]);
+
   const duplicateBlock = useCallback(
     (blockId: string) => {
       const blockIndex = blocks.findIndex((b) => b.id === blockId);
@@ -638,32 +718,37 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
 
   return (
     <BlocksContext.Provider value={storeRef.current}>
-      <div className="kyro-blocks-field">
+      <div 
+        className="kyro-blocks-field"
+        onPaste={handleContainerPaste}
+        tabIndex={0}
+        style={{ outline: "none" }}
+      >
         <DndContext
           sensors={sensors}
           collisionDetection={closestCenter}
           onDragStart={handleDragStart}
           onDragEnd={handleDragEnd}
         >
-          <div className="flex items-center justify-between mb-2">
-            <label className="kyro-form-label">{field.label || field.name}</label>
+          <div className={pickerMode === "dropdown" ? "mb-4" : "flex items-center justify-between mb-2"}>
+            <label className={`kyro-form-label ${pickerMode === "dropdown" ? "block mb-2" : ""}`}>{field.label || field.name}</label>
             {pickerMode === "dropdown" ? (
-              <div ref={dropdownRef} className="relative">
+              <div ref={dropdownRef} className="relative w-full">
                 <button
                   type="button"
                   onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                   disabled={disabled}
-                  className="flex items-center gap-1.5 px-3 py-2 text-sm text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)]/30 rounded-md transition-colors disabled:opacity-50 font-semibold"
+                  className="flex w-full items-center justify-between px-3 py-2 text-sm text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] bg-[var(--kyro-surface)] rounded-md transition-colors disabled:opacity-50"
                 >
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Add Element
-                  <ChevronDown className={`w-3.5 h-3.5 transition-transform ${isDropdownOpen ? "rotate-180" : ""}`} />
+                  <div className="flex items-center gap-2">
+                    <Plus className="w-4 h-4 text-[var(--kyro-primary)]" />
+                    <span className="font-semibold">Select an element to add...</span>
+                  </div>
+                  <ChevronDown className={`w-4 h-4 transition-transform ${isDropdownOpen ? "rotate-180 text-[var(--kyro-primary)]" : "opacity-50"}`} />
                 </button>
 
                 {isDropdownOpen && (
-                  <div className="absolute right-0 top-full mt-1 w-56 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg shadow-xl z-50 py-2 max-h-80 overflow-y-auto">
+                  <div className="absolute right-0 top-full mt-1 w-full bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg shadow-xl z-50 py-2 max-h-80 overflow-y-auto">
                     {dynamicCategories.map((category) => (
                       <div key={category.title}>
                         {dynamicCategories.length > 1 && (
@@ -715,6 +800,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
               open={isDrawerOpen}
               onClose={() => setIsDrawerOpen(false)}
               onSelect={handleAddBlock}
+              onPasteBlock={handlePasteBlock}
             >
               <div className="space-y-4">
                 {dynamicCategories.map((category) => (
@@ -755,7 +841,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
             items={blocks.map((b) => b.id)}
             strategy={verticalListSortingStrategy}
           >
-            <div className={pickerMode === "dropdown" ? "flex flex-wrap gap-1.5" : "space-y-4"}>
+            <div className={pickerMode === "dropdown" ? "flex flex-col gap-2 mt-3" : "space-y-4"}>
               {blocks.map((block, index) => {
                 const blockSchema = (field.blocks as any[])?.find(
                   (b) => b.slug === block.type

package/src/components/fields/GroupLayout.tsx

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

package/src/components/fields/IconField.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useMemo } from "react";
+import type { IconField as IconFieldType } from "@kyro-cms/core/client";
+import FieldLayout from "./FieldLayout";
+import { IconPickerModal } from "../ui/IconPickerModal";
+import * as LucideIcons from "lucide-react";
+
+interface IconFieldComponentProps {
+  field: IconFieldType;
+  value?: string | null;
+  onChange?: (value: string) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+export default function IconField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: IconFieldComponentProps) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const normalizedValue = value == null ? "" : String(value);
+
+  // Convert kebab-case value back to PascalCase to render the preview component
+  const pascalName = useMemo(() => {
+    if (!normalizedValue) return "";
+    return normalizedValue
+      .split("-")
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join("");
+  }, [normalizedValue]);
+
+  const IconComponent = (LucideIcons as any)[pascalName];
+  const isReadOnly = typeof field.admin?.readOnly === "function" ? false : Boolean(field.admin?.readOnly);
+
+  return (
+    <FieldLayout field={field} error={error}>
+      <div className="flex items-center gap-3">
+        <div className="flex-1 relative">
+          <input
+            id={field.name}
+            type="text"
+            value={normalizedValue}
+            onChange={(e) => onChange?.(e.target.value)}
+            placeholder={field.admin?.placeholder || "e.g., activity"}
+            disabled={disabled || isReadOnly}
+            required={field.required}
+            className={`kyro-form-input ${disabled || isReadOnly ? "opacity-70 bg-[var(--kyro-bg-secondary)] cursor-not-allowed" : ""}`}
+          />
+        </div>
+        
+        <button
+          type="button"
+          onClick={() => setPickerOpen(true)}
+          disabled={disabled || isReadOnly}
+          className="flex items-center gap-2 h-10 px-4 shrink-0 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl text-sm font-bold text-[var(--kyro-text-primary)] hover:border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-alpha)] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {IconComponent ? (
+            <IconComponent className="w-5 h-5" strokeWidth={2} />
+          ) : (
+            <LucideIcons.Search className="w-4 h-4 text-[var(--kyro-text-secondary)]" />
+          )}
+          Browse
+        </button>
+      </div>
+
+      {pickerOpen && (
+        <IconPickerModal
+          open={pickerOpen}
+          onClose={() => setPickerOpen(false)}
+          onSelect={(iconName) => {
+            onChange?.(iconName);
+          }}
+        />
+      )}
+    </FieldLayout>
+  );
+}

package/src/components/fields/TabsLayout.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React, { useState, useCallback } 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;
@@ -29,22 +30,72 @@ 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]);
+
   return (
     <div className="space-y-8">
-      <div className="flex items-center gap-2 border-b border-[var(--kyro-border)] mb-6 overflow-x-auto hide-scrollbar">
-        {fieldTabs.map((tab: { label: string }, index: number) => (
+      <div className="flex items-center justify-between border-b border-[var(--kyro-border)] mb-6">
+        <div className="flex items-center gap-2 overflow-x-auto hide-scrollbar">
+          {fieldTabs.map((tab: { label: string }, index: number) => (
+            <button
+              key={index}
+              type="button"
+              className={`px-6 py-3 text-sm  tracking-widest font-medium transition-all border-b-2 -mb-[1px] whitespace-nowrap ${
+                activeTab === index
+                  ? "border-[var(--kyro-primary)] text-[var(--kyro-primary)]"
+                  : "border-transparent text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] opacity-60 hover:opacity-100"
+              }`}
+              onClick={() => setActiveTab(index)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-1 pr-2">
           <button
-            key={index}
             type="button"
-            className={`px-6 py-3 text-sm  tracking-widest font-medium transition-all border-b-2 -mb-[1px] whitespace-nowrap ${activeTab === index
-              ? "border-[var(--kyro-primary)] text-[var(--kyro-primary)]"
-              : "border-transparent text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] opacity-60 hover:opacity-100"
-              }`}
-            onClick={() => setActiveTab(index)}
+            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"
           >
-            {tab.label}
+            {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/UploadField.tsx

@@ -96,6 +96,8 @@ export function UploadField({
   const currentValue = Array.isArray(value) ? value : value ? [value] : [];
   const canAddMore = currentValue.length < maxCount;
 
+  const [fetchedDetails, setFetchedDetails] = useState<Record<string, any>>({});
+
   useEffect(() => {
     const fetchMissingDetails = async () => {
       const idsToFetch = currentValue
@@ -111,37 +113,29 @@ export function UploadField({
         .map(item => item.id as string);
 
       const allIds = [...idsToFetch, ...objectIdsToFetch];
-      if (allIds.length === 0) return;
+      const missingIds = allIds.filter(id => !fetchedDetails[id]);
+
+      if (missingIds.length === 0) return;
 
       try {
         const fetchedItems = await Promise.all(
-          allIds.map(id => apiGet<any>(`/api/media/${id}`))
+          missingIds.map(id => apiGet<any>(`/api/media/${id}`))
         );
 
-        const newItems = [...currentValue];
-        fetchedItems.forEach(fetchedItem => {
-          const id = fetchedItem.id as string;
-          const strIndex = newItems.findIndex(item => item === id);
-          if (strIndex !== -1) {
-            newItems[strIndex] = fetchedItem;
-            return;
-          }
-          const objIndex = newItems.findIndex(
-            item => typeof item === 'object' && item !== null && (item as any).id === id
-          );
-          if (objIndex !== -1) {
-            newItems[objIndex] = fetchedItem;
-          }
+        setFetchedDetails(prev => {
+          const next = { ...prev };
+          fetchedItems.forEach(item => {
+            if (item && item.id) next[item.id] = item;
+          });
+          return next;
         });
-
-        onChange(isMultiple ? newItems : newItems[0]);
       } catch (err) {
         console.error("Failed to fetch media details:", err);
       }
     };
 
     fetchMissingDetails();
-  }, [value]);
+  }, [value, fetchedDetails]);
 
   useEffect(() => {
     if (showPicker) {
@@ -186,12 +180,14 @@ export function UploadField({
         formData.append("folder", selectedFolder);
       }
       const result = await apiUpload<any>("/api/media/upload", formData);
+      const data = result.data || result.doc || result;
       const newImage = {
-        id: result.id,
-        filename: result.filename,
-        originalName: (result as any).originalName ?? file.name,
-        url: result.url,
-        mimeType: file.type,
+        ...data,
+        id: data.id,
+        filename: data.filename,
+        originalName: data.originalName ?? file.name,
+        url: data.url,
+        mimeType: data.mimeType || file.type,
       };
       if (isMultiple) {
         onChange([...currentValue, newImage]);
@@ -301,8 +297,10 @@ export function UploadField({
     );
   }
 
-  const renderImagePreview = (img: any, index?: number) => {
-    if (!img) return null;
+  const renderImagePreview = (rawImg: any, index?: number) => {
+    if (!rawImg) return null;
+    const id = typeof rawImg === 'string' ? rawImg : rawImg.id;
+    const img = fetchedDetails[id] || (typeof rawImg === 'object' ? rawImg : { id });
     const fileType = getFileType(img.mimeType, img.filename || img.url);
     const isImage = fileType === "image";
 

package/src/components/fields/index.ts

@@ -1,4 +1,5 @@
 export { default as RichTextField } from "./RichTextField";
+export { default as IconField } from "./IconField";
 export { CodeField } from "./CodeField";
 export { JSONField } from "./JSONField";
 export { MarkdownField } from "./MarkdownField";

package/src/components/ui/BlockDrawer.tsx

@@ -1,11 +1,13 @@
 import React, { type ReactNode } from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { SlidePanel } from "./SlidePanel";
+import { ClipboardPaste } from "lucide-react";
 
 interface BlockDrawerProps {
   open: boolean;
   onClose: () => void;
   onSelect: (blockType: string) => void;
+  onPasteBlock?: (blockData: any) => void;
   children?: ReactNode;
 }
 
@@ -13,8 +15,29 @@ export function BlockDrawer({
   open,
   onClose,
   onSelect,
+  onPasteBlock,
   children,
 }: BlockDrawerProps) {
+  const [pasteError, setPasteError] = React.useState<string | null>(null);
+
+  const handlePaste = async () => {
+    try {
+      setPasteError(null);
+      const text = await navigator.clipboard.readText();
+      const parsed = JSON.parse(text);
+      if (parsed.__kyro_block) {
+        if (onPasteBlock) {
+          onPasteBlock(parsed);
+        }
+      } else {
+        setPasteError("Clipboard does not contain a valid Kyro block.");
+      }
+    } catch (err) {
+      setPasteError("Failed to read block from clipboard.");
+      console.error(err);
+    }
+  };
+
   if (!open) return null;
 
   return (
@@ -22,6 +45,22 @@ export function BlockDrawer({
       <p className="text-sm text-[var(--kyro-text-muted)] mb-4">
         Drag blocks into the editor or click to insert
       </p>
+
+      {onPasteBlock && (
+        <div className="mb-6 pb-6 border-b border-[var(--kyro-border)]">
+          <button
+            onClick={handlePaste}
+            className="w-full flex items-center justify-center gap-2 py-2 px-4 rounded-lg bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] text-sm font-semibold transition-all hover:bg-[var(--kyro-primary)]/5"
+          >
+            <ClipboardPaste className="w-4 h-4" />
+            Paste Block from Clipboard
+          </button>
+          {pasteError && (
+            <p className="text-xs text-red-500 mt-2 text-center font-medium">{pasteError}</p>
+          )}
+        </div>
+      )}
+
       {children}
     </SlidePanel>
   );