@kyro-cms/admin 0.12.0 → 0.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.12.0",
+  "version": "0.12.3",
   "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,
@@ -527,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");
@@ -590,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 };
       }
 
@@ -599,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}`;
@@ -706,23 +756,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/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.