@kyro-cms/admin 0.12.1 → 0.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.12.1",
+  "version": "0.12.4",
   "engines": {
     "node": ">=22"
   },
@@ -128,4 +128,4 @@
     "type": "git",
     "url": "https://github.com/danielDozie/kyro-cms"
   }
-}
+}

package/src/components/AutoForm.tsx

@@ -568,7 +568,7 @@ export function AutoForm({
         const result = await response.json();
         const savedData = result.data || data;
         setFormData({ ...formData, ...savedData });
-        setLastSavedData({ ...formData, ...savedData });
+        markSaved();
         lastAutoSaveTimeRef.current = Date.now();
         setAutoSaveStatus("success");
         setLocalSaveStatus("saved");
@@ -631,7 +631,7 @@ export function AutoForm({
         const result = await response.json();
         const savedData = result.data || data;
         setFormData({ ...formData, ...savedData });
-        setLastSavedData({ ...formData, ...savedData });
+        markSaved();
         dataToPublish = { ...formData, ...savedData };
       }
 
@@ -640,8 +640,17 @@ export function AutoForm({
       const response = await saveDocument(data, false);
 
       if (response?.ok) {
+        const result = await response.json().catch(() => ({}));
+        const savedData = result.data || data;
+        setFormData({ ...formData, ...savedData });
+        markSaved();
         setLocalSaveStatus("saved");
         onActionSuccess?.("Published successfully");
+        
+        setTimeout(() => {
+          setLocalSaveStatus("idle");
+        }, 2000);
+
         if (isNewDoc && !globalSlug && dataToPublish.id) {
           setTimeout(() => {
             window.location.href = `${ADMIN_BASE}/${collectionSlug}/${dataToPublish.id}`;

package/src/components/DetailView.tsx

@@ -10,6 +10,7 @@ import { ActionBar, type DocumentStatus, type SaveStatus } from "./ActionBar";
 import { Spinner } from "./ui/Spinner";
 import { Shimmer } from "./ui/Shimmer";
 import { useUIStore, toast } from "../lib/stores";
+import { useAutoFormStore } from "../lib/autoform-store";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
 import { SplitButton } from "./ui/SplitButton";
@@ -53,6 +54,10 @@ export function DetailView({
   const [updatedAt, setUpdatedAt] = useState<string | null>(null);
   const [publishedAt, setPublishedAt] = useState<string | null>(null);
   const [justSaved, setJustSaved] = useState(false);
+  const showPreview = useAutoFormStore((state) => state.showPreview);
+  const setShowPreview = useAutoFormStore((state) => state.setShowPreview);
+  const previewUrl = useAutoFormStore((state) => state.previewUrl);
+  const setPreviewUrl = useAutoFormStore((state) => state.setPreviewUrl);
 
   const fields = global?.fields || collection?.fields || [];
   const label = global?.label || collection?.label || "Document";
@@ -162,7 +167,12 @@ export function DetailView({
         setTimeout(() => {
           setSaveStatus("idle");
         }, 2000);
-      } catch {
+        
+        if (showPreview) {
+          refreshPreviewUrl(savedData);
+        }
+
+      } catch (e: any) {
         setSaveStatus("error");
         if (!isAutosave) {
           onError("Failed to save changes");
@@ -284,7 +294,37 @@ export function DetailView({
       }
     });
   };
+  const refreshPreviewUrl = async (docData: any = data) => {
+    try {
+      const endpoint = mode === "global" ? `/api/globals/${slug}/preview-url` : `/api/${slug}/preview-url`;
+      console.log("[Kyro Preview] Calling endpoint:", endpoint, "with data keys:", Object.keys(docData || {}), "documentId:", documentId);
+      const res = await apiPost(endpoint, { ...docData, id: documentId }, { autoToast: false });
+      console.log("[Kyro Preview] Response:", JSON.stringify(res));
+      if (res && (res as any).url) {
+        console.log("[Kyro Preview] Setting previewUrl:", (res as any).url);
+        setPreviewUrl((res as any).url);
+      } else {
+        console.warn("[Kyro Preview] No url in response:", res);
+      }
+    } catch (e: any) {
+      console.error("[Kyro Preview] Error:", e.message, e);
+      toast.error(e.message || "Failed to generate preview URL");
+    }
+  };
+
+  useEffect(() => {
+    if (showPreview) {
+      refreshPreviewUrl(data);
+    }
+  }, [showPreview]);
 
+  const togglePreview = () => {
+    const nextState = !showPreview;
+    setShowPreview(nextState);
+    if (nextState) {
+      refreshPreviewUrl(data);
+    }
+  };
   if (loading) {
     return (
       <div className="kyro-detail">
@@ -344,9 +384,7 @@ export function DetailView({
         onViewHistory={() => {
           window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
         }}
-        onPreview={() =>
-          window.open(`/preview/${slug}/${documentId}`, "_blank")
-        }
+        onPreview={togglePreview}
         onDelete={handleDeleteTrigger}
         onBack={onBack}
         onToggleSidebar={() => window.dispatchEvent(new CustomEvent("toggle-sidebar"))}
@@ -356,12 +394,14 @@ export function DetailView({
 
       <div
         className={
-          isSingleLayout
-            ? "w-full pt-4 md:pt-8"
-            : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4 md:gap-8 pt-4 md:pt-0"
+          showPreview
+            ? "w-full mx-auto grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 pt-4 md:pt-0 h-[calc(100vh-140px)]"
+            : isSingleLayout
+              ? "w-full pt-4 md:pt-8"
+              : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4 md:gap-8 pt-4 md:pt-0"
         }
       >
-        <div className="space-y-4 md:space-y-8 min-w-0">
+        <div className={`space-y-4 md:space-y-8 min-w-0 ${showPreview ? "overflow-y-auto pr-2 pb-20" : ""}`}>
           <div className="surface-tile p-4 md:p-8">
             <div className="flex items-center justify-between mb-8 px-1">
               <h2 className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
@@ -409,7 +449,37 @@ export function DetailView({
           </div>
         </div>
 
-        {!isSingleLayout && (
+        {showPreview && (
+          <div className="surface-tile flex flex-col overflow-hidden h-full border border-[var(--kyro-border)] rounded-xl animate-in fade-in slide-in-from-right-4 duration-500 shadow-xl bg-white dark:bg-black">
+            <div className="bg-[var(--kyro-surface-accent)] border-b border-[var(--kyro-border)] p-2 flex items-center justify-between shrink-0">
+              <div className="flex items-center gap-2 pl-2">
+                <div className="w-3 h-3 rounded-full bg-red-400/80"></div>
+                <div className="w-3 h-3 rounded-full bg-amber-400/80"></div>
+                <div className="w-3 h-3 rounded-full bg-green-400/80"></div>
+              </div>
+              <div className="text-[10px] font-mono opacity-50 truncate max-w-[60%] bg-[var(--kyro-bg)] px-3 py-1 rounded">
+                {previewUrl || "Generating preview URL..."}
+              </div>
+              <div className="w-16"></div>
+            </div>
+            <div className="flex-1 bg-white relative">
+              {!previewUrl ? (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Spinner className="w-6 h-6 text-[var(--kyro-primary)]" />
+                </div>
+              ) : (
+                <iframe
+                  src={previewUrl}
+                  className="w-full h-full border-0 bg-white"
+                  title="Preview"
+                  sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+                />
+              )}
+            </div>
+          </div>
+        )}
+
+        {!isSingleLayout && !showPreview && (
           <div className="space-y-4 md:space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
             <div className="surface-tile p-4 md:p-8">
               <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-4 md:mb-6">
@@ -483,13 +553,15 @@ export function DetailView({
                 >
                   {isDuplicating ? "Duplicating..." : "Duplicate Document"}
                 </button>
-                <button
-                  type="button"
-                  onClick={() => window.open(`/preview/${slug}/${documentId}`, "_blank")}
-                  className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start"
-                >
-                  View Public Page
-                </button>
+                {previewUrl && (
+                  <button
+                    type="button"
+                    onClick={() => window.open(previewUrl, "_blank")}
+                    className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start"
+                  >
+                    Open Preview in New Tab
+                  </button>
+                )}
                 <button
                   type="button"
                   onClick={handleDeleteTrigger}

package/src/components/WebhookManager.tsx

@@ -17,6 +17,8 @@ import {
   ExternalLink,
   Zap,
   Shield,
+  Activity,
+  XCircle,
 } from "./ui/icons";
 import { useUIStore, toast } from "../lib/stores";
 import { Modal, ModalContent, ModalActions } from "./ui/Modal";
@@ -52,14 +54,25 @@ interface WebhookItem {
   action?: string;
   config?: Record<string, string>;
   lastTriggered?: string;
+  lastError?: string;
+  createdAt: string;
+}
+
+interface WebhookDelivery {
+  id: string;
+  webhookId: string;
+  event: string;
+  status: "pending" | "success" | "failed" | "retrying";
+  responseStatus?: number;
+  responseBody?: string;
+  error?: string;
+  duration?: number;
   createdAt: string;
 }
 
 const ACTION_ICONS: Record<string, string> = {
   generic: "🔗",
-  "github-dispatch": "⚙️",
-  "dokploy-deploy": "🚀",
-  "coolify-deploy": "🎯",
+  "github-push": "⚙️",
 };
 
 export function WebhookManager() {
@@ -97,6 +110,11 @@ export function WebhookManager() {
   });
   const [createError, setCreateError] = useState("");
 
+  const [showHistoryModal, setShowHistoryModal] = useState(false);
+  const [selectedWebhookId, setSelectedWebhookId] = useState<string | null>(null);
+  const [deliveryHistory, setDeliveryHistory] = useState<WebhookDelivery[]>([]);
+  const [loadingHistory, setLoadingHistory] = useState(false);
+
   useEffect(() => {
     loadActions();
   }, []);
@@ -168,9 +186,10 @@ export function WebhookManager() {
       await create(formData);
       resetCreateModal();
       toast.success(`Webhook created: ${formData.name}`);
-    } catch (e) {
-      setCreateError("Failed to create webhook");
-      toast.error("Failed to create webhook");
+    } catch (e: any) {
+      const errorMsg = e.message || "Failed to create webhook";
+      setCreateError(errorMsg);
+      toast.error(errorMsg);
     }
   };
 
@@ -204,6 +223,21 @@ export function WebhookManager() {
     }
   };
 
+  const handleViewHistory = async (id: string) => {
+    setSelectedWebhookId(id);
+    setShowHistoryModal(true);
+    setLoadingHistory(true);
+    try {
+      const data = await apiGet<{ docs: WebhookDelivery[] }>(`/api/webhooks/${id}/history`);
+      setDeliveryHistory(data.docs || []);
+    } catch (e) {
+      console.error("Failed to load history:", e);
+      toast.error("Failed to load delivery history");
+    } finally {
+      setLoadingHistory(false);
+    }
+  };
+
   const eventOptions = [
     {
       label: "Create",
@@ -359,11 +393,29 @@ export function WebhookManager() {
                             ? `Last triggered ${new Date(webhook.lastTriggered).toLocaleDateString()}`
                             : "Never triggered"}
                         </div>
+                        {webhook.lastError && (
+                          <div className="text-[10px] text-red-500/80 flex items-center gap-1.5 mt-1">
+                            <XCircle className="w-3 h-3" />
+                            <span className="truncate max-w-[150px]" title={webhook.lastError}>
+                              {webhook.lastError}
+                            </span>
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>
 
                   <div className="flex items-center gap-1.5 lg:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                    <button
+                      type="button"
+                      onClick={() => handleViewHistory(webhook.id)}
+                      className="p-2 rounded-lg border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] transition-colors flex items-center gap-1.5"
+                      title="View delivery history"
+                    >
+                      <Activity className="w-3.5 h-3.5" />
+                      <span className="text-[11px] font-medium hidden sm:inline">History</span>
+                    </button>
+
                     <button
                       type="button"
                       onClick={() => handleTest(webhook.id)}
@@ -418,7 +470,7 @@ export function WebhookManager() {
                     type="button"
                     key={key}
                     onClick={() => handleActionSelect(key)}
-                    className="flex flex-col items-start p-4 rounded-xl border border-[var(--kyro-border)] bg-[var(--kyro-surface)] hover:border-[var(--kyro-primary)]/40 transition-all text-left group"
+                    className="flex flex-col items-start p-4 rounded-md border border-[var(--kyro-border)] bg-[var(--kyro-surface)] hover:border-[var(--kyro-primary)]/40 transition-all text-left group"
                   >
                     <div className="text-lg mb-2">{ACTION_ICONS[key] || "🔗"}</div>
                     <h3 className="text-sm font-medium mb-0.5 group-hover:text-[var(--kyro-primary)] transition-colors">
@@ -680,6 +732,81 @@ export function WebhookManager() {
           </button>
         </ModalActions>
       </Modal>
+
+      {/* History Modal */}
+      <Modal
+        open={showHistoryModal}
+        onClose={() => setShowHistoryModal(false)}
+        title="Delivery History"
+      >
+        <ModalContent>
+          <div className="space-y-4">
+            {loadingHistory ? (
+              <div className="flex items-center justify-center p-12 opacity-50">
+                <RefreshCw className="w-5 h-5 animate-spin text-[var(--kyro-primary)]" />
+              </div>
+            ) : deliveryHistory.length === 0 ? (
+              <div className="text-center p-8 text-[var(--kyro-text-secondary)] opacity-60 text-sm">
+                No delivery history available for this webhook.
+              </div>
+            ) : (
+              <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-1">
+                {deliveryHistory.map((delivery) => (
+                  <div key={delivery.id} className="p-4 rounded-md border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-sm">
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center gap-2">
+                        {delivery.status === "success" ? (
+                          <CheckCircle2 className="w-4 h-4 text-green-500" />
+                        ) : (
+                          <XCircle className="w-4 h-4 text-red-500" />
+                        )}
+                        <span className="font-medium">{delivery.event}</span>
+                      </div>
+                      <span className="text-[10px] text-[var(--kyro-text-secondary)] opacity-50">
+                        {new Date(delivery.createdAt).toLocaleString()}
+                      </span>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4 text-xs text-[var(--kyro-text-secondary)] mb-3">
+                      <div>
+                        <span className="opacity-50">Status: </span>
+                        <span className={`font-medium ${delivery.status === "success" ? "text-green-500" : "text-red-500"}`}>
+                          {delivery.responseStatus || delivery.status}
+                        </span>
+                      </div>
+                      <div>
+                        <span className="opacity-50">Duration: </span>
+                        {delivery.duration ? `${delivery.duration}ms` : "-"}
+                      </div>
+                    </div>
+
+                    {delivery.error && (
+                      <div className="text-xs text-red-500 bg-red-500/5 p-2 rounded border border-red-500/10 font-mono break-all mb-2">
+                        {delivery.error}
+                      </div>
+                    )}
+
+                    {delivery.responseBody && (
+                      <div className="text-[10px] font-mono bg-[var(--kyro-bg)] p-2 rounded border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] opacity-70 max-h-24 overflow-y-auto break-all">
+                        {delivery.responseBody}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </ModalContent>
+        <ModalActions>
+          <button
+            type="button"
+            onClick={() => setShowHistoryModal(false)}
+            className="w-full py-2.5 rounded-lg text-sm font-medium bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] hover:bg-[var(--kyro-surface)] transition-colors"
+          >
+            Close
+          </button>
+        </ModalActions>
+      </Modal>
     </div>
   );
 }

package/src/components/autoform/AutoFormEditView.tsx

@@ -15,7 +15,7 @@ export function AutoFormEditView({
   collectionSlug,
   renderField,
 }: AutoFormEditViewProps) {
-  const { showPreview, sidebarCollapsed, formData } = useAutoFormStore();
+  const { showPreview, sidebarCollapsed, formData, previewUrl } = useAutoFormStore();
 
   if (layout === "single") {
     return (
@@ -65,7 +65,7 @@ export function AutoFormEditView({
               </span>
             </div>
             <iframe
-              src={`/${collectionSlug}/${formData.slug || formData.id}?preview=true`}
+              src={previewUrl || ""}
               className="w-full h-full border-none"
               title="Live Preview"
             />

package/src/components/fields/AccordionField.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { ChevronDown, ChevronUp, Plus, X } from "../ui/icons";
+import React, { useState, useCallback } from "react";
+import { ChevronDown, ChevronUp, Plus, X, Copy, ClipboardPaste, Check } from "../ui/icons";
 
 interface AccordionItem {
   title: string;
@@ -17,7 +17,56 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
   onChange,
   compact = false,
 }) => {
-  const [openIndex, setOpenIndex] = React.useState<number | null>(0);
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const payload = JSON.stringify({ __kyro_accordion: true, items });
+      await navigator.clipboard.writeText(payload);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy", err);
+    }
+  }, [items]);
+
+  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_accordion && Array.isArray(parsed.items)) {
+        onChange([...items, ...parsed.items]);
+      }
+    } catch (err) {
+      console.error("Failed to paste", err);
+    }
+  }, [items, onChange]);
+
+  const headerControls = (
+    <div className="flex justify-end gap-1 mb-2">
+      <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 Items"
+      >
+        {copied ? <Check className="w-3.5 h-3.5 text-green-500" /> : <Copy className="w-3.5 h-3.5" />}
+      </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 Items"
+      >
+        <ClipboardPaste className="w-3.5 h-3.5" />
+      </button>
+    </div>
+  );
 
   const handleTitleChange = (index: number, value: string) => {
     const newItems = [...items];
@@ -52,6 +101,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
   if (compact) {
     return (
       <div className="space-y-2">
+        {headerControls}
         {items.length === 0 ? (
           <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-md">
             No items. Click "Add Item" to create one.
@@ -134,6 +184,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
 
   return (
     <div className="space-y-2">
+      {headerControls}
       {items.length === 0 ? (
         <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-md">
           No items. Click "Add Item" to create one.

package/src/components/fields/BlocksField.tsx

@@ -14,6 +14,8 @@ import {
 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,
@@ -499,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));
@@ -521,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);
     }
@@ -569,6 +571,33 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
     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);
@@ -689,7 +718,12 @@ 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}

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