@kyro-cms/admin 0.11.4 → 0.11.6

package/src/components/ui/ImageFocalEditor.tsx

@@ -0,0 +1,299 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import ReactCrop, { type Crop } from "react-image-crop";
+import "react-image-crop/dist/ReactCrop.css";
+import { Crop as CropIcon, MousePointerClick, RefreshCcw } from "./icons";
+
+interface RectPercent {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface ImageFocalEditorProps {
+  url: string;
+  initialCrop?: RectPercent;
+  initialHotspot?: RectPercent;
+  onSave: (crop: RectPercent | undefined, hotspot: RectPercent | undefined) => void;
+  onCancel: () => void;
+  isSaving?: boolean;
+}
+
+export function ImageFocalEditor({
+  url,
+  initialCrop,
+  initialHotspot,
+  onSave,
+  onCancel,
+  isSaving = false,
+}: ImageFocalEditorProps) {
+  const [mode, setMode] = useState<"crop" | "hotspot">("crop");
+  
+  const [crop, setCrop] = useState<Crop | undefined>(
+    initialCrop ? { unit: "%", ...initialCrop } : undefined
+  );
+  
+  const [hotspot, setHotspot] = useState<RectPercent>(
+    initialHotspot || { x: 40, y: 40, width: 20, height: 20 }
+  );
+  
+  const [showHotspot, setShowHotspot] = useState(!!initialHotspot);
+  const imgRef = useRef<HTMLImageElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Dragging logic for Hotspot
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState<string | null>(null);
+  const dragStartRef = useRef<{ x: number; y: number; hX: number; hY: number; hW: number; hH: number } | null>(null);
+
+  const handlePointerDown = (e: React.PointerEvent, resizeType?: string) => {
+    if (mode !== "hotspot") return;
+    e.stopPropagation();
+    e.preventDefault();
+    
+    if (resizeType) {
+      setIsResizing(resizeType);
+    } else {
+      setIsDragging(true);
+    }
+    
+    dragStartRef.current = {
+      x: e.clientX,
+      y: e.clientY,
+      hX: hotspot.x,
+      hY: hotspot.y,
+      hW: hotspot.width,
+      hH: hotspot.height,
+    };
+  };
+
+  const handlePointerMove = useCallback((e: PointerEvent) => {
+    if (!dragStartRef.current || !imgRef.current) return;
+    
+    const imgRect = imgRef.current.getBoundingClientRect();
+    const dx = ((e.clientX - dragStartRef.current.x) / imgRect.width) * 100;
+    const dy = ((e.clientY - dragStartRef.current.y) / imgRect.height) * 100;
+    
+    const start = dragStartRef.current;
+    
+    if (isDragging) {
+      let newX = start.hX + dx;
+      let newY = start.hY + dy;
+      
+      // Constrain to bounds
+      newX = Math.max(0, Math.min(newX, 100 - start.hW));
+      newY = Math.max(0, Math.min(newY, 100 - start.hH));
+      
+      setHotspot(prev => ({ ...prev, x: newX, y: newY }));
+    } else if (isResizing) {
+      let newX = start.hX;
+      let newY = start.hY;
+      let newW = start.hW;
+      let newH = start.hH;
+      
+      if (isResizing.includes("e")) newW = start.hW + dx;
+      if (isResizing.includes("w")) { newX = start.hX + dx; newW = start.hW - dx; }
+      if (isResizing.includes("s")) newH = start.hH + dy;
+      if (isResizing.includes("n")) { newY = start.hY + dy; newH = start.hH - dy; }
+      
+      // Minimum size and constrain bounds
+      if (newW < 5) { newW = 5; if (isResizing.includes("w")) newX = start.hX + start.hW - 5; }
+      if (newH < 5) { newH = 5; if (isResizing.includes("n")) newY = start.hY + start.hH - 5; }
+      
+      newX = Math.max(0, Math.min(newX, 100 - newW));
+      newY = Math.max(0, Math.min(newY, 100 - newH));
+      newW = Math.min(newW, 100 - newX);
+      newH = Math.min(newH, 100 - newY);
+      
+      setHotspot({ x: newX, y: newY, width: newW, height: newH });
+    }
+  }, [isDragging, isResizing, hotspot]);
+
+  const handlePointerUp = useCallback(() => {
+    setIsDragging(false);
+    setIsResizing(null);
+    dragStartRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    if (isDragging || isResizing) {
+      window.addEventListener("pointermove", handlePointerMove);
+      window.addEventListener("pointerup", handlePointerUp);
+    }
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [isDragging, isResizing, handlePointerMove, handlePointerUp]);
+
+  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    // Optional: init defaults here if needed
+  };
+
+  const handleSave = () => {
+    const finalCrop = crop?.width && crop?.height 
+      ? { x: crop.x, y: crop.y, width: crop.width, height: crop.height }
+      : undefined;
+      
+    const finalHotspot = showHotspot ? hotspot : undefined;
+    
+    onSave(finalCrop, finalHotspot);
+  };
+
+  const handleReset = () => {
+    setCrop(undefined);
+    setShowHotspot(false);
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-[var(--kyro-bg)]">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between p-4 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setMode("crop")}
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold transition-all ${
+              mode === "crop" 
+                ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]" 
+                : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+            }`}
+          >
+            <CropIcon className="w-4 h-4" />
+            Crop
+          </button>
+          <button
+            onClick={() => {
+              setMode("hotspot");
+              if (!showHotspot) setShowHotspot(true);
+            }}
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold transition-all ${
+              mode === "hotspot" 
+                ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]" 
+                : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+            }`}
+          >
+            <MousePointerClick className="w-4 h-4" />
+            Hotspot
+          </button>
+          
+          <div className="w-px h-6 bg-[var(--kyro-border)] mx-2"></div>
+          
+          <button
+            onClick={handleReset}
+            className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-all"
+          >
+            <RefreshCcw className="w-4 h-4" />
+            Reset
+          </button>
+        </div>
+        
+        <div className="flex items-center gap-3">
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 text-sm font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={isSaving}
+            className="flex items-center justify-center min-w-[120px] px-6 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] text-sm font-bold rounded-lg shadow-lg hover:opacity-90 transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isSaving ? (
+              <svg className="animate-spin h-4 w-4 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            ) : (
+              "Save Edits"
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Editor Area */}
+      <div className="flex-1 w-full flex items-center justify-center p-8 overflow-hidden relative select-none">
+        <div className="relative max-w-full max-h-full flex items-center justify-center" ref={containerRef}>
+          <ReactCrop
+            crop={crop}
+            onChange={(c, pc) => setCrop(pc)} // Save percentage crop
+            locked={mode === "hotspot"}
+            className={mode === "hotspot" ? "opacity-70 transition-opacity" : "transition-opacity"}
+          >
+            <img
+              ref={imgRef}
+              src={url}
+              alt="Focal Editor"
+              className="max-h-[70vh] object-contain pointer-events-none"
+              onLoad={onImageLoad}
+            />
+          </ReactCrop>
+          
+          {/* Hotspot Overlay */}
+          {showHotspot && imgRef.current && (
+            <div
+              className="absolute inset-0 z-10 pointer-events-none flex items-center justify-center"
+            >
+              {/* Overlay that matches the image dimensions exactly */}
+              <div 
+                className="relative" 
+                style={{ 
+                  width: imgRef.current.width, 
+                  height: imgRef.current.height 
+                }}
+              >
+                <div
+                  className={`absolute border-2 shadow-2xl transition-colors duration-200 ${
+                    mode === "hotspot" 
+                      ? "border-blue-500 bg-blue-500/20 cursor-move pointer-events-auto shadow-blue-500/50" 
+                      : "border-blue-500/50 bg-blue-500/10 pointer-events-none"
+                  }`}
+                  style={{
+                    left: `${hotspot.x}%`,
+                    top: `${hotspot.y}%`,
+                    width: `${hotspot.width}%`,
+                    height: `${hotspot.height}%`,
+                    borderRadius: "50%",
+                  }}
+                  onPointerDown={(e) => handlePointerDown(e)}
+                >
+                  {/* Center dot */}
+                  <div className="absolute top-1/2 left-1/2 w-2 h-2 -ml-1 -mt-1 bg-blue-500 rounded-full"></div>
+                  
+                  {/* Resize handles */}
+                  {mode === "hotspot" && (
+                    <>
+                      <div 
+                        className="absolute top-0 left-1/2 w-4 h-4 -ml-2 -mt-2 bg-blue-500 rounded-full cursor-ns-resize"
+                        onPointerDown={(e) => handlePointerDown(e, "n")}
+                      />
+                      <div 
+                        className="absolute bottom-0 left-1/2 w-4 h-4 -ml-2 -mb-2 bg-blue-500 rounded-full cursor-ns-resize"
+                        onPointerDown={(e) => handlePointerDown(e, "s")}
+                      />
+                      <div 
+                        className="absolute top-1/2 left-0 w-4 h-4 -ml-2 -mt-2 bg-blue-500 rounded-full cursor-ew-resize"
+                        onPointerDown={(e) => handlePointerDown(e, "w")}
+                      />
+                      <div 
+                        className="absolute top-1/2 right-0 w-4 h-4 -mr-2 -mt-2 bg-blue-500 rounded-full cursor-ew-resize"
+                        onPointerDown={(e) => handlePointerDown(e, "e")}
+                      />
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+      
+      {/* Help Text */}
+      <div className="p-4 text-center bg-[var(--kyro-surface-accent)] border-t border-[var(--kyro-border)] text-sm text-[var(--kyro-text-secondary)]">
+        {mode === "crop" 
+          ? "Drag to define the crop area. This creates a bounding box for the image."
+          : "Drag the circle to define the focal hotspot. This area will always remain visible when the image is resized."}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/Modal.tsx

@@ -59,7 +59,7 @@ export function Modal({
   const isLightbox = variant === "lightbox";
 
   return createPortal(
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[999999] flex items-center justify-center p-4">
       <div
         className={`absolute inset-0 transition-all duration-500 ${isLightbox ? "bg-black/95 backdrop-blur-none" : "bg-[var(--kyro-black)]/40 backdrop-blur-md"}`}
         onClick={onClose}

package/src/components/ui/PageHeader.tsx

@@ -13,6 +13,7 @@ interface Action {
   icon?: ComponentType<SVGAttributes<SVGSVGElement>>;
   variant?: "primary" | "outline" | "ghost";
   className?: string;
+  disabled?: boolean;
 }
 
 interface PageHeaderProps {
@@ -94,13 +95,14 @@ function ActionsSlot({ actions }: { actions: NonNullable<PageHeaderProps["action
             key={i}
             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"
                 ? "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] shadow-none"
                 : "kyro-btn-primary hover:opacity-90"
-            } ${act.className || ""}`}
+            } ${act.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${act.className || ""}`}
           >
             {act.icon && <act.icon className="w-4 h-4" />}
             {act.label}
@@ -117,7 +119,8 @@ function SingleAction({ action }: { action: NonNullable<PageHeaderProps["action"
     <button
       type="button"
       onClick={action.onClick}
-      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.className || ""}`}
+      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 || ""}`}
     >
       {action.icon && <action.icon className="w-4 h-4" />}
       {action.label}

package/src/integration.ts

@@ -119,6 +119,38 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
           if (configResult.error) {
             throw new Error(configResult.error);
           }
+
+          // Mirror the registry's SEO tab injection so the admin schema JSON
+          // has the same tabs as the server-side registry at runtime.
+          const seoFields = [
+            { name: "metaTitle", type: "text", label: "Meta Title", admin: { description: "The title used for search engines (recommended < 60 chars).", autoGenerate: "title" } },
+            { name: "metaDescription", type: "textarea", label: "Meta Description", admin: { description: "A brief summary for search engines (recommended < 160 chars).", autoGenerate: "content" } },
+            { name: "keywords", type: "text", label: "Keywords", admin: { description: "Comma-separated list of keywords for this page." } },
+            { name: "ogImage", type: "upload", label: "OpenGraph Image", relationTo: "media", admin: { description: "The image shown when shared on social media." } },
+            { name: "twitter", type: "group", label: "Twitter Card", fields: [
+              { name: "title", type: "text", label: "Twitter Title" },
+              { name: "description", type: "textarea", label: "Twitter Description" },
+              { name: "image", type: "upload", label: "Twitter Image", relationTo: "media" },
+            ]},
+            { name: "advanced", type: "group", label: "Advanced Search Settings", fields: [
+              { name: "noindex", type: "checkbox", label: "Hide from search engines (noindex)", defaultValue: false },
+              { name: "nofollow", type: "checkbox", label: "Do not follow links (nofollow)", defaultValue: false },
+              { name: "canonicalUrl", type: "text", label: "Canonical URL Override", admin: { description: "Leave empty to use the default canonical URL." } },
+              { name: "structuredData", type: "code", label: "JSON-LD Structured Data", admin: { description: "Custom JSON-LD schema for this specific page." } },
+            ]},
+          ];
+          for (const col of (configResult.collections || [])) {
+            if (col.seo) {
+              const mainTabsField = col.fields?.find((f: any) => f.type === 'tabs' && f.name === 'mainTabs');
+              if (mainTabsField?.tabs) {
+                // Only add if not already injected (avoid duplicates on hot-reload)
+                if (!mainTabsField.tabs.find((t: any) => t.label === 'SEO Settings')) {
+                  mainTabsField.tabs.push({ label: "SEO Settings", fields: seoFields });
+                }
+              }
+            }
+          }
+
           fs.writeFileSync(configFile, JSON.stringify(configResult, null, 2), "utf8");
           logger.info("Project config loaded for admin");
         } catch (e: any) {

package/src/layouts/AdminLayout.astro

@@ -198,7 +198,7 @@ if (includeSiteName) {
           </div>
         </header>
 
-        <div class="flex-1 overflow-y-auto p-4 md:p-0">
+        <div class="flex-1 flex flex-col min-h-0 overflow-y-auto p-4 md:p-0">
           <slot />
         </div>
       </main>

package/src/lib/globals.ts

@@ -27,9 +27,22 @@ export async function getGlobal(slug: string, options?: GlobalOptions) {
       });
       if (!doc) return null;
 
-      const mediaFields = ["siteLogo", "siteFavicon", "siteOgImage"];
+      const mediaFields = [
+        { path: ["siteFavicon"] },
+        { path: ["favicon"] },
+        { path: ["identity", "primaryLogo"] },
+        { path: ["identity", "darkLogo"] }
+      ];
       for (const field of mediaFields) {
-        const val = doc[field];
+        let parent = doc;
+        let key = field.path[0];
+        if (field.path.length > 1) {
+          parent = doc[field.path[0]];
+          key = field.path[1];
+        }
+        if (!parent) continue;
+
+        const val = parent[key];
         const id = typeof val === "string" ? val : (val && typeof val === "object" && typeof val.id === "string" ? val.id : null);
         if (id) {
           try {
@@ -37,7 +50,7 @@ export async function getGlobal(slug: string, options?: GlobalOptions) {
               collection: "media",
               id,
             });
-            if (mediaDoc) doc[field] = mediaDoc;
+            if (mediaDoc) parent[key] = mediaDoc;
           } catch { /* media field stays as-is */ }
         }
       }
@@ -58,9 +71,22 @@ export async function getGlobal(slug: string, options?: GlobalOptions) {
         const doc = json.data || null;
         if (!doc) return null;
         // Resolve media fields via the same API endpoint
-        const mediaFields = ["siteLogo", "siteFavicon", "siteOgImage"];
+        const mediaFields = [
+          { path: ["siteFavicon"] },
+          { path: ["favicon"] },
+          { path: ["identity", "primaryLogo"] },
+          { path: ["identity", "darkLogo"] }
+        ];
         for (const field of mediaFields) {
-          const val = doc[field];
+          let parent = doc;
+          let key = field.path[0];
+          if (field.path.length > 1) {
+            parent = doc[field.path[0]];
+            key = field.path[1];
+          }
+          if (!parent) continue;
+
+          const val = parent[key];
           const id = typeof val === "string" ? val : (val && typeof val === "object" && typeof val.id === "string" ? val.id : null);
           if (id) {
             try {
@@ -68,7 +94,7 @@ export async function getGlobal(slug: string, options?: GlobalOptions) {
                 headers: { Cookie: cookie },
               });
               if (mediaRes.ok) {
-                doc[field] = await mediaRes.json();
+                parent[key] = await mediaRes.json();
               }
             } catch { /* media field stays as-is */ }
           }
@@ -99,9 +125,22 @@ export async function getGlobal(slug: string, options?: GlobalOptions) {
     });
     if (!doc) return null;
 
-    const mediaFields = ["siteLogo", "siteFavicon", "siteOgImage"];
+    const mediaFields = [
+      { path: ["siteFavicon"] },
+      { path: ["favicon"] },
+      { path: ["identity", "primaryLogo"] },
+      { path: ["identity", "darkLogo"] }
+    ];
     for (const field of mediaFields) {
-      const val = doc[field];
+      let parent = doc;
+      let key = field.path[0];
+      if (field.path.length > 1) {
+        parent = doc[field.path[0]];
+        key = field.path[1];
+      }
+      if (!parent) continue;
+
+      const val = parent[key];
       const id = typeof val === "string" ? val : (val && typeof val === "object" && typeof val.id === "string" ? val.id : null);
       if (id) {
         try {
@@ -109,7 +148,7 @@ export async function getGlobal(slug: string, options?: GlobalOptions) {
             collection: "media",
             id,
           });
-          if (mediaDoc) doc[field] = mediaDoc;
+          if (mediaDoc) parent[key] = mediaDoc;
         } catch { /* media field stays as-is */ }
       }
     }
@@ -121,3 +160,8 @@ export async function getGlobal(slug: string, options?: GlobalOptions) {
 export async function getSiteSettings(options?: GlobalOptions) {
   return await getGlobal("site-settings", options);
 }
+
+/** Convenience helper to get the brand settings. */
+export async function getBrandSettings(options?: GlobalOptions) {
+  return await getGlobal("brand-settings", options);
+}