@kyro-cms/admin 0.12.1 → 0.12.4

package/src/components/fields/TabsLayout.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import type { Field } from "@kyro-cms/core/client";
 import { SeoPreview } from "../ui/SeoPreview";
+import { Copy, ClipboardPaste, Check } from "../ui/icons";
 
 interface TabsLayoutProps {
   field: Field;
@@ -29,22 +30,72 @@ export function TabsLayout({
     ? (formData[field.name] as Record<string, unknown>) || {}
     : formData;
 
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const payload = JSON.stringify({ __kyro_container: true, value: tabData });
+      await navigator.clipboard.writeText(payload);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy", err);
+    }
+  }, [tabData]);
+
+  const handlePaste = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const text = await navigator.clipboard.readText();
+      const parsed = JSON.parse(text);
+      if (parsed && (parsed.__kyro_group || parsed.__kyro_container) && parsed.value) {
+        onTabDataChange({ ...tabData, ...parsed.value });
+      }
+    } catch (err) {
+      console.error("Failed to paste", err);
+    }
+  }, [tabData, onTabDataChange]);
+
   return (
     <div className="space-y-8">
-      <div className="flex items-center gap-2 border-b border-[var(--kyro-border)] mb-6 overflow-x-auto hide-scrollbar">
-        {fieldTabs.map((tab: { label: string }, index: number) => (
+      <div className="flex items-center justify-between border-b border-[var(--kyro-border)] mb-6">
+        <div className="flex items-center gap-2 overflow-x-auto hide-scrollbar">
+          {fieldTabs.map((tab: { label: string }, index: number) => (
+            <button
+              key={index}
+              type="button"
+              className={`px-6 py-3 text-sm  tracking-widest font-medium transition-all border-b-2 -mb-[1px] whitespace-nowrap ${
+                activeTab === index
+                  ? "border-[var(--kyro-primary)] text-[var(--kyro-primary)]"
+                  : "border-transparent text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] opacity-60 hover:opacity-100"
+              }`}
+              onClick={() => setActiveTab(index)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-1 pr-2">
           <button
-            key={index}
             type="button"
-            className={`px-6 py-3 text-sm  tracking-widest font-medium transition-all border-b-2 -mb-[1px] whitespace-nowrap ${activeTab === index
-              ? "border-[var(--kyro-primary)] text-[var(--kyro-primary)]"
-              : "border-transparent text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] opacity-60 hover:opacity-100"
-              }`}
-            onClick={() => setActiveTab(index)}
+            onClick={handleCopy}
+            className="p-1.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors rounded hover:bg-[var(--kyro-surface)]"
+            title="Copy Tab Data"
           >
-            {tab.label}
+            {copied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
           </button>
-        ))}
+          <button
+            type="button"
+            onClick={handlePaste}
+            className="p-1.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors rounded hover:bg-[var(--kyro-surface)]"
+            title="Paste Tab Data"
+          >
+            <ClipboardPaste className="w-4 h-4" />
+          </button>
+        </div>
       </div>
       <div className="space-y-6">
         {currentTab?.fields.map((f: Field) =>

package/src/components/fields/UploadField.tsx

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

package/src/components/ui/PageHeader.tsx

@@ -96,13 +96,12 @@ function ActionsSlot({ actions }: { actions: NonNullable<PageHeaderProps["action
             type="button"
             onClick={act.onClick}
             disabled={act.disabled}
-            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${
-              act.variant === "outline"
-                ? "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
-                : act.variant === "ghost"
+            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-all ${act.variant === "outline"
+              ? "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+              : act.variant === "ghost"
                 ? "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] shadow-none"
                 : "kyro-btn-primary hover:opacity-90"
-            } ${act.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${act.className || ""}`}
+              } ${act.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${act.className || ""}`}
           >
             {act.icon && <act.icon className="w-4 h-4" />}
             {act.label}
@@ -120,7 +119,7 @@ function SingleAction({ action }: { action: NonNullable<PageHeaderProps["action"
       type="button"
       onClick={action.onClick}
       disabled={action.disabled}
-      className={`kyro-btn kyro-btn-primary flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10 w-full lg:w-auto justify-center ${action.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${action.className || ""}`}
+      className={`kyro-btn kyro-btn-primary flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all w-full lg:w-auto justify-center ${action.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${action.className || ""}`}
     >
       {action.icon && <action.icon className="w-4 h-4" />}
       {action.label}

package/src/components/ui/SplitButton.tsx

@@ -33,7 +33,7 @@ export function SplitButton({
   const isPublishedIdle =
     status === "published" && !hasChanges && saveStatus !== "saving" && saveStatus !== "error";
 
-  const isDisabled = disabled || saveStatus === "saving" || isPublishedIdle;
+  const isDisabled = disabled || saveStatus === "saving" || isPublishedIdle || saveStatus === "saved";
 
   // ── button colour ──────────────────────────────────────────────────────────
   const btnBase =
@@ -41,7 +41,7 @@ export function SplitButton({
 
   const getBtnClass = () => {
     if (saveStatus === "saving") return `${btnBase} bg-[var(--kyro-primary)]/70 border-[var(--kyro-primary)]/70 text-[var(--kyro-sidebar-text-active)] cursor-wait`;
-    if (saveStatus === "saved")  return `${btnBase} bg-[var(--kyro-success)] border-[var(--kyro-success)] text-[var(--kyro-sidebar-text-active)]`;
+    if (saveStatus === "saved")  return `${btnBase} bg-[var(--kyro-gray-200)] border-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] cursor-not-allowed`;
     if (saveStatus === "error")  return `${btnBase} bg-[var(--kyro-error)]   border-[var(--kyro-error)]   text-[var(--kyro-sidebar-text-active)]`;
     if (isPublishedIdle)         return `${btnBase} bg-[var(--kyro-gray-200)] border-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] cursor-not-allowed`;
     // has changes → accent
@@ -53,7 +53,7 @@ export function SplitButton({
 
   const getChevronClass = () => {
     if (saveStatus === "saving") return `${chevronBase} bg-[var(--kyro-primary)]/70 text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-primary)]/70`;
-    if (saveStatus === "saved")  return `${chevronBase} bg-[var(--kyro-success)] text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-success)]`;
+    if (saveStatus === "saved")  return `${chevronBase} bg-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] border-[var(--kyro-gray-200)]`;
     if (saveStatus === "error")  return `${chevronBase} bg-[var(--kyro-error)]   text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-error)]`;
     if (isPublishedIdle)         return `${chevronBase} bg-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] border-[var(--kyro-gray-200)]`;
     return `${chevronBase} bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-hover)]`;
@@ -62,7 +62,7 @@ export function SplitButton({
   // ── label ──────────────────────────────────────────────────────────────────
   const getLabel = () => {
     if (saveStatus === "saving") return "Publishing...";
-    if (saveStatus === "saved")  return "Published ✓";
+    if (saveStatus === "saved")  return "Published";
     if (saveStatus === "error")  return "Retry";
     if (isPublishedIdle)         return "Published";
     return "Publish Changes";
@@ -78,7 +78,7 @@ export function SplitButton({
         className={`${getBtnClass()} ${!children ? "rounded-r-lg border-r border-[var(--kyro-border)]" : ""}`}
       >
         {saveStatus === "saving" && <Spinner size="sm" className="inline mr-1.5" />}
-        {isPublishedIdle && (
+        {(isPublishedIdle || saveStatus === "saved") && (
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="inline mr-1">
             <polyline points="20 6 9 17 4 12" />
           </svg>

package/src/lib/autoform-store.ts

@@ -4,6 +4,8 @@ import type { StateStorage } from "zustand/middleware";
 import { createStorage } from "unstorage";
 import indexedbDriver from "unstorage/drivers/indexedb";
 import type { Version } from "@kyro-cms/core/client";
+import { deepEqual, isEmpty } from "./deep-equal";
+import { normalizeUploadFields } from "./normalize-upload-fields";
 
 let storageInstance: ReturnType<typeof createStorage> | null = null;
 let storageReady = false;
@@ -85,6 +87,7 @@ interface AutoFormStore {
    versions: Version[];
    loadingVersions: boolean;
    showPreview: boolean;
+   previewUrl: string | null;
    isMenuOpen: boolean;
    hasUnsavedChanges: boolean;
    loadingFields: Record<string, boolean>;
@@ -116,6 +119,7 @@ interface AutoFormStore {
   setVersions: (versions: Version[]) => void;
   setLoadingVersions: (loading: boolean) => void;
   setShowPreview: (show: boolean | ((prev: boolean) => boolean)) => void;
+  setPreviewUrl: (url: string | null) => void;
   setIsMenuOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
   setHasUnsavedChanges: (hasChanges: boolean) => void;
   setLoadingFields: (fields: Record<string, boolean> | ((prev: Record<string, boolean>) => Record<string, boolean>)) => void;
@@ -185,6 +189,7 @@ export const useAutoFormStore = create<AutoFormStore>()(
       versions: [],
       loadingVersions: false,
       showPreview: false,
+      previewUrl: null,
       isMenuOpen: false,
       hasUnsavedChanges: false,
       loadingFields: {},
@@ -205,11 +210,15 @@ export const useAutoFormStore = create<AutoFormStore>()(
 
 
       // Field update actions
-setField: (field: string, value: unknown) => {
+        setField: (field: string, value: unknown) => {
          const state = get();
          const newDirty = new Set(state.dirtyFields);
-         // Mark dirty if value differs from last saved baseline
-         if (JSON.stringify(value) !== JSON.stringify(state.lastSavedData[field])) {
+         // Mark dirty if value differs from last saved baseline (normalized to strip full media details)
+         const normalizedValue = normalizeUploadFields(value);
+         const normalizedLastSaved = normalizeUploadFields(state.lastSavedData[field]);
+         if (isEmpty(normalizedValue) && isEmpty(normalizedLastSaved)) {
+           newDirty.delete(field);
+         } else if (!deepEqual(normalizedValue, normalizedLastSaved)) {
            newDirty.add(field);
          } else {
            newDirty.delete(field);
@@ -269,6 +278,7 @@ setField: (field: string, value: unknown) => {
           showPreview:
             typeof show === "function" ? show(state.showPreview) : show,
         })),
+      setPreviewUrl: (previewUrl) => set({ previewUrl }),
       setIsMenuOpen: (open) =>
         set((state) => ({
           isMenuOpen: typeof open === "function" ? open(state.isMenuOpen) : open,

package/src/lib/deep-equal.ts

@@ -0,0 +1,73 @@
+/**
+ * Performs a deep equality check between two values.
+ * Ignores the order of keys in objects.
+ */
+export function deepEqual(obj1: any, obj2: any): boolean {
+  if (obj1 === obj2) {
+    return true;
+  }
+
+  if (
+    typeof obj1 !== "object" ||
+    obj1 === null ||
+    typeof obj2 !== "object" ||
+    obj2 === null
+  ) {
+    return false;
+  }
+
+  if (Array.isArray(obj1) && Array.isArray(obj2)) {
+    if (obj1.length !== obj2.length) {
+      return false;
+    }
+    for (let i = 0; i < obj1.length; i++) {
+      if (!deepEqual(obj1[i], obj2[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  if (Array.isArray(obj1) || Array.isArray(obj2)) {
+    return false;
+  }
+
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  for (const key of keys1) {
+    if (!Object.prototype.hasOwnProperty.call(obj2, key)) {
+      return false;
+    }
+    if (!deepEqual(obj1[key], obj2[key])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Checks if a value is "empty-like" (undefined, null, empty string, false, empty array, or empty object).
+ * This helps prevent false dirty states when form fields initialize with default empty values.
+ */
+export function isEmpty(val: any): boolean {
+  if (val === undefined || val === null || val === "" || val === false) {
+    return true;
+  }
+  if (Array.isArray(val)) {
+    return val.length === 0;
+  }
+  if (typeof val === "object") {
+    if (Object.keys(val).length === 0) return true;
+    if (val.type === "doc" && Array.isArray(val.content)) {
+      return val.content.length === 0 || (val.content.length === 1 && val.content[0].type === "paragraph" && !val.content[0].content);
+    }
+  }
+  return false;
+}
+