@kyro-cms/admin 0.11.3 → 0.11.5

package/src/components/MediaGallery.tsx

@@ -5,7 +5,6 @@ import { Spinner } from "./ui/Spinner";
 import { Shimmer } from "./ui/Shimmer";
 import { SlidePanel } from "./ui/SlidePanel";
 import { Modal } from "./ui/Modal";
-import { Pagination } from "./ui/Pagination";
 import { Badge } from "./ui/Badge";
 import { Folder } from "./ui/icons";
 
@@ -26,13 +25,7 @@ import {
   Archive,
 } from "./ui/icons";
 import { PromptModal } from "./ui/PromptModal";
-import ReactCrop, {
-  type Crop,
-  centerCrop,
-  makeAspectCrop,
-  convertToPixelCrop,
-} from "react-image-crop";
-import "react-image-crop/dist/ReactCrop.css";
+import { ImageFocalEditor } from "./ui/ImageFocalEditor";
 import {
   apiGet,
   apiPost,
@@ -56,6 +49,11 @@ interface MediaItem {
   folder?: string;
   alt?: string;
   caption?: string;
+  metadata?: {
+    crop?: { x: number; y: number; width: number; height: number };
+    hotspot?: { x: number; y: number; width: number; height: number };
+    [key: string]: any;
+  };
   createdAt: string;
   updatedAt?: string;
 }
@@ -133,6 +131,7 @@ export function MediaGallery({
 
   const [items, setItems] = useState<MediaItem[]>([]);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
   const [folders, setFolders] = useState<string[]>([]);
   const [currentFolder, setCurrentFolder] = useState<string>("");
   const [search, setSearch] = useState("");
@@ -160,14 +159,14 @@ export function MediaGallery({
   const [isDragging, setIsDragging] = useState(false);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [crop, setCrop] = useState<Crop>();
-  const imgRef = useRef<HTMLImageElement>(null);
 
-  const loadMedia = useCallback(async () => {
-    setLoading(true);
+  const loadMedia = useCallback(async (pageNum: number) => {
+    if (pageNum === 1) setLoading(true);
+    else setLoadingMore(true);
+
     try {
       const params = new URLSearchParams({
-        page: page.toString(),
+        page: pageNum.toString(),
         limit: limit.toString(),
       });
       if (currentFolder) params.append("folder", currentFolder);
@@ -175,18 +174,21 @@ export function MediaGallery({
       if (filter !== "all") params.append("type", filter);
 
       const result = await apiGet(withCacheBust(`/api/media?${params}`));
-      setItems((result.docs || []).map((doc: Record<string, unknown>) => ({
+      const newItems = (result.docs || []).map((doc: Record<string, unknown>) => ({
         ...doc,
-        type: getFileType(doc.mimeType),
-      })));
+        type: getFileType(doc.mimeType as string),
+      }));
+
+      setItems(prev => pageNum === 1 ? newItems : [...prev, ...newItems]);
       setTotal(result.totalDocs || 0);
       setTotalPages(result.totalPages || 1);
     } catch (error) {
       console.error("Failed to load media:", error);
     } finally {
       setLoading(false);
+      setLoadingMore(false);
     }
-  }, [page, currentFolder, search, filter]);
+  }, [currentFolder, search, filter, limit]);
 
   const loadFolders = useCallback(async () => {
     try {
@@ -220,8 +222,16 @@ export function MediaGallery({
   }, [pickerMode, storageConfigured, storageChecked]);
 
   useEffect(() => {
-    loadMedia();
-  }, [loadMedia]);
+    setPage(1);
+    loadMedia(1);
+  }, [currentFolder, search, filter, loadMedia]);
+
+  const handleLoadMore = () => {
+    if (loadingMore || page >= totalPages) return;
+    const nextPage = page + 1;
+    setPage(nextPage);
+    loadMedia(nextPage);
+  };
 
   useEffect(() => {
     loadFolders();
@@ -271,7 +281,8 @@ export function MediaGallery({
 
     setUploading(false);
     setUploadProgress({});
-    loadMedia();
+    setPage(1);
+    loadMedia(1);
     loadFolders();
     if (failCount > 0) {
       toast.error(`${failCount} file(s) failed to upload`);
@@ -292,7 +303,8 @@ export function MediaGallery({
             await apiDelete(`/api/media/${id}`);
           }
           setSelectedIds(new Set());
-          loadMedia();
+          setPage(1);
+          loadMedia(1);
           toast.success(`${selectedIds.size} item(s) deleted`);
         } catch (error) {
           console.error("Bulk delete failed:", error);
@@ -337,7 +349,8 @@ export function MediaGallery({
           await apiDelete(`/api/media/folders?path=${encodeURIComponent(folder)}`);
           if (currentFolder === folder) setCurrentFolder("");
           loadFolders();
-          loadMedia();
+          setPage(1);
+          loadMedia(1);
           toast.success(`Folder "${folder}" deleted`);
         } catch (error) {
           console.error("Failed to delete folder:", error);
@@ -361,66 +374,24 @@ export function MediaGallery({
     }
   };
 
-  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
-    const { width, height } = e.currentTarget;
-    const initialCrop = centerCrop(
-      makeAspectCrop({ unit: "%", width: 90 }, 1, width, height),
-      width,
-      height,
-    );
-    setCrop(initialCrop);
-  };
-
-  const onCropComplete = async () => {
-    if (!crop || !imgRef.current || !panelItem) return;
-
-    setUploading(true);
+  const handleSaveCropHotspot = async (cropData: any, hotspotData: any) => {
+    if (!panelItem) return;
     try {
-      const pixelCrop = convertToPixelCrop(
-        crop,
-        imgRef.current.width,
-        imgRef.current.height,
-      );
-
-      const canvas = document.createElement("canvas");
-      const scaleX = imgRef.current.naturalWidth / imgRef.current.width;
-      const scaleY = imgRef.current.naturalHeight / imgRef.current.height;
-
-      canvas.width = pixelCrop.width;
-      canvas.height = pixelCrop.height;
-      const ctx = canvas.getContext("2d");
-
-      if (ctx) {
-        ctx.drawImage(
-          imgRef.current,
-          pixelCrop.x * scaleX,
-          pixelCrop.y * scaleY,
-          pixelCrop.width * scaleX,
-          pixelCrop.height * scaleY,
-          0,
-          0,
-          pixelCrop.width,
-          pixelCrop.height,
-        );
-
-        const blob = await new Promise<Blob | null>((resolve) =>
-          canvas.toBlob(resolve, panelItem.mimeType),
-        );
-
-        if (blob) {
-          const formData = new FormData();
-          formData.append("file", blob, `cropped-${panelItem.filename}`);
-          if (currentFolder) formData.append("folder", currentFolder);
-
-          await apiUpload("/api/media", formData);
-          loadMedia();
-          setShowCrop(false);
-          toast.success("Cropped image saved");
-        }
-      }
+      setUploading(true);
+      const metadata = {
+        ...panelItem.metadata,
+        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");
     } catch (err) {
-      console.error("Crop failed:", err);
-      toast.error("Crop failed");
+      console.error("Save failed:", err);
+      toast.error("Failed to save focal metadata");
     } finally {
       setUploading(false);
     }
@@ -598,7 +569,7 @@ export function MediaGallery({
         )}
 
         {/* Main Content Area */}
-        <div className="flex-1 flex flex-col min-h-0 bg-[var(--kyro-bg)]">
+        <div className="flex-1 flex flex-col min-h-0 min-w-0 bg-[var(--kyro-bg)]">
           <div className={`flex-1 overflow-y-auto custom-scrollbar ${pickerMode ? "px-2 py-4" : "py-4 px-2 md:py-8 md:px-4"}`}>
             {loading ? (
               <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
@@ -782,13 +753,26 @@ export function MediaGallery({
                 </table>
               </div>
             )}
-          </div>
 
-          <Pagination
-            page={page}
-            totalPages={totalPages}
-            onPageChange={setPage}
-          />
+            {/* Load More Button */}
+            {!loading && page < totalPages && (
+              <div className="flex justify-center mt-8 pb-8">
+                <button
+                  onClick={handleLoadMore}
+                  disabled={loadingMore}
+                  className="px-8 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-xs hover:scale-105 active:scale-95 transition-all shadow-xl disabled:opacity-50 flex items-center gap-2"
+                >
+                  {loadingMore ? (
+                    <>
+                      <Spinner size="sm" /> Loading...
+                    </>
+                  ) : (
+                    "Load More"
+                  )}
+                </button>
+              </div>
+            )}
+          </div>
         </div>
       </div>
 
@@ -1191,7 +1175,7 @@ export function MediaGallery({
         </Modal>
       )}
 
-      {/* Crop Modal */}
+      {/* Focal Editor Modal */}
       {!pickerMode && showCrop && panelItem && (
         <Modal
           open={showCrop}
@@ -1200,41 +1184,14 @@ export function MediaGallery({
           size="full"
           variant="lightbox"
         >
-          <div className="flex flex-col h-full p-8">
-            <div className="flex items-center justify-between mb-8">
-              <h3 className="text-white font-bold text-2xl tracking-tighter">
-                Crop Image
-              </h3>
-              <div className="flex gap-3">
-                <button
-                  type="button"
-                  onClick={() => setShowCrop(false)}
-                  className="px-4 py-2 border border-white/20 text-white/80 hover:bg-white/10 rounded-lg font-bold text-sm transition-colors"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="button"
-                  disabled={uploading}
-                  onClick={onCropComplete}
-                  className="px-4 py-2 bg-[var(--kyro-sidebar-active)] hover:opacity-90 text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm transition-colors"
-                >
-                  {uploading ? "Saving..." : "Save Crop"}
-                </button>
-              </div>
-            </div>
-            <div className="flex-1 w-full flex items-center justify-center overflow-auto">
-              <ReactCrop crop={crop} onChange={(c) => setCrop(c)}>
-                <img
-                  ref={imgRef}
-                  src={panelItem.url}
-                  alt="Crop preview"
-                  className="max-h-[70vh] object-contain"
-                  onLoad={onImageLoad}
-                />
-              </ReactCrop>
-            </div>
-          </div>
+          <ImageFocalEditor
+            url={getAbsoluteUrl(panelItem.url)}
+            initialCrop={panelItem.metadata?.crop}
+            initialHotspot={panelItem.metadata?.hotspot}
+            onSave={handleSaveCropHotspot}
+            onCancel={() => setShowCrop(false)}
+            isSaving={uploading}
+          />
         </Modal>
       )}
       {!pickerMode && (

package/src/components/SessionsManager.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { apiGet, apiDelete } from "../lib/api";
 import { Shield, Monitor, Trash2, Clock, AlertTriangle, Info, LogOut, Globe, Activity, RefreshCcw, Smartphone, Laptop } from "./ui/icons";
 import { PageHeader } from "./ui/PageHeader";
+import toast from "react-hot-toast";
 import { Badge } from "./ui/Badge";
 
 interface Session {
@@ -53,8 +54,10 @@ export function SessionsManager() {
     try {
       await apiDelete(`/api/auth/sessions/${id}`);
       setSessions((p) => p.filter((s) => s.id !== id));
+      toast.success("Session revoked");
     } catch { 
       setError("Failed to revoke session"); 
+      toast.error("Failed to revoke session");
     } finally { 
       setRevokingId(null); 
     }
@@ -65,8 +68,10 @@ export function SessionsManager() {
     try {
       await apiDelete("/api/auth/sessions");
       setSessions((p) => p.filter((s) => s.currentSession));
+      toast.success("All other sessions revoked");
     } catch { 
       setError("Failed to revoke sessions"); 
+      toast.error("Failed to revoke sessions");
     } finally { 
       setRevokingAll(false); 
     }

package/src/components/Sidebar.astro

@@ -2,7 +2,7 @@
 import "../styles/main.css";
 import { nonAuthCollections } from "../lib/config";
 import { adminPath } from "../lib/paths";
-import { getSiteSettings } from "../lib/globals";
+import { getSiteSettings, getBrandSettings } from "../lib/globals";
 import * as Icons from "lucide-react";
 import { UserMenu } from "./UserMenu";
 
@@ -13,11 +13,14 @@ interface NavItem {
 }
 
 const siteSettings = await getSiteSettings({ request: Astro.request });
-const siteName = siteSettings?.siteName || "KYRO.";
-const siteLogo = siteSettings?.siteLogo;
-const logoWidth = siteSettings?.logo?.width;
-const logoHeight = siteSettings?.logo?.height;
-const logoAlt = siteSettings?.logo?.altText || siteName;
+const brandSettings = await getBrandSettings({ request: Astro.request });
+
+const siteName = siteSettings?.siteName || brandSettings?.companyInfo?.companyName || "KYRO.";
+const siteLogo = brandSettings?.identity?.primaryLogo;
+const darkLogo = brandSettings?.identity?.darkLogo;
+const logoWidth = siteLogo?.width || darkLogo?.width;
+const logoHeight = siteLogo?.height || darkLogo?.height;
+const logoAlt = siteLogo?.altText || darkLogo?.altText || siteName;
 
 interface Props {
   title: string;
@@ -97,17 +100,33 @@ function isActive(item: NavItem): boolean {
 >
   <div class="px-6 md:px-8 py-6 md:py-8 flex items-center justify-between gap-3">
     {
-      siteLogo ? (
-        <img
-          src={siteLogo.url}
-          alt={logoAlt}
-          style={{
-            width: logoWidth ? `${logoWidth}px` : "auto",
-            height: logoHeight ? `${logoHeight}px` : "32px",
-            objectFit: "contain",
-          }}
-          class="rounded-lg"
-        />
+      siteLogo || darkLogo ? (
+        <div class="flex items-center">
+          {siteLogo && (
+            <img
+              src={siteLogo.url}
+              alt={logoAlt}
+              style={{
+                width: logoWidth ? `${logoWidth}px` : "auto",
+                height: logoHeight ? `${logoHeight}px` : "32px",
+                objectFit: "contain",
+              }}
+              class={`rounded-lg ${darkLogo ? "block dark:hidden" : ""}`}
+            />
+          )}
+          {darkLogo && (
+            <img
+              src={darkLogo.url}
+              alt={logoAlt}
+              style={{
+                width: logoWidth ? `${logoWidth}px` : "auto",
+                height: logoHeight ? `${logoHeight}px` : "32px",
+                objectFit: "contain",
+              }}
+              class={`rounded-lg ${siteLogo ? "hidden dark:block" : ""}`}
+            />
+          )}
+        </div>
       ) : (
         <span class="text-2xl font-black tracking-tighter text-[var(--kyro-text-primary)] ">
           {siteName}

package/src/components/autoform/AutoFormHeader.tsx

@@ -14,6 +14,7 @@ interface AutoFormHeaderProps {
   documentStatus: string;
   hasUnpublishedChanges: boolean;
   localSaveStatus: "idle" | "saving" | "saved" | "error";
+  isDuplicating?: boolean;
   handleCreateNew: () => void;
   handleDuplicate: () => void;
   handleUnpublish: () => void;
@@ -28,6 +29,7 @@ export function AutoFormHeader({
   documentStatus,
   hasUnpublishedChanges,
   localSaveStatus,
+  isDuplicating,
   handleCreateNew,
   handleDuplicate,
   handleUnpublish,
@@ -221,6 +223,7 @@ export function AutoFormHeader({
       {!globalSlug && (
         <DropdownItem
           onClick={handleDuplicate}
+          disabled={isDuplicating}
           icon={
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
@@ -228,7 +231,7 @@ export function AutoFormHeader({
             </svg>
           }
         >
-          Duplicate
+          {isDuplicating ? "Duplicating..." : "Duplicate"}
         </DropdownItem>
       )}
       <DropdownItem
@@ -388,7 +391,7 @@ export function AutoFormHeader({
       </header>
 
       {/* DESKTOP HEADER */}
-      <header className="hidden md:flex surface-tile px-8 py-6 items-center justify-between sticky top-0 border-b border-[var(--kyro-border)] mb-8 bg-[var(--kyro-surface)] backdrop-blur-md">
+      <header className="hidden md:flex surface-tile px-8 py-6 items-center justify-between sticky top-0 border-b border-[var(--kyro-border)] mb-8 bg-[var(--kyro-surface)] z-50 backdrop-blur-md">
         <div className="flex flex-col gap-2 min-w-0">
           <div className="flex items-center gap-3 flex-wrap min-w-0">
             <a

package/src/components/fields/ArrayLayout.tsx

@@ -17,7 +17,7 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
-const SIMPLE_TYPES = new Set(["text", "textarea", "number", "checkbox", "select", "radio", "color", "email", "password", "code", "markdown", "upload"]);
+const SIMPLE_TYPES = new Set(["text", "number", "checkbox", "select", "radio", "color", "email", "password"]);
 
 interface ArrayLayoutProps {
   field: Field;
@@ -102,7 +102,7 @@ function SortableArrayItem({
         <span className="text-[10px] font-bold text-[var(--kyro-text-muted)] pt-2.5 min-w-[18px] text-center">
           {index + 1}
         </span>
-        <div className="flex-1 flex items-start gap-1.5 min-w-0">
+        <div className={`flex-1 min-w-0 ${((field as any).fields || []).length >= 3 ? "flex flex-col gap-1.5" : "flex items-start gap-1.5"}`}>
           {((field as any).fields || []).map((f: Field) => (
             <div key={f.name} className="flex-1 min-w-0">
               {renderField(f, item, onChangeItem)}

package/src/components/fields/SelectField.tsx

@@ -1,6 +1,9 @@
+import React, { useState, useEffect } from "react";
 import type { SelectField as SelectFieldType } from "@kyro-cms/core/client";
 import FieldLayout from "./FieldLayout";
 import { collections } from "../../lib/config";
+import { fetchWithAuth } from "../../lib/api";
+import { apiPath } from "../../lib/paths";
 
 interface SelectFieldComponentProps {
   field: SelectFieldType;
@@ -8,6 +11,10 @@ interface SelectFieldComponentProps {
   onChange?: (value: string | string[] | undefined) => void;
   error?: string;
   disabled?: boolean;
+  formData?: Record<string, unknown>;
+  siblingData?: Record<string, unknown>;
+  collectionSlug?: string;
+  globalSlug?: string;
 }
 
 export default function SelectField({
@@ -16,14 +23,71 @@ export default function SelectField({
   onChange,
   error,
   disabled,
+  formData,
+  siblingData,
+  collectionSlug,
+  globalSlug,
 }: SelectFieldComponentProps) {
   const isReadOnly =
     typeof field.admin?.readOnly === "function"
       ? false
       : Boolean(field.admin?.readOnly);
 
+  const [dynamicOptions, setDynamicOptions] = useState<Array<{ label: string; value: string }> | null>(null);
+
+  // Debounce stringify for formData to prevent infinite loops or excessive refetches
+  const formDataStr = JSON.stringify(formData || {});
+  const siblingDataStr = JSON.stringify(siblingData || {});
+
+  useEffect(() => {
+    if (field.options !== "__KYRO_DYNAMIC_OPTIONS__") return;
+    
+    const fetchOptions = async () => {
+      try {
+        let url = "";
+        if (collectionSlug) {
+          url = `${apiPath}/${collectionSlug}/dynamic-options/${field.name}`;
+        } else if (globalSlug) {
+          url = `${apiPath}/globals/${globalSlug}/dynamic-options/${field.name}`;
+        } else {
+          return;
+        }
+
+        const res = await fetchWithAuth(url, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ 
+            data: JSON.parse(formDataStr), 
+            siblingData: JSON.parse(siblingDataStr) 
+          }),
+        });
+        
+        if (res.ok) {
+          const json = await res.json();
+          if (json.options) {
+            setDynamicOptions(json.options);
+          }
+        }
+      } catch (err) {
+        console.error("Failed to fetch dynamic options:", err);
+      }
+    };
+
+    const timer = setTimeout(fetchOptions, 300);
+    return () => clearTimeout(timer);
+  }, [formDataStr, siblingDataStr, field.name, field.options, collectionSlug, globalSlug]);
+
   // Resolve dynamic options at runtime if configured
-  let options = field.options || [];
+  let options: Array<{ label: string; value: string }> = dynamicOptions || [];
+  
+  if (field.options !== "__KYRO_DYNAMIC_OPTIONS__") {
+    if (typeof field.options === "function") {
+      options = field.options({ data: formData || {}, siblingData: siblingData || {} });
+    } else if (Array.isArray(field.options)) {
+      options = field.options;
+    }
+  }
+
   if (field.dynamicOptions === "collections") {
     options = Object.keys(collections)
       .filter((slug) => slug !== "media")

package/src/components/fields/TabsLayout.tsx

@@ -52,7 +52,7 @@ export function TabsLayout({
         )}
       </div>
 
-      {currentTab?.label === "SEO" && (
+      {currentTab?.label === "SEO Settings" && (
         <div className="mt-12 pt-8 border-t border-[var(--kyro-border)]">
           <h4 className="text-[10px] font-bold text-[var(--kyro-text-secondary)]  tracking-[0.2em] mb-6 opacity-50">
             Live Google Preview