@kyro-cms/admin 0.12.0 → 0.12.1

package/src/components/fields/IconField.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useMemo } from "react";
+import type { IconField as IconFieldType } from "@kyro-cms/core/client";
+import FieldLayout from "./FieldLayout";
+import { IconPickerModal } from "../ui/IconPickerModal";
+import * as LucideIcons from "lucide-react";
+
+interface IconFieldComponentProps {
+  field: IconFieldType;
+  value?: string | null;
+  onChange?: (value: string) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+export default function IconField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: IconFieldComponentProps) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const normalizedValue = value == null ? "" : String(value);
+
+  // Convert kebab-case value back to PascalCase to render the preview component
+  const pascalName = useMemo(() => {
+    if (!normalizedValue) return "";
+    return normalizedValue
+      .split("-")
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join("");
+  }, [normalizedValue]);
+
+  const IconComponent = (LucideIcons as any)[pascalName];
+  const isReadOnly = typeof field.admin?.readOnly === "function" ? false : Boolean(field.admin?.readOnly);
+
+  return (
+    <FieldLayout field={field} error={error}>
+      <div className="flex items-center gap-3">
+        <div className="flex-1 relative">
+          <input
+            id={field.name}
+            type="text"
+            value={normalizedValue}
+            onChange={(e) => onChange?.(e.target.value)}
+            placeholder={field.admin?.placeholder || "e.g., activity"}
+            disabled={disabled || isReadOnly}
+            required={field.required}
+            className={`kyro-form-input ${disabled || isReadOnly ? "opacity-70 bg-[var(--kyro-bg-secondary)] cursor-not-allowed" : ""}`}
+          />
+        </div>
+        
+        <button
+          type="button"
+          onClick={() => setPickerOpen(true)}
+          disabled={disabled || isReadOnly}
+          className="flex items-center gap-2 h-10 px-4 shrink-0 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl text-sm font-bold text-[var(--kyro-text-primary)] hover:border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-alpha)] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {IconComponent ? (
+            <IconComponent className="w-5 h-5" strokeWidth={2} />
+          ) : (
+            <LucideIcons.Search className="w-4 h-4 text-[var(--kyro-text-secondary)]" />
+          )}
+          Browse
+        </button>
+      </div>
+
+      {pickerOpen && (
+        <IconPickerModal
+          open={pickerOpen}
+          onClose={() => setPickerOpen(false)}
+          onSelect={(iconName) => {
+            onChange?.(iconName);
+          }}
+        />
+      )}
+    </FieldLayout>
+  );
+}

package/src/components/fields/UploadField.tsx

