@kyro-cms/admin 0.1.6 → 0.1.7

package/src/components/AutoForm.tsx

@@ -1,144 +1,656 @@
 import { useState, useRef, useEffect } from "react";
-import type { CollectionConfig, Field, Block } from "@kyro-cms/core";
+import type {
+  CollectionConfig,
+  GlobalConfig,
+  Field,
+  Block,
+} from "@kyro-cms/core";
+import { ImageField } from "./fields/ImageField";
+import { PortableTextField, HybridContentField } from "./fields";
+import NumberField from "./fields/NumberField";
+import CheckboxField from "./fields/CheckboxField";
+import SelectField from "./fields/SelectField";
+import DateField from "./fields/DateField";
+import { MarkdownField } from "./fields/MarkdownField";
+import CodeMirror from "@uiw/react-codemirror";
+import { json } from "@codemirror/lang-json";
+import { javascript } from "@codemirror/lang-javascript";
+import { aura } from "@uiw/codemirror-theme-aura";
+import { globals, collections } from "@/lib/config";
+
+import { BlocksField } from "./fields/BlocksField";
+// Lightweight slugify helper for on-the-fly slug generation from a title/name
+function slugifyText(text: string): string {
+  if (!text) return "";
+  return text
+    .toString()
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, "-") // Replace spaces with -
+    .replace(/[^\w-]+/g, "") // Remove all non-word chars
+    .replace(/--+/g, "-") // Replace multiple - with single -
+    .replace(/^-+/, "") // Trim - from start of text
+    .replace(/-+$/, ""); // Trim - from end of text
+}
 
 interface AutoFormProps {
-  config: CollectionConfig;
+  config: CollectionConfig | GlobalConfig;
   data?: Record<string, any>;
   errors?: Record<string, string>;
   onChange?: (data: Record<string, any>) => void;
   disabled?: boolean;
   collectionSlug?: string;
+  globalSlug?: string;
+  documentName?: string;
+  layout?: "split" | "single";
+  onActionSuccess?: (message: string) => void;
+  onActionError?: (message: string) => void;
+  documentStatus?: "draft" | "published";
+  justSaved?: boolean;
 }
 
 export function AutoForm({
-  config,
-  data = {},
+  config: propConfig,
+  data: initialData = {},
   errors = {},
   onChange,
-  disabled,
+  disabled: propDisabled,
+  collectionSlug,
+  globalSlug,
+  documentName,
+  layout = "split",
+  onActionSuccess,
+  onActionError,
+  documentStatus,
+  justSaved,
 }: AutoFormProps) {
+  // Resolve the "live" config to preserve functions (admin.condition) lost during prop serialization
+  const activeConfig = globalSlug
+    ? globals[globalSlug]
+    : collectionSlug
+      ? collections[collectionSlug]
+      : propConfig;
+  const config = activeConfig || propConfig;
+
+  // Helper to extract default values from config recursively
+  function getDefaults(fields: any[], prefix = ""): Record<string, any> {
+    const defaults: Record<string, any> = {};
+    for (const field of fields || []) {
+      if (field.defaultValue !== undefined) {
+        const key = prefix + field.name;
+        defaults[key] = field.defaultValue;
+        // Also set nested defaults for groups
+        if (field.type === "group" && field.fields) {
+          for (const subField of field.fields) {
+            if (subField.defaultValue !== undefined) {
+              defaults[prefix + field.name + "." + subField.name] =
+                subField.defaultValue;
+            }
+          }
+        }
+      }
+      if (field.fields && Array.isArray(field.fields)) {
+        Object.assign(defaults, getDefaults(field.fields, field.name + "."));
+      }
+      if (field.tabs) {
+        for (const tab of field.tabs) {
+          if (tab.fields) {
+            Object.assign(defaults, getDefaults(tab.fields, prefix));
+          }
+        }
+      }
+    }
+    return defaults;
+  }
+
+  // Helper to flatten nested object with dot notation keys
+  function flattenObject(
+    obj: Record<string, any>,
+    prefix = "",
+  ): Record<string, any> {
+    const result: Record<string, any> = {};
+    for (const key in obj) {
+      const newKey = prefix ? `${prefix}.${key}` : key;
+      const val = obj[key];
+      if (
+        val !== null &&
+        typeof val === "object" &&
+        !Array.isArray(val) &&
+        // Only recurse into plain objects, not Dates, Maps, or other class instances
+        (val.constructor === Object || !val.constructor)
+      ) {
+        Object.assign(result, flattenObject(val, newKey));
+      } else {
+        result[newKey] = val;
+      }
+    }
+    return result;
+  }
+
+  // Helper to unflatten dot notation keys back to nested object
+  function unflattenObject(flat: Record<string, any>): Record<string, any> {
+    const result: Record<string, any> = {};
+    for (const key in flat) {
+      const parts = key.split(".");
+      let current = result;
+      for (let i = 0; i < parts.length - 1; i++) {
+        if (!current[parts[i]]) {
+          current[parts[i]] = {};
+        }
+        current = current[parts[i]];
+      }
+      current[parts[parts.length - 1]] = flat[key];
+    }
+    return result;
+  }
+
+  // Merge initial data with defaults from config
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
+  useEffect(() => {
+    try {
+      const configDefaults = config ? getDefaults(config.fields) : {};
+      const flatInitialData = flattenObject(initialData || {});
+      const mergedFlatData = { ...configDefaults, ...flatInitialData };
+      const mergedInitialData = unflattenObject(mergedFlatData);
+      setFormData(mergedInitialData);
+    } catch (e) {
+      console.error("Critical error in AutoForm data initialization:", e);
+      // Fallback to raw initialData if flattening fails
+      setFormData(initialData || {});
+    }
+  }, [initialData, config]);
+  const [activeTab, setActiveTab] = useState(0);
+  const [isSlugLocked, setIsSlugLocked] = useState(true);
+  const [view, setView] = useState<"edit" | "version" | "api">("edit");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [versions, setVersions] = useState<any[]>([]);
+  const [loadingVersions, setLoadingVersions] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [loadingFields, setLoadingFields] = useState<Record<string, boolean>>(
+    {},
+  );
+
+  const disabled = propDisabled;
+
+  // Track unsaved changes
+  useEffect(() => {
+    const isDifferent =
+      JSON.stringify(formData) !== JSON.stringify(initialData);
+    setHasUnsavedChanges(isDifferent);
+  }, [formData, initialData]);
+
+  // Auto-generate slug from title if locked
+  useEffect(() => {
+    if (isSlugLocked && formData.title) {
+      const newSlug = slugifyText(formData.title);
+      if (newSlug !== formData.slug) {
+        setFormData((prev) => ({ ...prev, slug: newSlug }));
+      }
+    }
+  }, [formData.title, isSlugLocked]);
+
+  // Sync prop changes to local state
+  useEffect(() => {
+    if (initialData && Object.keys(initialData).length > 0) {
+      setFormData(initialData);
+    }
+  }, [initialData]);
+
+  // Sync to hidden input for Astro form submission
+  useEffect(() => {
+    const hiddenInput = document.getElementById(
+      "form-data",
+    ) as HTMLInputElement;
+    if (hiddenInput) {
+      hiddenInput.value = JSON.stringify(formData);
+    }
+    onChange?.(formData);
+  }, [formData, onChange]);
+
+  useEffect(() => {
+    if (formData.id) fetchVersions();
+  }, [formData.id]);
+
+  const fetchVersions = async () => {
+    setLoadingVersions(true);
+    try {
+      const resp = await fetch(
+        `/api/${collectionSlug}/${formData.id}/versions`,
+      );
+      const data = await resp.json();
+      setVersions(data.docs || []);
+    } catch (e) {
+      console.error("Failed to fetch versions:", e);
+    } finally {
+      setLoadingVersions(false);
+    }
+  };
+
+  const handleRestoreVersion = async (versionId: string) => {
+    if (
+      !confirm(
+        "Are you sure you want to restore this version? This will overwrite your current changes.",
+      )
+    )
+      return;
+    try {
+      const resp = await fetch(
+        `/api/${collectionSlug}/${formData.id}/versions`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ versionId, action: "restore" }),
+        },
+      );
+      const result = await resp.json();
+      if (result.data) {
+        setFormData(result.data);
+        setView("edit");
+        fetchVersions();
+      }
+    } catch (e) {
+      console.error("Restore failed:", e);
+    }
+  };
+
+  useEffect(() => {
+    const handleShortcuts = (e: KeyboardEvent) => {
+      // Cmd/Ctrl + S = Publish
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        (document.getElementById("btn-save") as any)?.click();
+      }
+      // Cmd/Ctrl + P = Toggle Preview
+      if ((e.metaKey || e.ctrlKey) && e.key === "p") {
+        e.preventDefault();
+        setShowPreview((prev) => !prev);
+      }
+      // Keys 1, 2, 3 = Tab Switching
+      if (
+        document.activeElement?.tagName !== "INPUT" &&
+        document.activeElement?.tagName !== "TEXTAREA"
+      ) {
+        if (e.key === "1") setView("edit");
+        if (e.key === "2") setView("version");
+        if (e.key === "3") setView("api");
+      }
+    };
+    window.addEventListener("keydown", handleShortcuts);
+    return () => window.removeEventListener("keydown", handleShortcuts);
+  }, []);
+
   const handleFieldChange = (fieldName: string, value: any) => {
-    onChange?.({
-      ...data,
+    setFormData((prev) => ({
+      ...prev,
       [fieldName]: value,
-    });
+    }));
   };
 
