@kyro-cms/admin 0.12.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "engines": {
     "node": ">=22"
   },

package/src/components/ActionBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import { IconPlus, IconSend, IconClock, IconArchive, IconUndo, IconCopy, IconEye, IconTrash2, IconMoreVertical } from "./ui/icons";
+import { IconPlus, IconSend, IconClock, IconArchive, IconUndo, IconCopy, IconEye, IconTrash2, IconMoreVertical, ClipboardPaste, ClipboardCopy } from "./ui/icons";
 import { DropdownItem, DropdownSeparator } from "./ui/Dropdown";
 import { SplitButton } from "./ui/SplitButton";
 import { Spinner } from "./ui/Spinner";
@@ -23,6 +23,8 @@ export interface ActionBarProps {
   onToggleSidebar?: () => void;
   publishedAt?: string | null;
   updatedAt?: string | null;
+  onCopyData?: () => void;
+  onPasteData?: () => void;
 }
 
 const STATUS_DOT: Record<string, string> = {
@@ -54,6 +56,8 @@ export function ActionBar({
   onToggleSidebar,
   publishedAt,
   updatedAt,
+  onCopyData,
+  onPasteData,
 }: ActionBarProps) {
   const view = useAutoFormStore((s) => s.view) || "edit";
   const setView = useAutoFormStore((s) => s.setView);
@@ -130,6 +134,16 @@ export function ActionBar({
             <IconCopy className="w-3.5 h-3.5" />
           </button>
         )}
+        {onCopyData && (
+          <button type="button" onClick={onCopyData} className={`${iconBtnClass} max-md:hidden`} title="Copy Data">
+            <ClipboardCopy className="w-3.5 h-3.5" />
+          </button>
+        )}
+        {onPasteData && (
+          <button type="button" onClick={onPasteData} className={`${iconBtnClass} max-md:hidden`} title="Paste Data">
+            <ClipboardPaste className="w-3.5 h-3.5" />
+          </button>
+        )}
         {onDelete && (
           <button type="button" onClick={onDelete} className={`${iconBtnClass} hover:bg-[var(--kyro-danger-bg)] hover:text-[var(--kyro-danger)] max-md:hidden`} title="Delete">
             <IconTrash2 className="w-3.5 h-3.5" />
@@ -183,6 +197,16 @@ export function ActionBar({
                   <IconCopy className="w-3.5 h-3.5" /> Duplicate
                 </button>
               )}
+              {onCopyData && (
+                <button type="button" onClick={() => { onCopyData(); setMoreOpen(false); }} className="w-full flex items-center gap-2 px-3 py-2 text-xs text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
+                  <ClipboardCopy className="w-3.5 h-3.5" /> Copy Data
+                </button>
+              )}
+              {onPasteData && (
+                <button type="button" onClick={() => { onPasteData(); setMoreOpen(false); }} className="w-full flex items-center gap-2 px-3 py-2 text-xs text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
+                  <ClipboardPaste className="w-3.5 h-3.5" /> Paste Data
+                </button>
+              )}
               {onPreview && (
                 <button type="button" onClick={() => { onPreview(); setMoreOpen(false); }} className="w-full flex items-center gap-2 px-3 py-2 text-xs text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
                   <IconEye className="w-3.5 h-3.5" /> Preview
@@ -225,15 +249,21 @@ export function ActionBar({
           onPublish={onSave}
         >
           {onDuplicate && (
-            <DropdownItem icon={<IconCopy className="w-4 h-4" />}>Duplicate</DropdownItem>
+            <DropdownItem icon={<IconCopy className="w-4 h-4" />} onClick={onDuplicate}>Duplicate</DropdownItem>
+          )}
+          {onCopyData && (
+            <DropdownItem icon={<ClipboardCopy className="w-4 h-4" />} onClick={onCopyData}>Copy Data</DropdownItem>
+          )}
+          {onPasteData && (
+            <DropdownItem icon={<ClipboardPaste className="w-4 h-4" />} onClick={onPasteData}>Paste Data</DropdownItem>
           )}
           {onViewHistory && (
-            <DropdownItem icon={<IconClock className="w-4 h-4" />}>View History</DropdownItem>
+            <DropdownItem icon={<IconClock className="w-4 h-4" />} onClick={onViewHistory}>View History</DropdownItem>
           )}
           {onPreview && (
-            <DropdownItem icon={<IconEye className="w-4 h-4" />}>Preview</DropdownItem>
+            <DropdownItem icon={<IconEye className="w-4 h-4" />} onClick={onPreview}>Preview</DropdownItem>
           )}
-          {(onDuplicate || onViewHistory || onPreview) && <DropdownSeparator />}
+          {(onDuplicate || onCopyData || onPasteData || onViewHistory || onPreview) && <DropdownSeparator />}
           {onDelete && (
             <DropdownItem onClick={onDelete} danger icon={<IconTrash2 className="w-4 h-4" />}>Delete</DropdownItem>
           )}

package/src/components/AutoForm.tsx

@@ -62,8 +62,49 @@ interface AutoFormProps {
   documentStatus?: string;
 }
 
-const EMPTY_OBJECT = {};
+function getNestedValue(obj: any, path: string): any {
+  if (!obj || typeof path !== "string") return undefined;
+  return path.split('.').reduce((acc, part) => (acc && acc[part] !== undefined ? acc[part] : undefined), obj);
+}
+
+function evaluateDeclarativeCondition(cond: any, currentData: any, formData: any): boolean {
+  if (!cond) return true;
+  
+  if (Array.isArray(cond.and)) {
+    return cond.and.every((c: any) => evaluateDeclarativeCondition(c, currentData, formData));
+  }
+  if (Array.isArray(cond.or)) {
+    return cond.or.some((c: any) => evaluateDeclarativeCondition(c, currentData, formData));
+  }
+  
+  if (cond.field) {
+    const targetField = cond.field;
+    let val = getNestedValue(currentData, targetField);
+    if (val === undefined) {
+      val = getNestedValue(formData, targetField);
+    }
+    
+    if ("equals" in cond) {
+      return val === cond.equals;
+    }
+    if ("notEquals" in cond) {
+      return val !== cond.notEquals;
+    }
+    if ("in" in cond && Array.isArray(cond.in)) {
+      return cond.in.includes(val);
+    }
+    if ("greaterThan" in cond) {
+      return typeof val === "number" && val > cond.greaterThan;
+    }
+    
+    // If field exists but no operator is provided, just check truthiness
+    return Boolean(val);
+  }
+  
+  return true;
+}
 
+const EMPTY_OBJECT = {};
 export function AutoForm({
   config: propConfig,
   data: initialData = EMPTY_OBJECT,
@@ -706,23 +747,7 @@ export function AutoForm({
         }
       } else if (typeof field.admin.condition === "object") {
         try {
-          const cond = field.admin.condition as any;
-          const targetField = cond.field;
-
-          // Get target field value, prioritizing sibling context (currentData) then root context (formData)
-          const val = (currentData && currentData[targetField] !== undefined)
-            ? currentData[targetField]
-            : (formData && formData[targetField] !== undefined ? formData[targetField] : undefined);
-
-          let shouldShow = true;
-          if ("equals" in cond) {
-            shouldShow = val === cond.equals;
-          } else if ("notEquals" in cond) {
-            shouldShow = val !== cond.notEquals;
-          } else if ("in" in cond && Array.isArray(cond.in)) {
-            shouldShow = cond.in.includes(val);
-          }
-
+          const shouldShow = evaluateDeclarativeCondition(field.admin.condition, currentData, formData);
           if (!shouldShow) {
             return null;
           }

package/src/components/DetailView.tsx

@@ -229,6 +229,45 @@ export function DetailView({
     }
   };
 
+  const handleCopyData = async () => {
+    try {
+      const copyPayload = { ...data };
+      // Strip system fields
+      delete copyPayload.id;
+      delete copyPayload.createdAt;
+      delete copyPayload.updatedAt;
+      delete (copyPayload as any).status;
+      
+      await navigator.clipboard.writeText(JSON.stringify(copyPayload));
+      toast.success("Document data copied to clipboard");
+    } catch (e) {
+      toast.error("Failed to copy document data");
+    }
+  };
+
+  const handlePasteData = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      const pastedData = JSON.parse(text);
+      if (typeof pastedData !== 'object' || pastedData === null) {
+        throw new Error("Invalid format");
+      }
+      
+      setData((prev) => ({
+        ...prev,
+        ...pastedData,
+        // Preserve system fields from overwrite
+        id: prev.id,
+        createdAt: prev.createdAt,
+        updatedAt: prev.updatedAt,
+        status: prev.status,
+      }));
+      toast.success("Document data pasted");
+    } catch (e) {
+      toast.error("Clipboard does not contain valid document JSON");
+    }
+  };
+
   const handleDeleteTrigger = () => {
     confirm({
       title: `Delete ${label}?`,
@@ -300,6 +339,8 @@ export function DetailView({
         onPublish={handlePublish}
         onUnpublish={status === "published" ? handleUnpublish : undefined}
         onDuplicate={handleDuplicate}
+        onCopyData={handleCopyData}
+        onPasteData={handlePasteData}
         onViewHistory={() => {
           window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
         }}

package/src/components/FieldRenderer.tsx

@@ -8,6 +8,7 @@ import SelectField from "./fields/SelectField";
 import DateField from "./fields/DateField";
 import { MarkdownField } from "./fields/MarkdownField";
 import TextField from "./fields/TextField";
+import IconField from "./fields/IconField";
 import { BlocksField } from "./fields/BlocksField";
 import { RichTextField } from "./fields";
 import { ListField } from "./fields/ListField";
@@ -62,6 +63,16 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
           disabled={disabled}
         />
       );
+    case "icon":
+      return (
+        <IconField
+          field={field as any}
+          value={value}
+          onChange={onChangeKeystroke}
+          error={error}
+          disabled={disabled}
+        />
+      );
     case "textarea":
       return (
         <TextField

package/src/components/MediaGallery.tsx

@@ -70,6 +70,23 @@ function getAbsoluteUrl(relativeUrl: unknown): string {
   return `${window.location.origin}${sanitized}`;
 }
 
+function getCroppedUrl(item: MediaItem, width?: number): string | null {
+  if (!item.metadata?.crop) return null;
+  const { x, y, width: cw, height: ch } = item.metadata.crop;
+  if (!cw || !ch) return null;
+  const base = getAbsoluteUrl(item.url);
+  if (!base) return null;
+  const params = new URLSearchParams({ url: item.url });
+  params.set("cx", String(x));
+  params.set("cy", String(y));
+  params.set("cw", String(cw));
+  params.set("ch", String(ch));
+  if (width) params.set("w", String(width));
+  const resizePath = `/api/media/resize?${params.toString()}`;
+  if (typeof window === "undefined") return resizePath;
+  return `${window.location.origin}${resizePath}`;
+}
+
 type FilterType =
   | "all"
   | "image"
@@ -383,12 +400,12 @@ export function MediaGallery({
         crop: cropData,
         hotspot: hotspotData
       };
-      
+
       const result = await apiPatch(`/api/media/${panelItem.id}`, { metadata });
       setItems(prev => prev.map(item => item.id === panelItem.id ? result.doc : item));
       setPanelItem(result.doc);
       setShowCrop(false);
-      toast.success("Focal metadata saved");
+      toast.success("Crop & hotspot saved");
     } catch (err) {
       console.error("Save failed:", err);
       toast.error("Failed to save focal metadata");
@@ -417,71 +434,68 @@ export function MediaGallery({
       })}
     >
       {/* Top Bar */}
-      <div className={`flex flex-col lg:flex-row lg:items-center justify-between gap-6 border-b border-[var(--kyro-border)] backdrop-blur-md sticky top-0 ${pickerMode ? "p-2" : "p-6 rounded-xl surface-tile"}`}>
+      <div className={`flex flex-col ${pickerMode ? "gap-2 p-2" : "gap-4 md:gap-6 p-4 md:p-6 rounded-md md:rounded-t-xl surface-tile"} border-b border-[var(--kyro-border)] backdrop-blur-md sticky top-0 z-10`}>
         {!pickerMode && (
-          <div className="flex items-center gap-4">
+          <div className="flex items-center justify-between w-full">
             <div>
-              <h2 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
+              <h2 className="text-lg md:text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
                 Media Library
               </h2>
-              <div className="flex items-center gap-3 mt-1">
+              <div className="flex items-center gap-2 mt-0.5">
                 <span className="text-[10px] font-bold tracking-widest text-[var(--kyro-text-secondary)] opacity-50">
-                  {total} Items · {formatFileSize(stats.totalSize)}
+                  {total} Items <span className="hidden sm:inline">· {formatFileSize(stats.totalSize)}</span>
                 </span>
               </div>
             </div>
-          </div>
-        )}
-
-        <div className={`flex items-center gap-3 flex-wrap lg:flex-nowrap ${pickerMode ? "w-full" : ""}`}>
-          <div className="relative group flex-1 min-w-[200px]">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
-            <input
-              type="text"
-              placeholder="Search assets..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              className="w-full pl-11 pr-4 py-2.5 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] transition-all text-xs font-bold"
-            />
-          </div>
-
-          {!pickerMode && (
-            <>
-              <div className="flex items-center gap-2">
-                <div className="flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]">
-                  <button
-                    onClick={() => setView("grid")}
-                    className={`p-2 rounded-lg transition-all ${view === "grid" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
-                  >
-                    <Grid className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => setView("list")}
-                    className={`p-2 rounded-lg transition-all ${view === "list" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
-                  >
-                    <FileIcon className="w-4 h-4" />
-                  </button>
-                </div>
 
+            <div className="flex items-center gap-2">
+              <div className="flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)] hidden sm:flex">
                 <button
-                  onClick={() => setShowMobileFilters(true)}
-                  className="md:hidden p-2 rounded-xl bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors"
+                  onClick={() => setView("grid")}
+                  className={`p-1.5 md:p-2 rounded-lg transition-all ${view === "grid" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
                 >
-                  <Filter className="w-4 h-4" />
+                  <Grid className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => setView("list")}
+                  className={`p-1.5 md:p-2 rounded-lg transition-all ${view === "list" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
+                >
+                  <FileIcon className="w-4 h-4" />
                 </button>
               </div>
 
+              <button
+                onClick={() => setShowMobileFilters(true)}
+                className="md:hidden p-2 rounded-xl bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors"
+              >
+                <Filter className="w-4 h-4" />
+              </button>
+
               {canUpload && (
                 <button
                   onClick={() => fileInputRef.current?.click()}
-                  className="flex items-center gap-2 px-6 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-xs shadow-lg active:scale-95 transition-all"
+                  className="flex items-center justify-center gap-2 px-3 md:px-6 py-2 md:py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-xs shadow-lg active:scale-95 transition-all"
                 >
-                  <Maximize2 className="w-4 h-4" />
-                  Upload
+                  <span className="md:hidden text-lg leading-none">+</span>
+                  <Maximize2 className="w-4 h-4 hidden md:block" />
+                  <span className="hidden md:inline">Upload</span>
                 </button>
               )}
-            </>
-          )}
+            </div>
+          </div>
+        )}
+
+        <div className={`flex items-center w-full`}>
+          <div className="relative group flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
+            <input
+              type="text"
+              placeholder="Search assets..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full pl-10 pr-4 py-2.5 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] transition-all text-xs font-bold"
+            />
+          </div>
         </div>
       </div>
 
@@ -610,7 +624,7 @@ export function MediaGallery({
                   >
                     {item.type === "image" ? (
                       <img
-                        src={item.url}
+                        src={getCroppedUrl(item, 400) || item.url}
                         alt={item.title}
                         className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                         loading="lazy"
@@ -707,7 +721,7 @@ export function MediaGallery({
                             <div className="w-12 h-12 rounded-xl bg-[var(--kyro-bg)] overflow-hidden border border-[var(--kyro-border)] flex-shrink-0 flex items-center justify-center">
                               {item.type === "image" ? (
                                 <img
-                                  src={item.url}
+                                  src={getCroppedUrl(item, 96) || item.url}
                                   alt=""
                                   className="w-full h-full object-cover"
                                 />
@@ -962,7 +976,7 @@ export function MediaGallery({
             <div className="aspect-video w-full rounded-2xl bg-[var(--kyro-bg)] border border-[var(--kyro-border)] overflow-hidden relative group">
               {panelItem.type === "image" ? (
                 <img
-                  src={getAbsoluteUrl(panelItem.url)}
+                  src={getCroppedUrl(panelItem) || getAbsoluteUrl(panelItem.url)}
                   alt=""
                   className="w-full h-full object-contain p-4"
                 />
@@ -1152,7 +1166,7 @@ export function MediaGallery({
           <div className="flex-1 w-full flex items-center justify-center p-12">
             {panelItem.type === "image" ? (
               <img
-                src={getAbsoluteUrl(panelItem.url)}
+                src={getCroppedUrl(panelItem) || getAbsoluteUrl(panelItem.url)}
                 alt=""
                 className="max-h-full max-w-full object-contain shadow-2xl rounded-lg animate-in zoom-in-95 duration-500"
               />

package/src/components/WebhookManager.tsx

@@ -634,7 +634,7 @@ export function WebhookManager() {
         <ModalContent>
           <div className="space-y-6">
             <div className="grid grid-cols-1 gap-4">
-              <div className="p-4 rounded-xl bg-[var(--kyro-surface)] border border-[var(--kyro-border)]">
+              <div className="p-4 rounded-md bg-[var(--kyro-surface)] border border-[var(--kyro-border)]">
                 <h4 className="text-sm font-medium mb-1.5 flex items-center gap-2">
                   <ExternalLink className="w-3.5 h-3.5 text-[var(--kyro-primary)]" />
                   Request format
@@ -644,7 +644,7 @@ export function WebhookManager() {
                   to your endpoint with a JSON payload containing document metadata and operation details.
                 </p>
               </div>
-              <div className="p-4 rounded-xl bg-[var(--kyro-surface)] border border-[var(--kyro-border)]">
+              <div className="p-4 rounded-md bg-[var(--kyro-surface)] border border-[var(--kyro-border)]">
                 <h4 className="text-sm font-medium mb-1.5 flex items-center gap-2">
                   <Shield className="w-3.5 h-3.5 text-[var(--kyro-primary)]" />
                   Signature verification
@@ -658,7 +658,7 @@ export function WebhookManager() {
 
             <div className="space-y-2">
               <h4 className="text-xs font-medium text-[var(--kyro-text-secondary)] opacity-50">Example payload</h4>
-              <div className="bg-[var(--kyro-bg)] rounded-xl border border-[var(--kyro-border)] p-4 font-mono text-xs overflow-hidden">
+              <div className="bg-[var(--kyro-bg)] rounded-md border border-[var(--kyro-border)] p-4 font-mono text-xs overflow-hidden">
                 <div className="space-y-0.5 text-[var(--kyro-text-secondary)]">
                   <div>{"{"}</div>
                   <div className="pl-3"><span className="text-[var(--kyro-primary)]">"event"</span>: <span className="text-green-500">"collection.create"</span>,</div>

package/src/components/autoform/AutoFormHeader.tsx

@@ -216,7 +216,6 @@ export function AutoFormHeader({
         }
       >
         Save Draft
-        <span className="ml-auto text-[9px] opacity-40 font-mono">⌘S</span>
       </DropdownItem>
       {!globalSlug && (
         <DropdownItem
@@ -327,7 +326,7 @@ export function AutoFormHeader({
   return (
     <>
       {/* MOBILE HEADER */}
-      <header className="md:hidden border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] backdrop-blur-md rounded-lg">
+      <header className="md:hidden border-b border-[var(--kyro-border)] z-50 bg-[var(--kyro-surface)] backdrop-blur-md rounded-lg">
         <div className="flex items-center gap-2 px-3 py-2.5">
           <a
             href={`${ADMIN_BASE}/${collectionSlug}`}

package/src/components/fields/BlocksField.tsx

@@ -11,6 +11,7 @@ import {
   getBlockLabel,
   blockTheme,
 } from "./extensions/blockComponents";
+import { Check, ClipboardCopy } from "lucide-react";
 import { GenericBlock } from "../blocks/GenericBlock";
 import { BlockEditModal } from "../blocks/BlockEditModal";
 import {
@@ -94,6 +95,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 +138,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 +173,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 +220,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 +367,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) => {
@@ -518,6 +549,26 @@ 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 duplicateBlock = useCallback(
     (blockId: string) => {
       const blockIndex = blocks.findIndex((b) => b.id === blockId);
@@ -645,25 +696,25 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
           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 +766,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 +807,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