@kyro-cms/admin 0.3.1 → 0.3.4

package/src/components/fields/TextField.tsx

@@ -1,8 +1,11 @@
 import type { TextField as TextFieldType } from "@kyro-cms/core/client";
+import FieldLayout from "./FieldLayout";
+import { useAutoFormStore } from "../../lib/autoform-store";
+import { slugifyText } from "../../lib/slugify";
 
 interface TextFieldComponentProps {
   field: TextFieldType;
-  value?: string;
+  value?: string | null;
   onChange?: (value: string) => void;
   error?: string;
   disabled?: boolean;
@@ -10,11 +13,17 @@ interface TextFieldComponentProps {
 
 export default function TextField({
   field,
-  value = "",
+  value,
   onChange,
   error,
   disabled,
 }: TextFieldComponentProps) {
+  const isReadOnly = field.admin?.readOnly;
+  const isTextarea = (field as TextFieldType).variant === "textarea";
+  const isSlug = field.name === "slug";
+
+  const { isSlugLocked, setIsSlugLocked, formData } = useAutoFormStore();
+
   const inputType =
     field.variant === "email"
       ? "email"
@@ -24,42 +33,80 @@ export default function TextField({
           ? "url"
           : "text";
 
+  const normalizedValue = value == null ? "" : String(value);
+
+  const commonProps = {
+    id: field.name,
+    value: normalizedValue,
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => onChange?.(e.target.value),
+    placeholder: field.admin?.placeholder,
+    disabled: disabled || isReadOnly || (isSlug && isSlugLocked),
+    minLength: field.minLength,
+    maxLength: field.maxLength,
+    required: field.required,
+    className: `kyro-form-input ${isSlug ? "pr-24" : ""
+      } ${disabled || isReadOnly || (isSlug && isSlugLocked) ? "opacity-70 bg-[var(--kyro-bg-secondary)] cursor-not-allowed" : ""}`,
+  };
+
   return (
-    <div className="space-y-1">
-      {field.label && (
-        <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
-          {field.label}
-          {field.required && (
-            <span className="text-[var(--kyro-error)] ml-1">*</span>
-          )}
-        </label>
-      )}
-      <input
-        type={inputType}
-        value={value}
-        onChange={(e) => onChange?.(e.target.value)}
-        placeholder={field.admin?.placeholder}
-        disabled={disabled || field.admin?.readOnly}
-        minLength={field.minLength}
-        maxLength={field.maxLength}
-        pattern={field.pattern}
-        required={field.required}
-        className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
-          error
-            ? "border-[var(--kyro-error)] focus:border-[var(--kyro-error)] focus:ring-[var(--kyro-error)]"
-            : "border-[var(--kyro-border)] focus:border-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
-        } ${
-          disabled || field.admin?.readOnly
-            ? "bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] opacity-50"
-            : "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
-        }`}
-      />
-      {field.admin?.description && !error && (
-        <p className="text-xs text-[var(--kyro-text-muted)]">
-          {field.admin.description}
-        </p>
-      )}
-      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
-    </div>
+    <FieldLayout field={field} error={error}>
+      <div className="relative">
+        {isTextarea ? (
+          <textarea {...commonProps} rows={(field as TextFieldType).rows || 4} />
+        ) : (
+          <input type={inputType} {...commonProps} pattern={field.pattern} />
+        )}
+
+        {isSlug && (
+          <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
+            {!isSlugLocked && (
+              <button
+                type="button"
+                onClick={() =>
+                  onChange?.(
+                    slugifyText(
+                      formData[field.admin?.autoGenerate || "title"] || "",
+                    ),
+                  )
+                }
+                className="p-1 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)]"
+                title="Regenerate slug"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+                  <path d="M21 3v5h-5" />
+                </svg>
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => setIsSlugLocked(!isSlugLocked)}
+              className={`p-1.5 rounded transition-colors ${isSlugLocked ? "text-[var(--kyro-primary)] bg-[var(--kyro-primary-alpha)]" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"}`}
+              title={isSlugLocked ? "Unlock slug" : "Lock slug"}
+            >
+              {isSlugLocked ? (
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                </svg>
+              ) : (
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                  <path d="M7 11V7a5 5 0 0 1 9.9-1" />
+                </svg>
+              )}
+            </button>
+          </div>
+        )}
+
+        {field.name?.toLowerCase().includes("metatitle") && (
+          <div className="flex items-center justify-between mt-1 text-[10px] font-bold  tracking-wider">
+            <span className={(normalizedValue.length) > 60 ? "text-red-500" : normalizedValue.length >= 40 ? "text-green-500" : "text-amber-600"}>
+              {normalizedValue.length} / 60 — {normalizedValue.length > 60 ? "Too Long" : normalizedValue.length >= 40 ? "Ideal" : "Short"}
+            </span>
+          </div>
+        )}
+      </div>
+    </FieldLayout>
   );
 }

package/src/components/fields/UploadField.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
-import { Image, Film, FileText, Music, File, X, Loader2 } from "lucide-react";
-import { apiGet, withCacheBust, apiPost, apiUpload } from "../../lib/api";
+import { Image as ImageIcon, Film, FileText, Music, File, X, Loader2 } from "../ui/icons";
+import { apiGet, withCacheBust, apiPost, apiUpload, resolveApi, resolveMedia } from "../../lib/api";
+import { toast } from "../../lib/stores";
 
 interface UploadFieldProps {
   field: any;
@@ -55,7 +56,7 @@ const FileIcon = ({
 }) => {
   switch (type) {
     case "image":
-      return <Image className={className} />;
+      return <ImageIcon className={className} />;
     case "video":
       return <Film className={className} />;
     case "audio":
@@ -94,6 +95,36 @@ export function UploadField({
   const currentValue = Array.isArray(value) ? value : value ? [value] : [];
   const canAddMore = currentValue.length < maxCount;
 
+  useEffect(() => {
+    const fetchMissingDetails = async () => {
+      const idsToFetch = currentValue
+        .filter(item => typeof item === 'string')
+        .map(id => id as string);
+
+      if (idsToFetch.length === 0) return;
+
+      try {
+        const fetchedItems = await Promise.all(
+          idsToFetch.map(id => apiGet<any>(`/api/media/${id}`))
+        );
+
+        const newItems = [...currentValue];
+        fetchedItems.forEach(fetchedItem => {
+          const index = newItems.findIndex(item => item === (fetchedItem.id || fetchedItem));
+          if (index !== -1) {
+            newItems[index] = fetchedItem;
+          }
+        });
+
+        onChange(isMultiple ? newItems : newItems[0]);
+      } catch (err) {
+        console.error("Failed to fetch media details:", err);
+      }
+    };
+
+    fetchMissingDetails();
+  }, [value]);
+
   useEffect(() => {
     if (showPicker) {
       loadFolders();
@@ -103,7 +134,7 @@ export function UploadField({
 
   const loadFolders = async () => {
     try {
-      const result = await apiGet(withCacheBust("/api/media/folders"));
+      const result = await apiGet<any>(withCacheBust("/api/media/folders"));
       setFolders(result.folders || []);
     } catch {
       setFolders([]);
@@ -119,7 +150,7 @@ export function UploadField({
       if (selectedFolder) {
         url += "&folder=" + encodeURIComponent(selectedFolder);
       }
-      const result = await apiGet(url);
+      const result = await apiGet<any>(url);
       setMediaItems(result.docs || []);
     } catch {
       setMediaItems([]);
@@ -136,7 +167,7 @@ export function UploadField({
       if (selectedFolder) {
         formData.append("folder", selectedFolder);
       }
-      const result = await apiUpload("/api/upload", formData);
+      const result = await apiUpload<any>("/api/media/upload", formData);
       const newImage = {
         id: result.id,
         filename: result.filename,
@@ -149,6 +180,7 @@ export function UploadField({
       } else {
         onChange(newImage);
       }
+      toast.success(`Asset synchronized: ${newImage.filename}`);
     } catch (err) {
       console.error("Upload failed:", err);
     } finally {
@@ -162,7 +194,7 @@ export function UploadField({
 
     setUrlError("");
     try {
-      const result = await apiPost("/api/upload", { url });
+      const result = await apiPost<any>("/api/media/upload", { url });
       const originalName = (() => {
         try {
           return (
@@ -186,10 +218,12 @@ export function UploadField({
       } else {
         onChange(newImage);
       }
+      toast.success(`URL asset established: ${newImage.filename}`);
       setUrlValue("");
       setShowUrlInput(false);
-    } catch (err: any) {
-      setUrlError(err.message || "Invalid URL");
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Invalid URL";
+      setUrlError(message);
     }
   };
 
@@ -234,7 +268,8 @@ export function UploadField({
   }
 
   const renderImagePreview = (img: any, index?: number) => {
-    const fileType = getFileType(img?.mimeType, img?.filename || img?.url);
+    if (!img) return null;
+    const fileType = getFileType(img.mimeType, img.filename || img.url);
     const isImage = fileType === "image";
 
     return (
@@ -245,7 +280,7 @@ export function UploadField({
         <div className="w-10 h-10 rounded-md overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] flex items-center justify-center flex-shrink-0">
           {isImage ? (
             <img
-              src={img.url}
+              src={resolveMedia(img.url)}
               alt={img.filename || "Preview"}
               className="w-full h-full object-cover"
             />
@@ -258,9 +293,9 @@ export function UploadField({
         </div>
         <div className="flex-1 min-w-0">
           <div className="text-[11px] font-medium truncate text-[var(--kyro-text-primary)]">
-            {img?.originalName || img?.filename || "Unnamed File"}
+            {img.originalName || img.filename || "Unnamed File"}
           </div>
-          <div className="text-[10px] text-[var(--kyro-text-muted)] uppercase tracking-wider font-bold">
+          <div className="text-[10px] text-[var(--kyro-text-muted)] tracking-wider font-bold">
             {fieldLabel}
           </div>
         </div>
@@ -298,7 +333,7 @@ export function UploadField({
             )}
           </div>
         ) : (
-          renderImagePreview(value, fieldLabel)
+          renderImagePreview(value)
         )}
         <input
           ref={inputRef}
@@ -316,7 +351,7 @@ export function UploadField({
   }
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-2 relative">
       <input
         ref={inputRef}
         type="file"
@@ -448,11 +483,10 @@ function MediaPickerContent({
 }) {
   return (
     <div
-      className={`${
-        isFullscreen
-          ? "fixed inset-0 z-[9999]"
-          : "absolute z-50 w-[360px] max-h-[400px] mt-1 rounded-lg shadow-lg"
-      } overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] flex flex-col`}
+      className={`${isFullscreen
+        ? "fixed inset-0 z-[9999]"
+        : "absolute z-[9999] w-[360px] max-h-[400px] mt-1 rounded-lg shadow-lg"
+        } overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] flex flex-col`}
     >
       <div className="p-2 border-b border-[var(--kyro-border)] flex flex-col gap-2">
         <input
@@ -467,11 +501,10 @@ function MediaPickerContent({
             <button
               type="button"
               onClick={() => setSelectedFolder("")}
-              className={`px-2 py-1 text-xs rounded transition-colors ${
-                selectedFolder === ""
-                  ? "bg-[var(--kyro-primary)] text-white"
-                  : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
-              }`}
+              className={`px-2 py-1 text-xs rounded transition-colors ${selectedFolder === ""
+                ? "bg-[var(--kyro-primary)] text-white"
+                : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
+                }`}
             >
               All
             </button>
@@ -480,11 +513,10 @@ function MediaPickerContent({
                 key={folder.path}
                 type="button"
                 onClick={() => setSelectedFolder(folder.path)}
-                className={`px-2 py-1 text-xs rounded transition-colors ${
-                  selectedFolder === folder.path
-                    ? "bg-[var(--kyro-primary)] text-white"
-                    : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
-                }`}
+                className={`px-2 py-1 text-xs rounded transition-colors ${selectedFolder === folder.path
+                  ? "bg-[var(--kyro-primary)] text-white"
+                  : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
+                  }`}
               >
                 {folder.name}
               </button>
@@ -505,11 +537,10 @@ function MediaPickerContent({
           </div>
         ) : (
           <div
-            className={`grid gap-1 ${
-              isFullscreen
-                ? "grid-cols-[repeat(auto-fill,minmax(140px,1fr))]"
-                : "grid-cols-3"
-            }`}
+            className={`grid gap-1 ${isFullscreen
+              ? "grid-cols-[repeat(auto-fill,minmax(140px,1fr))]"
+              : "grid-cols-3"
+              }`}
           >
             {filteredMedia.map((item) => (
               <button
@@ -519,13 +550,12 @@ function MediaPickerContent({
                 className="border border-[var(--kyro-border)] rounded-md overflow-hidden cursor-pointer p-0 bg-[var(--kyro-surface)] hover:border-[var(--kyro-primary)] transition-all relative group"
               >
                 <div
-                  className={`w-full flex items-center justify-center bg-[var(--kyro-surface-accent)] ${
-                    isFullscreen ? "h-[120px]" : "h-[80px]"
-                  }`}
+                  className={`w-full flex items-center justify-center bg-[var(--kyro-surface-accent)] ${isFullscreen ? "h-[120px]" : "h-[80px]"
+                    }`}
                 >
                   {getFileType(item.mimeType, item.filename) === "image" ? (
                     <img
-                      src={item.thumbnailUrl || item.url}
+                      src={resolveMedia(item.thumbnailUrl || item.url)}
                       alt={item.filename}
                       className="w-full h-full object-cover"
                     />
@@ -536,11 +566,11 @@ function MediaPickerContent({
                     />
                   )}
                 </div>
-                <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center p-2">
+                <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-0 transition-opacity flex flex-col items-center justify-center p-2">
                   <span className="text-white text-[10px] font-medium text-center line-clamp-2 mb-1">
                     {item.filename}
                   </span>
-                  <span className="text-white/70 text-[9px] uppercase font-bold tracking-tighter">
+                  <span className="text-white/70 text-[9px]  font-bold tracking-tighter">
                     {getFileType(item.mimeType, item.filename)}
                   </span>
                 </div>

package/src/components/fields/VideoField.tsx

@@ -5,7 +5,7 @@ interface VideoFieldProps {
   src?: string;
   title?: string;
   onChange: (field: string, value: string) => void;
-  onUploadChange?: (value: any) => void;
+  onUploadChange?: (value: unknown) => void;
   compact?: boolean;
 }
 

package/src/components/fields/extensions/blockComponents.tsx

@@ -35,10 +35,10 @@ import {
   Star,
   ListOrdered,
   Link2,
-} from "lucide-react";
+} from "../../ui/icons";
 
 // Block component registry
-export const BLOCK_COMPONENTS: Record<string, React.ComponentType<any>> = {
+export const BLOCK_COMPONENTS: Record<string, React.ComponentType<{ block: Record<string, unknown>; index: number }>> = {
   columns: ColumnsBlock,
   heading: HeadingBlock,
   paragraph: ParagraphBlock,