@@ -186,12 +186,14 @@ export function UploadField({
         formData.append("folder", selectedFolder);
       }
       const result = await apiUpload<any>("/api/media/upload", formData);
+      const data = result.data || result.doc || result;
       const newImage = {
-        id: result.id,
-        filename: result.filename,
-        originalName: (result as any).originalName ?? file.name,
-        url: result.url,
-        mimeType: file.type,
+        ...data,
+        id: data.id,
+        filename: data.filename,
+        originalName: data.originalName ?? file.name,
+        url: data.url,
+        mimeType: data.mimeType || file.type,
       };
       if (isMultiple) {
         onChange([...currentValue, newImage]);

package/src/components/fields/index.ts

@@ -1,4 +1,5 @@
 export { default as RichTextField } from "./RichTextField";
+export { default as IconField } from "./IconField";
 export { CodeField } from "./CodeField";
 export { JSONField } from "./JSONField";
 export { MarkdownField } from "./MarkdownField";

package/src/components/ui/BlockDrawer.tsx

@@ -1,11 +1,13 @@
 import React, { type ReactNode } from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { SlidePanel } from "./SlidePanel";
+import { ClipboardPaste } from "lucide-react";
 
 interface BlockDrawerProps {
   open: boolean;
   onClose: () => void;
   onSelect: (blockType: string) => void;
+  onPasteBlock?: (blockData: any) => void;
   children?: ReactNode;
 }
 
@@ -13,8 +15,29 @@ export function BlockDrawer({
   open,
   onClose,
   onSelect,
+  onPasteBlock,
   children,
 }: BlockDrawerProps) {
+  const [pasteError, setPasteError] = React.useState<string | null>(null);
+
+  const handlePaste = async () => {
+    try {
+      setPasteError(null);
+      const text = await navigator.clipboard.readText();
+      const parsed = JSON.parse(text);
+      if (parsed.__kyro_block) {
+        if (onPasteBlock) {
+          onPasteBlock(parsed);
+        }
+      } else {
+        setPasteError("Clipboard does not contain a valid Kyro block.");
+      }
+    } catch (err) {
+      setPasteError("Failed to read block from clipboard.");
+      console.error(err);
+    }
+  };
+
   if (!open) return null;
 
   return (
@@ -22,6 +45,22 @@ export function BlockDrawer({
       <p className="text-sm text-[var(--kyro-text-muted)] mb-4">
         Drag blocks into the editor or click to insert
       </p>
+
+      {onPasteBlock && (
+        <div className="mb-6 pb-6 border-b border-[var(--kyro-border)]">
+          <button
+            onClick={handlePaste}
+            className="w-full flex items-center justify-center gap-2 py-2 px-4 rounded-lg bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] text-sm font-semibold transition-all hover:bg-[var(--kyro-primary)]/5"
+          >
+            <ClipboardPaste className="w-4 h-4" />
+            Paste Block from Clipboard
+          </button>
+          {pasteError && (
+            <p className="text-xs text-red-500 mt-2 text-center font-medium">{pasteError}</p>
+          )}
+        </div>
+      )}
+
       {children}
     </SlidePanel>
   );

package/src/components/ui/IconPickerModal.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useMemo } from "react";
+import { Modal } from "./Modal";
+import * as LucideIcons from "lucide-react";
+import { Search } from "./icons";
+
+// Extract only valid components from lucide-react
+const availableIcons = Object.keys(LucideIcons).filter((key) => {
+  return /^[A-Z]/.test(key) && key !== "LucideProps" && key !== "Icon";
+});
+
+interface IconPickerModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (iconName: string) => void;
+}
+
+export function IconPickerModal({ open, onClose, onSelect }: IconPickerModalProps) {
+  const [search, setSearch] = useState("");
+
+  const filteredIcons = useMemo(() => {
+    if (!search) return availableIcons;
+    const lowerSearch = search.toLowerCase();
+    return availableIcons.filter((iconName) => iconName.toLowerCase().includes(lowerSearch));
+  }, [search]);
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Select an Icon"
+      size="xl"
+    >
+      <div className="flex flex-col h-[60vh]">
+        <div className="relative mb-6">
+          <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 icons..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full pl-10 pr-4 py-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)] transition-all text-sm font-bold"
+          />
+        </div>
+
+        <div className="flex-1 overflow-y-auto min-h-0 custom-scrollbar pr-2">
+          {filteredIcons.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-[var(--kyro-text-secondary)] font-medium">
+              No icons found
+            </div>
+          ) : (
+            <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-3 pb-8">
+              {filteredIcons.map((iconName) => {
+                const IconComponent = (LucideIcons as any)[iconName];
+                // we store standard kebab-case in db
+                const kebabName = iconName
+                  .replace(/([a-z])([A-Z])/g, "$1-$2")
+                  .toLowerCase();
+
+                return (
+                  <button
+                    key={iconName}
+                    type="button"
+                    onClick={() => {
+                      onSelect(kebabName);
+                      onClose();
+                    }}
+                    className="flex flex-col items-center justify-center p-3 gap-2 rounded-md border border-[var(--kyro-border)] hover:bg-[var(--kyro-surface-accent)] hover:border-[var(--kyro-primary)] transition-all group"
+                    title={iconName}
+                  >
+                    <IconComponent className="w-6 h-6 text-[var(--kyro-text-secondary)] group-hover:text-[var(--kyro-primary)] transition-colors" strokeWidth={1.5} />
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </Modal>
+  );
+}

package/src/components/ui/ImageFocalEditor.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
+import React, { useState, useRef, useEffect, useCallback, useMemo } 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";
+import { Crop as CropIcon, MousePointerClick, RefreshCcw, Eye } from "./icons";
 
 interface RectPercent {
   x: number;
@@ -145,6 +145,19 @@ export function ImageFocalEditor({
     setShowHotspot(false);
   };
 
+  // Build preview URL with crop params
+  const previewUrl = useMemo(() => {
+    if (!crop || !crop.width || !crop.height) return null;
+    const params = new URLSearchParams({ url });
+    params.set("cx", String(crop.x));
+    params.set("cy", String(crop.y));
+    params.set("cw", String(crop.width));
+    params.set("ch", String(crop.height));
+    return `/api/media/resize?${params.toString()}`;
+  }, [url, crop]);
+
+  const hasCrop = crop?.width && crop.height;
+
   return (
     <div className="flex flex-col h-full bg-[var(--kyro-bg)]">
       {/* Toolbar */}
@@ -211,87 +224,115 @@ export function ImageFocalEditor({
         </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"
+      {/* Editor + Preview Area */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Editor (left) */}
+        <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"}
             >
-              {/* Overlay that matches the image dimensions exactly */}
-              <div 
-                className="relative" 
-                style={{ 
-                  width: imgRef.current.width, 
-                  height: imgRef.current.height 
-                }}
+              <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"
               >
-                <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%",
+                {/* Overlay that matches the image dimensions exactly */}
+                <div 
+                  className="relative" 
+                  style={{ 
+                    width: imgRef.current.width, 
+                    height: imgRef.current.height 
                   }}
-                  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
+                    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>
         </div>
+
+        {/* Preview (right) */}
+        {hasCrop && (
+          <div className="w-[280px] border-l border-[var(--kyro-border)] bg-[var(--kyro-surface)] flex flex-col overflow-hidden">
+            <div className="flex items-center gap-2 px-4 py-3 border-b border-[var(--kyro-border)]">
+              <Eye className="w-4 h-4 text-[var(--kyro-text-secondary)]" />
+              <span className="text-xs font-bold text-[var(--kyro-text-secondary)] tracking-wide uppercase">
+                Preview
+              </span>
+            </div>
+            <div className="flex-1 flex items-center justify-center p-4 overflow-hidden">
+              {previewUrl && (
+                <img
+                  src={previewUrl}
+                  alt="Crop preview"
+                  className="max-w-full max-h-full object-contain rounded-lg shadow-lg border border-[var(--kyro-border)]"
+                />
+              )}
+            </div>
+            <div className="px-4 py-3 border-t border-[var(--kyro-border)] text-[10px] text-[var(--kyro-text-secondary)] font-mono">
+              <div>x: {crop?.x?.toFixed(1)}%  y: {crop?.y?.toFixed(1)}%</div>
+              <div>w: {crop?.width?.toFixed(1)}%  h: {crop?.height?.toFixed(1)}%</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 to define the crop area. The preview panel shows the result in real-time."
           : "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

@@ -18,7 +18,7 @@ interface ModalProps {
   title: string;
   children: ReactNode;
   footer?: ReactNode;
-  size?: "sm" | "md" | "lg" | "full";
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
   variant?: "default" | "danger" | "lightbox";
 }
 
@@ -28,7 +28,7 @@ export function Modal({
   title,
   children,
   footer,
-  size = "md",
+  size = "lg",
   variant = "default",
 }: ModalProps) {
   useEffect(() => {
@@ -53,6 +53,8 @@ export function Modal({
     sm: "max-w-sm",
     md: "max-w-md",
     lg: "max-w-lg",
+    xl: "max-w-xl",
+    "2xl": "max-w-2xl",
     full: "w-full h-full max-w-none rounded-none border-0",
   };
 

package/src/components/ui/icons.tsx

@@ -110,4 +110,4 @@ export { Grid3X3 as IconGrid3X3 } from "lucide-react";
 // Direct re-exports for files that still use original lucide-react names
 export { Activity as Activity, AlignLeft as AlignLeft, Archive as Archive, ArrowDown as ArrowDown, ArrowRight as ArrowRight, ArrowUpRight as ArrowUpRight, Blocks as Blocks, Box as Box, Calendar as Calendar, Check as Check, ChevronDown as ChevronDown, ChevronLeft as ChevronLeft, ChevronRight as ChevronRight, ChevronUp as ChevronUp, Clock as Clock, Code as Code, Columns3 as Columns3, Copy as Copy, Crop as Crop, Download as Download, ExternalLink as ExternalLink, Eye as Eye, EyeOff as EyeOff, File as File, File as FileIcon, FileText as FileText, Globe as Globe, Film as Film, Filter as Filter, Folder as Folder, FolderInput as FolderInput, FolderPlus as FolderPlus, GripVertical as GripVertical, Heading1 as Heading1, Image as Image, Info as Info, Key as Key, LayoutDashboard as LayoutDashboard, Link as Link, Link2 as Link2, List as List, ListOrdered as ListOrdered, Lock as Lock, Mail as Mail, Maximize2 as Maximize2, Menu as Menu, Minus as Minus, Monitor as Monitor, MousePointerClick as MousePointerClick, Music as Music, Palette as Palette, Pause as Pause, Play as Play, Plus as Plus, RefreshCcw as RefreshCcw, RefreshCw as RefreshCw, Save as Save, Search as Search, Send as Send, Settings as Settings, Shield as Shield, Sparkles as Sparkles, Star as Star, Tag as Tag, Terminal as Terminal, ToggleLeft as ToggleLeft, ToggleRight as ToggleRight, Trash2 as Trash2, TrendingUp as TrendingUp, Type as Type, User as User, UserPlus as UserPlus, Users as Users, Video as Video, Webhook as Webhook, X as X, Zap as Zap, CircleHelp as HelpCircle } from "lucide-react";
 export { CircleCheck as CheckCircle2, Grid3X3 as Grid, House as Home, LayoutPanelTop as Layout, LoaderCircle as Loader2, LockOpen as Unlock, CirclePlay as PlayCircle, TriangleAlert as AlertTriangle, CodeXml as Code2, CloudDownload as DownloadCloud, EllipsisVertical as MoreVertical, ShieldCheck as ShieldCheck, ShieldAlert as ShieldAlert, Pencil as Edit2, Moon as Moon, Sun as Sun, LogOut as LogOut, Database as Database, Hexagon as Hexagon, Network as Network, Book as Book, Bold as Bold, Italic as Italic, Underline as Underline, Strikethrough as Strikethrough, Undo as Undo, Redo as Redo, Dot as Dot, Grid3X3, Laptop as Laptop, Smartphone as Smartphone } from "lucide-react";
-export { Server as Server, XCircle as XCircle, Clipboard as Clipboard, Upload as Upload } from "lucide-react";
+export { Server as Server, XCircle as XCircle, Clipboard as Clipboard, ClipboardPaste as ClipboardPaste, ClipboardCopy as ClipboardCopy, Upload as Upload } from "lucide-react";