-  const renderField = (field: Field, parentData?: Record<string, any>) => {
+  const renderField = (
+    field: Field,
+    parentData?: Record<string, any>,
+    onParentChange?: (val: any) => void,
+  ): React.ReactNode => {
     if (field.admin?.hidden) return null;
 
-    const value =
-      parentData !== undefined ? parentData[field.name!] : data[field.name!];
+    const currentData = parentData !== undefined ? parentData : formData;
+
+    // Evaluate display condition if present
+    // For conditional fields, pass formData as the root context (first arg)
+    // and currentData as the sibling context (second arg)
+    if (field.admin?.condition && typeof field.admin.condition === "function") {
+      try {
+        const shouldShow = field.admin.condition(formData, currentData);
+        if (!shouldShow) {
+          return null;
+        }
+      } catch (e) {
+        console.warn(`Condition error for field ${field.name}:`, e);
+        // Show the field if there's an error evaluating the condition
+      }
+    }
+
+    const value = currentData[field.name!];
     const error = errors[field.name!];
 
+    const onFieldChange = (val: any) => {
+      if (onParentChange) {
+        onParentChange({ ...currentData, [field.name!]: val });
+      } else {
+        handleFieldChange(field.name!, val);
+      }
+    };
+
     if (field.type === "row" && "fields" in field) {
       return (
         <div
           key={field.name || `row-${Math.random()}`}
-          className="kyro-form-row"
+          className="kyro-form-row flex gap-6 items-end"
         >
-          {(field as any).fields.map((f: Field) => renderField(f, parentData))}
-        </div>
-      );
-    }
+          {(field as any).fields.map((f: Field) => {
+            const fAdmin = f.admin;
+            const actionUrl = fAdmin?.action;
 
-    if (field.type === "collapsible" && "fields" in field) {
-      return (
-        <details
-          key={field.name || `collapsible-${Math.random()}`}
-          className="kyro-form-collapsible"
-        >
-          <summary className="kyro-form-collapsible-header">
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <path d="M9 18l6-6-6-6" />
-            </svg>
-            {(field as any).label}
-          </summary>
-          <div className="kyro-form-collapsible-content">
-            {(field as any).fields.map((f: Field) =>
-              renderField(f, parentData),
-            )}
-          </div>
-        </details>
-      );
-    }
+            if (f.type === "button" && actionUrl) {
+              const siblingEmailField = (field as any).fields?.find(
+                (ff: Field) => ff.type === "email",
+              );
+              return (
+                <div key={f.name} className="flex-shrink-0">
+                  <button
+                    type="button"
+                    disabled={disabled}
+                    onClick={async () => {
+                      const rowName = field.name;
+                      const emailFieldName = siblingEmailField?.name;
+                      let emailValue = formData[emailFieldName];
+                      if (!emailValue && rowName) {
+                        emailValue = formData[rowName]?.[emailFieldName];
+                      }
+                      if (!emailValue) return;
 
-    if (field.type === "tabs" && "tabs" in field) {
-      return (
-        <div
-          key={field.name || `tabs-${Math.random()}`}
-          className="kyro-form-tabs"
-        >
-          {(field as any).tabs.map((tab: any, index: number) => (
-            <div key={index} className="kyro-form-tab">
-              <h3 className="kyro-form-tab-title">{tab.label}</h3>
-              <div className="kyro-form-tab-content">
-                {tab.fields.map((f: Field) => renderField(f, parentData))}
+                      setLoadingFields((prev) => ({
+                        ...prev,
+                        [f.name!]: true,
+                      }));
+                      try {
+                        const response = await fetch(actionUrl, {
+                          method: fAdmin.method || "POST",
+                          headers: { "Content-Type": "application/json" },
+                          body: JSON.stringify({ email: emailValue }),
+                        });
+                        let result;
+                        try {
+                          result = await response.json();
+                        } catch {
+                          result = {};
+                        }
+                        if (response.ok && result.success) {
+                          onActionSuccess?.(
+                            result.message || "Action completed successfully",
+                          );
+                        } else {
+                          const errorMsg =
+                            result.error ||
+                            `Request failed (${response.status})`;
+                          onActionError?.(errorMsg);
+                        }
+                      } catch (err: any) {
+                        onActionError?.(
+                          err.message || "Error connecting to server",
+                        );
+                      } finally {
+                        setLoadingFields((prev) => ({
+                          ...prev,
+                          [f.name!]: false,
+                        }));
+                      }
+                    }}
+                    disabled={loadingFields[f.name!] || disabled}
+                    className="bg-[var(--kyro-primary)] text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity disabled:opacity-50"
+                  >
+                    {loadingFields[f.name!] ? "Sending..." : f.label || "Click"}
+                  </button>
+                </div>
+              );
+            }
+
+            return (
+              <div
+                key={f.name}
+                className={f.type === "button" ? "flex-shrink-0" : "flex-1"}
+                style={
+                  fAdmin?.width ? { width: fAdmin.width, flex: "none" } : {}
+                }
+              >
+                {renderField(f, parentData, onParentChange)}
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       );
     }
 
     switch (field.type) {
-      case "text":
-      case "email":
+      case "tabs": {
+        const fieldTabs = (field as any).tabs;
+        const currentTab = fieldTabs[activeTab] || fieldTabs[0];
+
         return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
-              {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
+          <div
+            key={field.name || `tabs-${Math.random()}`}
+            className="space-y-8"
+          >
+            <div className="flex items-center gap-1 border-b border-[var(--kyro-border)] mb-6">
+              {fieldTabs.map((tab: any, index: number) => (
+                <button
+                  key={index}
+                  type="button"
+                  className={`px-6 py-3 text-sm font-bold transition-all border-b-2 -mb-[1px] ${
+                    activeTab === index
+                      ? "border-[var(--kyro-text-primary)] text-[var(--kyro-text-primary)]"
+                      : "border-transparent text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+                  }`}
+                  onClick={() => setActiveTab(index)}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+            <div className="space-y-6">
+              {currentTab?.fields.map((f: Field) =>
+                renderField(f, parentData, onParentChange),
               )}
-            </label>
-            <input
-              type={
-                field.type === "email"
-                  ? "email"
-                  : (field as any).variant === "url"
-                    ? "url"
-                    : "text"
-              }
-              className={`kyro-form-input ${error ? "kyro-form-input-error" : ""}`}
-              value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
-              disabled={disabled}
-              placeholder={`Enter ${field.label || field.name}`}
-              minLength={(field as any).minLength}
-              maxLength={(field as any).maxLength}
-            />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
+            </div>
+
+            {currentTab?.label === "SEO" && (
+              <div className="mt-12 pt-8 border-t border-[var(--kyro-border)]">
+                <h4 className="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-[0.2em] mb-6 opacity-50">
+                  Live Google Preview
+                </h4>
+                <SeoPreview
+                  title={formData.metaTitle || formData.title || "Untitled"}
+                  description={
+                    formData.metaDescription || "Please enter a description..."
+                  }
+                  slug={formData.slug || "your-slug"}
+                />
+              </div>
             )}
-            {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
+      }
+
+      case "text":
+      case "email":
+        const textValue = currentData[field.name!];
+        const isKeyHidden = String(textValue).startsWith("••");
 
-      case "password":
         return (
           <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
-              {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
+            <label className="kyro-form-label flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                {field.label || field.name}
+                {field.required && (
+                  <span className="kyro-form-label-required">*</span>
+                )}
+              </div>
+              {(field.admin?.autoGenerate || field.admin?.readOnly) && (
+                <button
+                  type="button"
+                  onClick={async (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    if (field.admin?.autoGenerate === "key") {
+                      const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
+                      let suffix = "";
+                      for (let i = 0; i < 32; i++) {
+                        suffix +=
+                          chars[Math.floor(Math.random() * chars.length)];
+                      }
+                      onFieldChange(`kyro_${suffix}`);
+                    } else if (
+                      field.admin?.readOnly &&
+                      textValue &&
+                      !isKeyHidden
+                    ) {
+                      await navigator.clipboard.writeText(String(textValue));
+                      // Store the actual key in a temp var and show hidden
+                      const actualKey = textValue;
+                      onFieldChange(actualKey + "__COPIED__");
+                      setTimeout(
+                        () => onFieldChange("••••••••••••••••••••••••••••••"),
+                        100,
+                      );
+                    }
+                  }}
+                  className="p-1.5 rounded-lg text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] transition-all"
+                  title={
+                    field.admin?.autoGenerate === "key"
+                      ? "Generate new key"
+                      : "Copy to clipboard"
+                  }
+                >
+                  {field.admin?.autoGenerate === "key" ? (
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+                    </svg>
+                  ) : (
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <rect x="8" y="8" width="12" height="12" rx="2" />
+                      <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" />
+                    </svg>
+                  )}
+                </button>
               )}
             </label>
-            <input
-              type="password"
-              className={`kyro-form-input ${error ? "kyro-form-input-error" : ""}`}
-              value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
-              disabled={disabled}
-              placeholder={`Enter ${field.label || field.name}`}
-            />
+            {field.name === "slug" ? (
+              <div className="flex items-center gap-2">
+                <div className="relative flex-1">
+                  <input
+                    type="text"
+                    className={`kyro-form-input pr-24 ${isSlugLocked ? "opacity-70 bg-[var(--kyro-bg-secondary)]" : ""}`}
+                    value={value || ""}
+                    onChange={(e) => onFieldChange(e.target.value)}
+                    disabled={isSlugLocked || disabled}
+                  />
+                  <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
+                    {!isSlugLocked && (
+                      <button
+                        type="button"
+                        onClick={() =>
+                          onFieldChange(slugifyText(formData.title || ""))
+                        }
+                        className="p-1 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)]"
+                      >
+                        <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 ${isSlugLocked ? "text-[var(--kyro-primary)]" : "text-[var(--kyro-text-secondary)]"}`}
+                    >
+                      {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>
+                </div>
+              </div>
+            ) : (
+              <input
+                type={(field as any).variant === "url" ? "url" : "text"}
+                className="kyro-form-input"
+                value={value || ""}
+                onChange={(e) => onFieldChange(e.target.value)}
+                disabled={disabled}
+              />
+            )}
+            {field.name?.toLowerCase().includes("metatitle") && (
+              <div className="flex items-center justify-between mt-1 text-[10px] font-bold uppercase tracking-wider">
+                <span
+                  className={
+                    (value?.length || 0) > 60
+                      ? "text-red-500"
+                      : (value?.length || 0) >= 40
+                        ? "text-green-500"
+                        : "text-amber-600"
+                  }
+                >
+                  {value?.length || 0} / 60 —{" "}
+                  {(value?.length || 0) > 60
+                    ? "Too Long"
+                    : (value?.length || 0) >= 40
+                      ? "Ideal"
+                      : "Short"}
+                </span>
+              </div>
+            )}
             {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
@@ -146,104 +658,182 @@ export function AutoForm({
       case "textarea":
         return (
           <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
+            <label className="kyro-form-label flex items-center justify-between">
               {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
+              {field.admin?.autoGenerate && (
+                <button
+                  type="button"
+                  onClick={() =>
+                    onFieldChange(
+                      stripHtml(
+                        formData[field.admin!.autoGenerate!] || "",
+                      ).slice(0, 160),
+                    )
+                  }
+                  className="p-1 text-[var(--kyro-text-secondary)]"
+                >
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  >
+                    <path d="M12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+                  </svg>
+                </button>
               )}
             </label>
             <textarea
-              className={`kyro-form-input kyro-form-textarea ${error ? "kyro-form-input-error" : ""}`}
+              className="kyro-form-input kyro-form-textarea"
               value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
+              onChange={(e) => onFieldChange(e.target.value)}
               disabled={disabled}
-              rows={(field as any).rows || 4}
-              placeholder={`Enter ${field.label || field.name}`}
+              rows={4}
             />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
+            {field.name?.toLowerCase().includes("metadescription") && (
+              <div className="mt-1 text-[10px] font-bold uppercase tracking-wider">
+                <span
+                  className={
+                    (value?.length || 0) > 160
+                      ? "text-red-500"
+                      : (value?.length || 0) >= 120
+                        ? "text-green-500"
+                        : "text-amber-600"
+                  }
+                >
+                  {value?.length || 0} / 160 —{" "}
+                  {(value?.length || 0) > 160
+                    ? "Too Long"
+                    : (value?.length || 0) >= 120
+                      ? "Ideal"
+                      : "Short"}
+                </span>
+              </div>
             )}
-            {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
 
-      case "number":
+      case "richtext":
+        // TEMP: replaced with textarea to isolate hydration crash
         return (
           <div key={field.name} className="kyro-form-field">
             <label className="kyro-form-label">
               {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
-              )}
             </label>
-            <input
-              type="number"
-              className={`kyro-form-input kyro-form-number ${error ? "kyro-form-input-error" : ""}`}
-              value={value ?? ""}
-              onChange={(e) =>
-                handleFieldChange(field.name!, parseFloat(e.target.value) || 0)
+            <textarea
+              className="kyro-form-input kyro-form-textarea"
+              rows={10}
+              value={
+                typeof value === "string"
+                  ? value
+                  : value
+                    ? JSON.stringify(value, null, 2)
+                    : ""
               }
+              onChange={(e) => onFieldChange(e.target.value)}
               disabled={disabled}
-              placeholder="0"
-              min={(field as any).min}
-              max={(field as any).max}
-              step={(field as any).step || "any"}
+              placeholder="Enter content..."
             />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
-            {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
 
-      case "checkbox":
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-checkbox">
-              <input
-                type="checkbox"
-                checked={value || false}
-                onChange={(e) =>
-                  handleFieldChange(field.name!, e.target.checked)
-                }
-                disabled={disabled}
-              />
-              <span className="kyro-form-checkbox-label">
+      case "group":
+        if ("fields" in field) {
+          const groupData = value || {};
+          return (
+            <div key={field.name} className="kyro-form-group">
+              <h3 className="kyro-form-group-title">
                 {field.label || field.name}
-              </span>
-            </label>
-            {field.admin?.description && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
-          </div>
-        );
+              </h3>
+              <div className="kyro-form-group-fields">
+                {(field as any).fields.map((f: Field) =>
+                  renderField(f, groupData, onFieldChange),
+                )}
+              </div>
+            </div>
+          );
+        }
+        return null;
 
-      case "date":
+      case "array":
+        if ("fields" in field) {
+          const items = Array.isArray(value) ? value : [];
+          return (
+            <div key={field.name} className="kyro-form-field">
+              <label className="kyro-form-label">
+                {field.label || field.name}
+              </label>
+              <div className="kyro-form-array">
+                {items.map((item: any, index: number) => (
+                  <div key={index} className="kyro-form-array-item">
+                    <div className="flex justify-between mb-2">
+                      <span className="text-xs font-bold opacity-50">
+                        Item {index + 1}
+                      </span>
+                      <button
+                        type="button"
+                        className="text-red-500"
+                        onClick={() =>
+                          onFieldChange(items.filter((_, i) => i !== index))
+                        }
+                      >
+                        Remove
+                      </button>
+                    </div>
+                    {(field as any).fields.map((f: Field) =>
+                      renderField(f, item, (newItem) => {
+                        const newItems = [...items];
+                        newItems[index] = newItem;
+                        onFieldChange(newItems);
+                      }),
+                    )}
+                  </div>
+                ))}
+                <button
+                  type="button"
+                  className="kyro-btn kyro-btn-secondary kyro-btn-sm"
+                  onClick={() => onFieldChange([...items, {}])}
+                >
+                  Add Item
+                </button>
+              </div>
+            </div>
+          );
+        }
+        return null;
+
+      case "blocks":
         return (
           <div key={field.name} className="kyro-form-field">
             <label className="kyro-form-label">
               {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
-              )}
             </label>
-            <input
-              type="date"
-              className={`kyro-form-input ${error ? "kyro-form-input-error" : ""}`}
-              value={value ? new Date(value).toISOString().split("T")[0] : ""}
-              onChange={(e) =>
-                handleFieldChange(
-                  field.name!,
-                  e.target.value ? new Date(e.target.value) : null,
-                )
+            <textarea
+              className="kyro-form-input kyro-form-textarea"
+              rows={10}
+              value={
+                typeof value === "string"
+                  ? value
+                  : value
+                    ? JSON.stringify(value, null, 2)
+                    : ""
               }
+              onChange={(e) => {
+                try {
+                  onFieldChange(JSON.parse(e.target.value));
+                } catch {
+                  onFieldChange(e.target.value);
+                }
+              }}
               disabled={disabled}
+              placeholder="Blocks data (JSON)..."
             />
-            {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
 
-      case "select":
+      case "number":
         return (
           <div key={field.name} className="kyro-form-field">
             <label className="kyro-form-label">
@@ -252,57 +842,31 @@ export function AutoForm({
                 <span className="kyro-form-label-required">*</span>
               )}
             </label>
-            <select
-              className={`kyro-form-input kyro-form-select ${error ? "kyro-form-input-error" : ""}`}
-              value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
+            <NumberField
+              field={field as any}
+              value={value}
+              onChange={(newValue) => onFieldChange(newValue)}
               disabled={disabled}
-            >
-              <option value="">Select {field.label || field.name}</option>
-              {(field as any).options?.map((opt: any) => (
-                <option key={opt.value || opt} value={opt.value || opt}>
-                  {opt.label || opt}
-                </option>
-              ))}
-            </select>
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
-            {error && <p className="kyro-form-error">{error}</p>}
+              error={error}
+            />
           </div>
         );
 
-      case "radio":
+      case "checkbox":
         return (
           <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
-              {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
-              )}
-            </label>
-            <div className="kyro-form-radio-group">
-              {(field as any).options?.map((opt: any) => (
-                <label key={opt.value || opt} className="kyro-form-radio">
-                  <input
-                    type="radio"
-                    name={field.name}
-                    value={opt.value || opt}
-                    checked={value === (opt.value || opt)}
-                    onChange={(e) =>
-                      handleFieldChange(field.name!, e.target.value)
-                    }
-                    disabled={disabled}
-                  />
-                  <span>{opt.label || opt}</span>
-                </label>
-              ))}
-            </div>
+            <CheckboxField
+              field={field as any}
+              value={value}
+              onChange={(newValue) => onFieldChange(newValue)}
+              disabled={disabled}
+              error={error}
+            />
             {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
 
-      case "color":
+      case "select":
         return (
           <div key={field.name} className="kyro-form-field">
             <label className="kyro-form-label">
@@ -311,23 +875,18 @@ export function AutoForm({
                 <span className="kyro-form-label-required">*</span>
               )}
             </label>
-            <div className="kyro-form-color-wrapper">
-              <input
-                type="color"
-                className={`kyro-form-color ${error ? "kyro-form-input-error" : ""}`}
-                value={value || "#000000"}
-                onChange={(e) => handleFieldChange(field.name!, e.target.value)}
-                disabled={disabled}
-              />
-              <span className="kyro-form-color-value">
-                {value || "#000000"}
-              </span>
-            </div>
+            <SelectField
+              field={field as any}
+              value={value}
+              onChange={(newValue) => onFieldChange(newValue)}
+              disabled={disabled}
+              error={error}
+            />
             {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
 
-      case "json":
+      case "date":
         return (
           <div key={field.name} className="kyro-form-field">
             <label className="kyro-form-label">
@@ -336,56 +895,43 @@ export function AutoForm({
                 <span className="kyro-form-label-required">*</span>
               )}
             </label>
-            <textarea
-              className={`kyro-form-input kyro-form-textarea kyro-form-code ${error ? "kyro-form-input-error" : ""}`}
-              value={
-                typeof value === "string"
-                  ? value
-                  : JSON.stringify(value || {}, null, 2)
-              }
-              onChange={(e) => {
-                try {
-                  handleFieldChange(field.name!, JSON.parse(e.target.value));
-                } catch {
-                  handleFieldChange(field.name!, e.target.value);
-                }
-              }}
+            <DateField
+              field={field as any}
+              value={value}
+              onChange={(newValue) => onFieldChange(newValue)}
               disabled={disabled}
-              rows={6}
-              placeholder='{"key": "value"}'
+              error={error}
             />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
             {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
 
-      case "markdown":
+      case "password":
         return (
           <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
-              {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
-              )}
+            <label className="kyro-form-label flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                {field.label || field.name}
+                {field.required && (
+                  <span className="kyro-form-label-required">*</span>
+                )}
+              </div>
             </label>
-            <textarea
-              className={`kyro-form-input kyro-form-textarea ${error ? "kyro-form-input-error" : ""}`}
+            <input
+              type="password"
+              className="kyro-form-input"
               value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
+              onChange={(e) => onFieldChange(e.target.value)}
               disabled={disabled}
-              rows={8}
-              placeholder="Enter markdown content..."
+              placeholder={
+                field.admin?.placeholder || `Enter ${field.label || field.name}`
+              }
             />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
             {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
 
-      case "code":
+      case "radio":
         return (
           <div key={field.name} className="kyro-form-field">
             <label className="kyro-form-label">
@@ -394,281 +940,140 @@ export function AutoForm({
                 <span className="kyro-form-label-required">*</span>
               )}
             </label>
-            <textarea
-              className={`kyro-form-input kyro-form-textarea kyro-form-code ${error ? "kyro-form-input-error" : ""}`}
-              value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
-              disabled={disabled}
-              rows={8}
-              placeholder="Enter code..."
-            />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
+            <div className="kyro-form-radio-group">
+              {((field as any).options || []).map((opt: any) => (
+                <label key={opt.value} className="kyro-form-radio-label">
+                  <input
+                    type="radio"
+                    name={field.name}
+                    value={opt.value}
+                    checked={value === opt.value}
+                    onChange={() => onFieldChange(opt.value)}
+                    disabled={disabled}
+                    className="kyro-form-radio"
+                  />
+                  <span>{opt.label || opt.value}</span>
+                </label>
+              ))}
+            </div>
             {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
 
-      case "group":
-        if ("fields" in field) {
-          const groupData = value || {};
-          return (
-            <div key={field.name} className="kyro-form-group">
-              <h3 className="kyro-form-group-title">
-                {field.label || field.name}
-              </h3>
-              <div className="kyro-form-group-fields">
-                {(field as any).fields.map((f: Field) =>
-                  renderField(f, groupData),
-                )}
-              </div>
-            </div>
-          );
-        }
-        return null;
-
-      case "array":
-        if ("fields" in field) {
-          const items = Array.isArray(value) ? value : [];
-          const labels = (field as any).labels || {
-            singular: "Item",
-            plural: "Items",
-          };
-          return (
-            <div key={field.name} className="kyro-form-field">
-              <label className="kyro-form-label">
-                {field.label || field.name}
-              </label>
-              <div className="kyro-form-array">
-                {items.length === 0 ? (
-                  <p className="kyro-form-array-empty">
-                    No {labels.plural.toLowerCase()} yet
-                  </p>
-                ) : (
-                  items.map((item: any, index: number) => (
-                    <div key={index} className="kyro-form-array-item">
-                      <div className="kyro-form-array-item-header">
-                        <span className="kyro-form-array-item-number">
-                          {index + 1}
-                        </span>
-                        <button
-                          type="button"
-                          className="kyro-form-array-item-remove"
-                          onClick={() => {
-                            const newItems = items.filter(
-                              (_: any, i: number) => i !== index,
-                            );
-                            handleFieldChange(field.name!, newItems);
-                          }}
-                          disabled={disabled}
-                        >
-                          <svg
-                            width="14"
-                            height="14"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                          >
-                            <path d="M18 6L6 18M6 6l12 12" />
-                          </svg>
-                        </button>
-                      </div>
-                      <div className="kyro-form-array-item-fields">
-                        {(field as any).fields.map((f: Field) => {
-                          const fieldKey = f.name!;
-                          const subFieldValue = item[fieldKey];
-                          const handleSubFieldChange = (newValue: any) => {
-                            const newItem = { ...item, [fieldKey]: newValue };
-                            const newItems = [...items];
-                            newItems[index] = newItem;
-                            handleFieldChange(field.name!, newItems);
-                          };
-                          return (
-                            <div key={fieldKey} className="kyro-form-field">
-                              <label className="kyro-form-label">
-                                {f.label || f.name}
-                              </label>
-                              {renderSubField(
-                                f,
-                                subFieldValue,
-                                handleSubFieldChange,
-                                disabled,
-                              )}
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  ))
-                )}
-                <button
-                  type="button"
-                  className="kyro-btn kyro-btn-secondary kyro-btn-sm"
-                  onClick={() => {
-                    const newItem: Record<string, any> = {};
-                    (field as any).fields.forEach((f: Field) => {
-                      if (f.defaultValue !== undefined) {
-                        newItem[f.name!] = f.defaultValue;
-                      }
+      case "color":
+        return (
+          <div key={field.name} className="kyro-form-field">
+            <label className="kyro-form-label flex items-center gap-2">
+              {field.label || field.name}
+              {field.required && (
+                <span className="kyro-form-label-required">*</span>
+              )}
+              {value && (
+                <span
+                  className="w-5 h-5 rounded border border-[var(--kyro-border)] shrink-0"
+                  style={{ backgroundColor: value }}
+                />
+              )}
+            </label>
+            <div className="flex items-center gap-3">
+              <input
+                type="color"
+                value={value || "#000000"}
+                onChange={(e) => onFieldChange(e.target.value)}
+                disabled={disabled}
+                className="kyro-form-input h-10 w-14 p-1 cursor-pointer"
+              />
+              <input
+                type="text"
+                className="kyro-form-input font-mono uppercase"
+                value={value || ""}
+                onChange={(e) => onFieldChange(e.target.value)}
+                disabled={disabled}
+                placeholder="#000000"
+              />
+            </div>
+            {error && <p className="kyro-form-error">{error}</p>}
+          </div>
+        );
+
+      case "markdown":
+        return (
+          <MarkdownField
+            key={field.name}
+            field={field as any}
+            value={value || ""}
+            onChange={(val) => onFieldChange(val)}
+            disabled={disabled}
+          />
+        );
+
+      case "button": {
+        const isLoading = loadingFields[field.name!];
+        return (
+          <div key={field.name} className="kyro-form-field">
+            <button
+              type="button"
+              disabled={isLoading || disabled}
+              onClick={async () => {
+                const action = field.admin?.action || (field as any).action;
+                const method =
+                  field.admin?.method || (field as any).method || "POST";
+                if (action) {
+                  setLoadingFields((prev) => ({
+                    ...prev,
+                    [field.name!]: true,
+                  }));
+                  try {
+                    const response = await fetch(action, {
+                      method,
+                      headers: { "Content-Type": "application/json" },
+                      body: JSON.stringify(formData),
                     });
-                    handleFieldChange(field.name!, [...items, newItem]);
-                  }}
-                  disabled={disabled}
+                    const result = await response.json();
+                    if (response.ok) {
+                      // handle result
+                    } else {
+                      // handle error
+                    }
+                  } catch (err) {
+                    console.error("Error executing action:", err);
+                  } finally {
+                    setLoadingFields((prev) => ({
+                      ...prev,
+                      [field.name!]: false,
+                    }));
+                  }
+                }
+              }}
+              className={`kyro-btn kyro-btn-md kyro-btn-secondary transition-all active:scale-95 whitespace-nowrap flex items-center gap-2 ${isLoading ? "opacity-70 cursor-not-allowed" : ""}`}
+            >
+              {isLoading && (
+                <svg
+                  className="animate-spin h-3 w-3 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
                 >
-                  <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
                     stroke="currentColor"
-                    strokeWidth="2"
-                  >
-                    <path d="M12 5v14M5 12h14" />
-                  </svg>
-                  Add {labels.singular}
-                </button>
-              </div>
-            </div>
-          );
-        }
-        return null;
-
-      case "blocks":
-        if ("blocks" in field) {
-          const blocks = Array.isArray(value) ? value : [];
-          const labels = (field as any).labels || {
-            singular: "Block",
-            plural: "Blocks",
-          };
-          return (
-            <div key={field.name} className="kyro-form-field">
-              <label className="kyro-form-label">
-                {field.label || field.name}
-              </label>
-              <div className="kyro-form-blocks">
-                {blocks.length === 0 ? (
-                  <p className="kyro-form-blocks-empty">
-                    No {labels.plural.toLowerCase()} yet
-                  </p>
-                ) : (
-                  blocks.map((block: any, index: number) => (
-                    <div key={index} className="kyro-form-block-item">
-                      <div className="kyro-form-block-item-header">
-                        <span className="kyro-form-block-item-type">
-                          {(field as any).blocks.find(
-                            (b: Block) => b.slug === block.blockType,
-                          )?.label || block.blockType}
-                        </span>
-                        <div className="kyro-form-block-item-actions">
-                          <button
-                            type="button"
-                            className="kyro-form-block-item-move"
-                            onClick={() => {
-                              if (index > 0) {
-                                const newBlocks = [...blocks];
-                                [newBlocks[index - 1], newBlocks[index]] = [
-                                  newBlocks[index],
-                                  newBlocks[index - 1],
-                                ];
-                                handleFieldChange(field.name!, newBlocks);
-                              }
-                            }}
-                            disabled={disabled || index === 0}
-                          >
-                            <svg
-                              width="14"
-                              height="14"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              strokeWidth="2"
-                            >
-                              <path d="M18 15l-6-6-6 6" />
-                            </svg>
-                          </button>
-                          <button
-                            type="button"
-                            className="kyro-form-block-item-remove"
-                            onClick={() => {
-                              const newBlocks = blocks.filter(
-                                (_: any, i: number) => i !== index,
-                              );
-                              handleFieldChange((field as any).name, newBlocks);
-                            }}
-                            disabled={disabled}
-                          >
-                            <svg
-                              width="14"
-                              height="14"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              strokeWidth="2"
-                            >
-                              <path d="M18 6L6 18M6 6l12 12" />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                      <div className="kyro-form-block-item-fields">
-                        {(field as any).blocks
-                          .find((b: Block) => b.slug === block.blockType)
-                          ?.fields?.map((f: Field) => {
-                            if (!f.name) return null;
-                            const fieldKey = f.name;
-                            const blockData = block;
-                            const handleBlockFieldChange = (newValue: any) => {
-                              const newBlock = {
-                                ...blockData,
-                                [fieldKey]: newValue,
-                              };
-                              const newBlocks = [...blocks];
-                              newBlocks[index] = newBlock;
-                              handleFieldChange(field.name!, newBlocks);
-                            };
-                            return (
-                              <div key={fieldKey} className="kyro-form-field">
-                                <label className="kyro-form-label">
-                                  {f.label || f.name}
-                                </label>
-                                {renderSubField(
-                                  f,
-                                  block[fieldKey],
-                                  handleBlockFieldChange,
-                                  disabled,
-                                )}
-                              </div>
-                            );
-                          })}
-                      </div>
-                    </div>
-                  ))
-                )}
-                <div className="kyro-form-blocks-add">
-                  <span className="kyro-form-blocks-add-label">Add block:</span>
-                  <div className="kyro-form-blocks-add-buttons">
-                    {(field as any).blocks.map((block: Block) => (
-                      <button
-                        key={block.slug}
-                        type="button"
-                        className="kyro-btn kyro-btn-secondary kyro-btn-sm"
-                        onClick={() => {
-                          const newBlock = { blockType: block.slug };
-                          handleFieldChange(field.name!, [...blocks, newBlock]);
-                        }}
-                        disabled={disabled}
-                      >
-                        {block.label}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div>
-          );
-        }
-        return null;
+                    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>
+              )}
+              {isLoading ? "Processing..." : field.label || "Click"}
+            </button>
+          </div>
+        );
+      }
 
       case "relationship":
         return (
@@ -676,143 +1081,435 @@ export function AutoForm({
             key={field.name}
             field={field as any}
             value={value}
-            onChange={(newValue) => handleFieldChange(field.name!, newValue)}
+            onChange={(newValue) => onFieldChange(newValue)}
             disabled={disabled}
             error={error}
           />
         );
 
       case "upload":
+      case "image":
         return (
-          <UploadField
+          <ImageField
             key={field.name}
             field={field as any}
             value={value}
-            onChange={(newValue) => handleFieldChange(field.name!, newValue)}
+            onChange={(newValue) => onFieldChange(newValue)}
             disabled={disabled}
-            error={error}
           />
         );
 
-      case "richtext":
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
-              {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
-              )}
-            </label>
-            <textarea
-              className={`kyro-form-input kyro-form-textarea kyro-form-richtext ${error ? "kyro-form-input-error" : ""}`}
-              value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
-              disabled={disabled}
-              rows={8}
-              placeholder="Enter rich text content..."
-            />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
+      default:
+        return null;
+    }
+  };
+
+  const renderHeader = () => {
+    const docTitle = formData.title || formData.name || "Untitled";
+    const status = formData.status || "draft";
+    const lastModified = formData.updatedAt
+      ? new Date(formData.updatedAt).toLocaleString()
+      : "Just now";
+    const createdAt = formData.createdAt
+      ? new Date(formData.createdAt).toLocaleString()
+      : "Just now";
+
+    return (
+      <header className="surface-tile px-8 py-6 flex items-center justify-between sticky top-0 z-50 border-b border-[var(--kyro-border)] mb-8 bg-[var(--kyro-surface)] backdrop-blur-md">
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center gap-4">
+            <a
+              href={`/${collectionSlug}`}
+              className="p-2 border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-bg-secondary)] transition-colors"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2.5"
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+            </a>
+            <h1 className="text-xl font-bold tracking-tighter">{docTitle}</h1>
+          </div>
+          <div className="flex items-center gap-4 text-[11px] font-medium tracking-wide opacity-60 ml-12">
+            <span className="flex items-center gap-1.5 capitalize">
+              <span
+                className={`h-1.5 w-1.5 rounded-full ${status === "published" ? "bg-green-500" : "bg-amber-500"}`}
+              />
+              {status}
+            </span>
+            {hasUnsavedChanges && (
+              <>
+                <span className="opacity-30">—</span>
+                <button
+                  type="button"
+                  onClick={() => setFormData(initialData)}
+                  className="text-[var(--kyro-primary)] hover:underline"
+                >
+                  Revert to published
+                </button>
+              </>
             )}
-            {error && <p className="kyro-form-error">{error}</p>}
+            <span className="border-l border-[var(--kyro-border)] pl-4">
+              Modified {lastModified}
+            </span>
+            <span className="border-l border-[var(--kyro-border)] pl-4">
+              Created {createdAt}
+            </span>
           </div>
-        );
+        </div>
 
-      default: {
-        const anyField = field as any;
-        return (
-          <div key={anyField.name} className="kyro-form-field">
-            <span className="kyro-form-unsupported">
-              Unsupported field type: {anyField.type}
-            </span>
+        <div className="flex items-center gap-6">
+          <div className="flex items-center gap-1 bg-[var(--kyro-bg-secondary)] p-1 rounded-xl border border-[var(--kyro-border)]">
+            {["edit", "version", "api"].map((v) => (
+              <button
+                key={v}
+                type="button"
+                onClick={() => setView(v as any)}
+                className={`px-5 py-2 text-xs font-black rounded-lg transition-all ${view === v ? "bg-[var(--kyro-surface)] shadow-sm border border-[var(--kyro-border)] text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
+              >
+                {v.toUpperCase()}
+              </button>
+            ))}
           </div>
-        );
-      }
+
+          <div className="h-8 w-px bg-[var(--kyro-border)] mx-2" />
+
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => setShowPreview(!showPreview)}
+              className={`p-2.5 rounded-xl transition-all flex items-center gap-2 ${showPreview ? "bg-[var(--kyro-primary)] text-white shadow-lg" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`}
+              title="Live Preview"
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3" />
+              </svg>
+              {showPreview && (
+                <span className="text-[10px] font-black uppercase tracking-widest pr-1">
+                  Active
+                </span>
+              )}
+            </button>
+            <button
+              type="button"
+              className="p-2.5 text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)] rounded-xl transition-all"
+              title="Desktop View"
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                <line x1="15" y1="3" x2="15" y2="21" />
+              </svg>
+            </button>
+
+            <button
+              id="btn-save"
+              type="button"
+              onClick={() =>
+                (document.getElementById("btn-save") as any)?.click()
+              }
+              className="kyro-btn kyro-btn-primary px-6 py-2.5 text-xs rounded-xl shadow-lg transition-all"
+            >
+              Publish Changes
+            </button>
+
+            <button
+              type="button"
+              className="p-2.5 text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)] rounded-xl transition-all"
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="3"
+              >
+                <circle cx="12" cy="12" r="1.5" fill="currentColor" />
+                <circle cx="12" cy="5" r="1.5" fill="currentColor" />
+                <circle cx="12" cy="19" r="1.5" fill="currentColor" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </header>
+    );
+  };
+
+  const renderEditView = () => {
+    // Single layout: no split grid, no sidebar column — just a clean field list
+    if (layout === "single") {
+      return (
+        <div className="w-full space-y-8">
+          <div className="surface-tile p-8 space-y-8">
+            {config.fields.map((f) => renderField(f))}
+          </div>
+        </div>
+      );
     }
+
+    // Default split layout
+    return (
+      <div
+        className={`w-full mx-auto grid gap-8 pb-32 transition-all duration-700 ${showPreview ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1 lg:grid-cols-[1fr_380px]"}`}
+      >
+        <div className="space-y-8 animate-in fade-in slide-in-from-left-4 duration-500">
+          {config.tabs ? (
+            renderField({ type: "tabs", tabs: config.tabs } as any)
+          ) : (
+            <div className="surface-tile p-8 space-y-8">
+              {config.fields
+                .filter(
+                  (f) => !f.admin?.position || f.admin.position === "main",
+                )
+                .map((f) => renderField(f))}
+            </div>
+          )}
+        </div>
+
+        {showPreview ? (
+          <div className="sticky top-36 h-[calc(100vh-280px)] animate-in fade-in slide-in-from-right-10 duration-700">
+            <div className="w-full h-full rounded-3xl border border-[var(--kyro-border)] bg-[var(--kyro-bg-secondary)] shadow-2xl overflow-hidden relative group">
+              <div className="absolute top-4 left-4 z-10 flex items-center gap-2">
+                <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+                <span className="text-[10px] font-black uppercase tracking-widest text-white/60">
+                  Live Preview Mode
+                </span>
+              </div>
+              <iframe
+                src={`/${collectionSlug}/${formData.slug || formData.id}?preview=true`}
+                className="w-full h-full border-none"
+                title="Live Preview"
+              />
+              <div className="absolute inset-0 bg-transparent pointer-events-none border-[12px] border-[var(--kyro-surface)] rounded-3xl" />
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
+            {config.fields.some((f) => f.admin?.position === "sidebar") && (
+              <div className="surface-tile p-6 space-y-6">
+                <h3 className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">
+                  Sidebar Settings
+                </h3>
+                {config.fields
+                  .filter((f) => f.admin?.position === "sidebar")
+                  .map((f) => renderField(f))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
   };
 
-  return (
-    <div className="kyro-form">
-      {config.fields.map((field) => renderField(field))}
+  const renderVersionView = () => (
+    <div className="w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 px-8 pb-12">
+      <div className="surface-tile p-8">
+        <h2 className="text-2xl font-black mb-2">Version History</h2>
+        <p className="text-[11px] text-[var(--kyro-text-secondary)] opacity-50 mb-8 uppercase tracking-widest font-bold">
+          Snapshots are created automatically every time you save changes.
+        </p>
+
+        {loadingVersions ? (
+          <div className="flex justify-center py-20">
+            <span className="animate-spin text-[var(--kyro-primary)]">⌛</span>
+          </div>
+        ) : versions.length === 0 ? (
+          <p className="opacity-50 font-medium py-12 text-center italic">
+            No previous versions found for this document.
+          </p>
+        ) : (
+          <div className="space-y-4">
+            {versions.map((v, i) => (
+              <div
+                key={v.id}
+                className="p-6 rounded-2xl border border-[var(--kyro-border)] bg-[var(--kyro-bg-secondary)] flex items-center justify-between group hover:border-[var(--kyro-primary)] transition-all duration-300"
+              >
+                <div className="flex items-center gap-6">
+                  <div className="w-12 h-12 rounded-2xl bg-[var(--kyro-bg-secondary)] flex items-center justify-center border border-[var(--kyro-border)]">
+                    <span className="text-[10px] font-black opacity-40">
+                      v{versions.length - i}
+                    </span>
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-3 mb-1">
+                      <span className="text-sm font-black text-[var(--kyro-text-primary)]">
+                        {new Date(v.createdAt).toLocaleString("en-US", {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
+                      </span>
+                    </div>
+                    <p className="text-[11px] text-[var(--kyro-text-secondary)] font-medium italic opacity-60">
+                      System captured snapshot
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  <button
+                    type="button"
+                    onClick={() => handleRestoreVersion(v.id)}
+                    className="px-5 py-2.5 rounded-xl border border-[var(--kyro-border)] text-[var(--kyro-text-primary)] text-xs font-black uppercase tracking-widest hover:bg-[var(--kyro-primary)] hover:text-white hover:border-[var(--kyro-primary)] transition-all active:scale-95 shadow-lg group-hover:shadow-[var(--kyro-primary)]"
+                  >
+                    Restore
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   );
-}
 
-function renderSubField(
-  field: Field,
-  value: any,
-  onChange: (value: any) => void,
-  disabled?: boolean,
-) {
-  switch (field.type) {
-    case "text":
-    case "email":
-    case "password":
-      return (
-        <input
-          type={field.type === "email" ? "email" : "text"}
-          className="kyro-form-input"
-          value={value || ""}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-        />
-      );
-    case "number":
-      return (
-        <input
-          type="number"
-          className="kyro-form-input kyro-form-number"
-          value={value ?? ""}
-          onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
-          disabled={disabled}
-        />
-      );
-    case "checkbox":
-      return (
-        <input
-          type="checkbox"
-          checked={value || false}
-          onChange={(e) => onChange(e.target.checked)}
-          disabled={disabled}
-        />
-      );
-    case "textarea":
-      return (
-        <textarea
-          className="kyro-form-input kyro-form-textarea"
-          value={value || ""}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-          rows={3}
-        />
-      );
-    case "select":
-      return (
-        <select
-          className="kyro-form-input kyro-form-select"
-          value={value || ""}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-        >
-          <option value="">Select...</option>
-          {(field as any).options?.map((opt: any) => (
-            <option key={opt.value || opt} value={opt.value || opt}>
-              {opt.label || opt}
-            </option>
-          ))}
-        </select>
-      );
-    default:
-      return (
-        <input
-          type="text"
-          className="kyro-form-input"
-          value={value || ""}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-        />
-      );
-  }
+  const renderApiView = () => (
+    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4">
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8">
+        <div className="surface-tile p-8 min-w-0">
+          <h2 className="text-xl font-black mb-6">Response Payload</h2>
+          <div className="bg-[#0f172a] p-6 rounded-2xl border border-white/5 overflow-x-auto max-h-[800px]">
+            <pre className="text-blue-300 text-xs font-mono whitespace-pre-wrap break-all">
+              {JSON.stringify(formData, null, 2)}
+            </pre>
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <div className="surface-tile p-8 space-y-6">
+            <h2 className="text-xl font-black mb-6">API Info</h2>
+
+            <div className="space-y-6">
+              <div>
+                <label className="text-[10px] font-bold uppercase tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
+                  Reference Path
+                </label>
+                <div className="relative group">
+                  <code className="block bg-[var(--kyro-bg-secondary)] p-4 rounded-xl border border-[var(--kyro-border)] text-[var(--kyro-text-primary)] text-xs font-mono break-all leading-relaxed">
+                    {`/api/${collectionSlug}/${formData.id || ""}`}
+                  </code>
+                </div>
+              </div>
+
+              <div>
+                <label className="text-[10px] font-bold uppercase tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-3">
+                  Methods Allowed
+                </label>
+                <div className="flex gap-2">
+                  <span className="px-3 py-1.5 bg-green-500/10 text-green-500 rounded-lg font-black text-[9px] uppercase tracking-wider">
+                    GET
+                  </span>
+                  <span className="px-3 py-1.5 bg-amber-500/10 text-amber-500 rounded-lg font-black text-[9px] uppercase tracking-wider">
+                    PATCH
+                  </span>
+                  <span className="px-3 py-1.5 bg-red-500/10 text-red-500 rounded-lg font-black text-[9px] uppercase tracking-wider">
+                    DELETE
+                  </span>
+                </div>
+              </div>
+
+              <div className="pt-6 border-t border-[var(--kyro-border)]">
+                <label className="text-[10px] font-bold uppercase tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-4">
+                  Security Policy
+                </label>
+                <div className="space-y-3">
+                  {[
+                    {
+                      id: "auth-required",
+                      label: "Authorization required",
+                      checked: true,
+                    },
+                    {
+                      id: "auth-admin",
+                      label: "System administrator only",
+                      checked: false,
+                    },
+                    {
+                      id: "auth-api",
+                      label: "API Key authentication allowed",
+                      checked: true,
+                    },
+                  ].map((item) => (
+                    <label
+                      key={item.id}
+                      className="flex items-center gap-3 cursor-pointer group"
+                    >
+                      <div
+                        className={`w-4 h-4 rounded border transition-all flex items-center justify-center ${item.checked ? "bg-[var(--kyro-primary)] border-[var(--kyro-primary)]" : "border-[var(--kyro-border)] group-hover:border-[var(--kyro-text-secondary)]"}`}
+                      >
+                        {item.checked && (
+                          <svg
+                            width="10"
+                            height="10"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="white"
+                            strokeWidth="4"
+                          >
+                            <path d="M20 6L9 17l-5-5" />
+                          </svg>
+                        )}
+                      </div>
+                      <span className="text-xs font-medium text-[var(--kyro-text-secondary)] group-hover:text-[var(--kyro-text-primary)] transition-colors">
+                        {item.label}
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+
+              <div className="pt-6 border-t border-[var(--kyro-border)]">
+                <label className="text-[10px] font-bold uppercase tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
+                  Usage Help
+                </label>
+                <p className="text-[11px] text-[var(--kyro-text-secondary)] leading-relaxed">
+                  Include the{" "}
+                  <code className="text-[var(--kyro-text-primary)] font-bold">
+                    Authorization: Bearer &lt;token&gt;
+                  </code>{" "}
+                  header to perform write operations on this document.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      {layout !== "single" && renderHeader()}
+      <main className="w-full">
+        {view === "edit" && renderEditView()}
+        {view === "version" && renderVersionView()}
+        {view === "api" && renderApiView()}
+      </main>
+    </div>
+  );
 }
 
 interface UploadFieldProps {
@@ -821,6 +1518,7 @@ interface UploadFieldProps {
   onChange: (value: any) => void;
   disabled?: boolean;
   error?: string;
+  documentName?: string;
 }
 
 function UploadField({
@@ -829,6 +1527,7 @@ function UploadField({
   onChange,
   disabled,
   error,
+  documentName,
 }: UploadFieldProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [preview, setPreview] = useState<string | null>(null);
@@ -963,33 +1662,33 @@ function RelationshipField({
     ? field.relationTo[0]
     : field.relationTo;
 
-  useEffect(() => {
-    if (isOpen) {
-      setLoading(true);
-      fetch(`/api/${targetCollection}?limit=50`)
-        .then((res) => res.json())
-        .then((data) => {
-          setOptions(data.docs || []);
-          setLoading(false);
-        })
-        .catch((err) => {
-          console.error("Failed to fetch relations:", err);
-          setLoading(false);
-        });
-    }
-  }, [isOpen, targetCollection]);
+  const fetchOptions = () => {
+    setLoading(true);
+    fetch(`/api/${targetCollection}?limit=50`)
+      .then((res) => res.json())
+      .then((data) => {
+        setOptions(data.docs || []);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Failed to fetch relations:", err);
+        setLoading(false);
+      });
+  };
 
-  const filteredOptions = options.filter((opt) => {
-    const term = search.toLowerCase();
-    const searchableFields = ["title", "name", "filename", "id", "slug"];
-    return searchableFields.some(
-      (key) => opt[key] && String(opt[key]).toLowerCase().includes(term),
-    );
-  });
+  useEffect(() => {
+    fetchOptions();
+  }, [targetCollection]);
 
   const getLabel = (opt: any) => {
     if (!opt) return "";
-    return opt.title || opt.name || opt.filename || opt.slug || opt.id;
+    return (
+      opt.title || opt.name || opt.label || opt.filename || opt.slug || opt.id
+    );
+  };
+
+  const findOptionById = (id: string) => {
+    return options.find((opt) => opt.id === id);
   };
 
   const isSelected = (optId: string) => {
@@ -1018,6 +1717,33 @@ function RelationshipField({
     }
   };
 
+  const renderSelectedValue = () => {
+    if (!value) return null;
+    if (isMultiple && Array.isArray(value)) {
+      if (value.length === 0) return "None selected";
+      return value
+        .map((v) => {
+          const id = v.id || v;
+          const opt = findOptionById(id);
+          return opt ? getLabel(opt) : id;
+        })
+        .join(", ");
+    }
+    const id = value.id || value;
+    const opt = findOptionById(id);
+    return opt ? getLabel(opt) : id;
+  };
+
+  const filteredOptions = search
+    ? (options || []).filter((opt) => {
+        const term = search.toLowerCase();
+        const searchableFields = ["title", "name", "label", "filename", "slug"];
+        return searchableFields.some(
+          (key) => opt[key] && String(opt[key]).toLowerCase().includes(term),
+        );
+      })
+    : options || [];
+
   return (
     <div className="kyro-form-field">
       <label className="kyro-form-label">
@@ -1041,15 +1767,7 @@ function RelationshipField({
 
         <div className="kyro-form-relationship-value">
           {value ? (
-            isMultiple && Array.isArray(value) ? (
-              value.length > 0 ? (
-                `${value.length} items selected`
-              ) : (
-                "None selected"
-              )
-            ) : (
-              `Selected: ${getLabel(value) || value.id || value}`
-            )
+            renderSelectedValue()
           ) : (
             <span className="kyro-form-relationship-empty">
               Click to search and select...
@@ -1099,7 +1817,7 @@ function RelationshipField({
                   >
                     <span>{getLabel(opt)}</span>
                     <span className="kyro-relation-modal-item-id">
-                      ({opt.id.slice(0, 8)}...)
+                      {opt.id ? `(${String(opt.id).slice(0, 8)}...)` : ""}
                     </span>
                   </button>
                 ))
@@ -1121,3 +1839,41 @@ function RelationshipField({
     </div>
   );
 }
+
+// SEO Utilities
+function stripHtml(html: string) {
+  if (typeof html !== "string") return "";
+  return html.replace(/<[^>]*>?/gm, "").trim();
+}
+
+const SeoPreview = ({
+  title,
+  description,
+  slug,
+}: {
+  title: string;
+  description: string;
+  slug: string;
+}) => (
+  <div className="bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg p-6 max-w-2xl shadow-sm transition-colors duration-300">
+    <div className="flex items-center gap-2 mb-2">
+      <div className="w-7 h-7 bg-[var(--kyro-bg-secondary)] rounded-full flex items-center justify-center text-[10px] text-[var(--kyro-text-primary)] font-medium border border-[var(--kyro-border)]">
+        K
+      </div>
+      <div className="flex flex-col">
+        <span className="text-sm font-medium text-[var(--kyro-text-primary)] leading-tight">
+          kyro-cms.com
+        </span>
+        <span className="text-[12px] text-[var(--kyro-text-secondary)] leading-tight opacity-80">
+          https://kyro-cms.com › posts › {slug}
+        </span>
+      </div>
+    </div>
+    <h3 className="text-[20px] text-[#2563eb] dark:text-[#60a5fa] font-medium hover:underline cursor-pointer mb-1 leading-tight transition-colors">
+      {title}
+    </h3>
+    <p className="text-[14px] text-[var(--kyro-text-secondary)] leading-relaxed line-clamp-2">
+      {description}
+    </p>
+  </div>
+);