@kyro-cms/admin 0.11.6 → 0.12.1

package/src/components/autoform/AutoFormHeader.tsx

@@ -20,7 +20,9 @@ interface AutoFormHeaderProps {
   handleUnpublish: () => void;
   handleDelete: () => void;
   handlePublish: () => void;
+  handleSaveDraft: () => void;
   handleSchedulePublish: (scheduledFor: string) => void;
+  handleConflictOverride?: () => void;
 }
 
 export function AutoFormHeader({
@@ -35,7 +37,9 @@ export function AutoFormHeader({
   handleUnpublish,
   handleDelete,
   handlePublish,
+  handleSaveDraft,
   handleSchedulePublish,
+  handleConflictOverride,
 }: AutoFormHeaderProps) {
   const [now, setNow] = useState(Date.now());
   const [showSchedulePicker, setShowSchedulePicker] = useState(false);
@@ -76,7 +80,7 @@ export function AutoFormHeader({
   }, [showSchedulePicker]);
 
   const docTitle = String(
-    (formData.mainTabs as { title?: string })?.title ||
+    (formData.tabs as { title?: string })?.title ||
     (typeof formData.title === "object" ? "" : formData.title) ||
     (typeof formData.name === "object" ? "" : formData.name) ||
     "Untitled",
@@ -165,13 +169,7 @@ export function AutoFormHeader({
             <span className="opacity-30">—</span>
             <button
               type="button"
-              onClick={async () => {
-                // To keep changes during conflict, we'd fire the prop or a store action.
-                // For now, reload handles the other side. Since this is in header, we'll
-                // trigger a window reload or a saveDocument via context if needed.
-                // It's cleaner to handle this conflict directly if passed as a prop,
-                // but let's just trigger a reload for simplicity if they want the server version.
-              }}
+              onClick={() => handleConflictOverride?.()}
               className="text-[var(--kyro-primary)] hover:underline"
             >
               Keep my changes
@@ -207,6 +205,18 @@ export function AutoFormHeader({
       }
       direction="down"
     >
+      <DropdownItem
+        onClick={handleSaveDraft}
+        icon={
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+            <polyline points="17 21 17 13 7 13 7 21" />
+            <polyline points="7 3 7 8 15 8" />
+          </svg>
+        }
+      >
+        Save Draft
+      </DropdownItem>
       {!globalSlug && (
         <DropdownItem
           onClick={handleCreateNew}
@@ -316,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/autoform/ErrorBoundary.tsx

@@ -0,0 +1,93 @@
+import React, { Component, type ReactNode } from "react";
+import { AlertTriangle, RefreshCw, Copy } from "../ui/icons";
+import { useAutoFormStore } from "../../lib/autoform-store";
+import { toast } from "../../lib/stores";
+
+interface Props {
+  children: ReactNode;
+  fallbackTitle?: string;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: string | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("[ErrorBoundary] Caught:", error, errorInfo);
+    this.setState({ errorInfo: errorInfo.componentStack || null });
+  }
+
+  handleCopyToClipboard = () => {
+    const { error, errorInfo } = this.state;
+    const formData = useAutoFormStore.getState().formData;
+    const payload = {
+      error: error?.message,
+      stack: error?.stack,
+      componentStack: errorInfo,
+      formData,
+      timestamp: new Date().toISOString(),
+    };
+    navigator.clipboard.writeText(JSON.stringify(payload, null, 2)).then(() => {
+      toast.success("Crash details copied to clipboard");
+    });
+  };
+
+  handleReload = () => {
+    window.location.reload();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex flex-col items-center justify-center gap-4 p-16">
+          <div className="w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-red-500" />
+          </div>
+          <h3 className="text-lg font-bold text-[var(--kyro-text-primary)]">
+            {this.props.fallbackTitle || "Something went wrong"}
+          </h3>
+          <p className="text-sm text-[var(--kyro-text-secondary)] text-center max-w-md">
+            The form encountered an unexpected error. Your unsaved changes may still be recoverable.
+          </p>
+          {this.state.error && (
+            <p className="text-xs font-mono text-red-500/70 bg-red-500/5 px-4 py-2 rounded-lg max-w-full overflow-auto">
+              {this.state.error.message}
+            </p>
+          )}
+          <div className="flex items-center gap-3 mt-2">
+            <button
+              type="button"
+              onClick={this.handleReload}
+              className="flex items-center gap-2 px-4 py-2 text-sm font-bold rounded-xl border border-[var(--kyro-border)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
+            >
+              <RefreshCw className="w-4 h-4" />
+              Reload Page
+            </button>
+            <button
+              type="button"
+              onClick={this.handleCopyToClipboard}
+              className="flex items-center gap-2 px-4 py-2 text-sm font-bold rounded-xl bg-[var(--kyro-primary)]/10 text-[var(--kyro-primary)] hover:bg-[var(--kyro-primary)]/20 transition-colors"
+            >
+              <Copy className="w-4 h-4" />
+              Copy Details
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/blocks/HeadingSubheadingBlock.tsx

@@ -22,8 +22,8 @@ export const HeadingSubheadingBlock: React.FC<{ block: Record<string, unknown>;
   return (
     <BlockWrapper id={block.id} type="heading-subheading" label="Heading + Subheading">
       <HeadingSubheadingField
-        heading={data.heading || ""}
-        subheading={data.subheading || ""}
+        heading={data.title || ""}
+        subheading={data.subtitle || ""}
         onChange={handleChange}
         compact
       />

package/src/components/blocks/HeroBlock.tsx

@@ -60,8 +60,8 @@ export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number
 
       <div className="space-y-3">
         <HeroField
-          heading={data.heading || ""}
-          subheading={data.subheading || ""}
+          heading={data.title || ""}
+          subheading={data.subtitle || ""}
           ctaText={data.ctaText || ""}
           ctaUrl={data.ctaUrl || ""}
           onChange={handleChange}

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 {
@@ -58,7 +59,7 @@ function getBlockPreviewSnippet(
       }
     }
   }
-  return data.heading || data.title || data.text || data.name || data.label || data.sectionTitle || "";
+  return data.title || data.text || data.name || data.label || "";
 }
 
 // Sortable block wrapper for drag-and-drop
@@ -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

package/src/components/fields/HeadingSubheadingField.tsx

@@ -26,13 +26,13 @@ export const HeadingSubheadingField: React.FC<HeadingSubheadingFieldProps> = ({
       <input
         type="text"
         value={heading}
-        onChange={(e) => onChange("heading", e.target.value)}
+        onChange={(e) => onChange("title", e.target.value)}
         className={`${inputClass} font-bold text-base`}
         placeholder="Heading..."
       />
       <textarea
         value={subheading}
-        onChange={(e) => onChange("subheading", e.target.value)}
+        onChange={(e) => onChange("subtitle", e.target.value)}
         className={textareaClass}
         placeholder="Subheading..."
       />

package/src/components/fields/HeroField.tsx

@@ -31,13 +31,13 @@ export const HeroField: React.FC<HeroFieldProps> = ({
         <input
           type="text"
           value={heading}
-          onChange={(e) => onChange("heading", e.target.value)}
+          onChange={(e) => onChange("title", e.target.value)}
           className={`${inputClass} font-bold text-base`}
           placeholder="Hero heading..."
         />
         <textarea
           value={subheading}
-          onChange={(e) => onChange("subheading", e.target.value)}
+          onChange={(e) => onChange("subtitle", e.target.value)}
           className={textareaClass}
           placeholder="Hero subheading..."
         />
@@ -67,13 +67,13 @@ export const HeroField: React.FC<HeroFieldProps> = ({
       <input
         type="text"
         value={heading}
-        onChange={(e) => onChange("heading", e.target.value)}
+        onChange={(e) => onChange("title", e.target.value)}
         className={`${inputClass} font-bold text-base`}
         placeholder="Hero heading..."
       />
       <textarea
         value={subheading}
-        onChange={(e) => onChange("subheading", e.target.value)}
+        onChange={(e) => onChange("subtitle", e.target.value)}
         className={textareaClass}
         placeholder="Hero subheading..."
       />

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/RelationshipField.tsx

@@ -43,11 +43,11 @@ interface ResolvedDoc {
 }
 
 function getLabel(opt: Record<string, unknown>): string {
-  const mainTabs = opt?.mainTabs as Record<string, unknown> | undefined;
+  const tabs = opt?.tabs as Record<string, unknown> | undefined;
 
   return (
     (opt?.title as string) ||
-    (mainTabs?.title as string) ||
+    (tabs?.title as string) ||
     (opt?.name as string) ||
     (opt?.label as string) ||
     (opt?.email as string) ||

package/src/components/fields/UploadField.tsx

@@ -186,12 +186,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]);

package/src/components/fields/extensions/blocksStore.ts

@@ -157,7 +157,7 @@ export function createNewBlock(type: string): BlockData {
 function getDefaultData(type: string): Record<string, unknown> {
   const defaults: Record<string, unknown> = {
     heading: { level: 1, text: "" },
-    "heading-subheading": { heading: "", subheading: "" },
+    "heading-subheading": { title: "", subtitle: "" },
     hero: { isMultiScreen: false },
     card: { title: "", description: "", icon: "", link: "", linkText: "", isMultiCard: false },
     paragraph: { text: "" },

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