@kyro-cms/admin 0.1.2

package/src/components/AutoForm.tsx

@@ -0,0 +1,1123 @@
+import { useState, useRef, useEffect } from "react";
+import type { CollectionConfig, Field, Block } from "@kyro-cms/core";
+
+interface AutoFormProps {
+  config: CollectionConfig;
+  data?: Record<string, any>;
+  errors?: Record<string, string>;
+  onChange?: (data: Record<string, any>) => void;
+  disabled?: boolean;
+  collectionSlug?: string;
+}
+
+export function AutoForm({
+  config,
+  data = {},
+  errors = {},
+  onChange,
+  disabled,
+}: AutoFormProps) {
+  const handleFieldChange = (fieldName: string, value: any) => {
+    onChange?.({
+      ...data,
+      [fieldName]: value,
+    });
+  };
+
+  const renderField = (field: Field, parentData?: Record<string, any>) => {
+    if (field.admin?.hidden) return null;
+
+    const value =
+      parentData !== undefined ? parentData[field.name!] : data[field.name!];
+    const error = errors[field.name!];
+
+    if (field.type === "row" && "fields" in field) {
+      return (
+        <div
+          key={field.name || `row-${Math.random()}`}
+          className="kyro-form-row"
+        >
+          {(field as any).fields.map((f: Field) => renderField(f, parentData))}
+        </div>
+      );
+    }
+
+    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 (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))}
+              </div>
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    switch (field.type) {
+      case "text":
+      case "email":
+        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={
+                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>
+            )}
+            {error && <p className="kyro-form-error">{error}</p>}
+          </div>
+        );
+
+      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>
+            <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}`}
+            />
+            {error && <p className="kyro-form-error">{error}</p>}
+          </div>
+        );
+
+      case "textarea":
+        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 ${error ? "kyro-form-input-error" : ""}`}
+              value={value || ""}
+              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
+              disabled={disabled}
+              rows={(field as any).rows || 4}
+              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 "number":
+        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)
+              }
+              disabled={disabled}
+              placeholder="0"
+              min={(field as any).min}
+              max={(field as any).max}
+              step={(field as any).step || "any"}
+            />
+            {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">
+                {field.label || field.name}
+              </span>
+            </label>
+            {field.admin?.description && (
+              <p className="kyro-form-help">{field.admin.description}</p>
+            )}
+          </div>
+        );
+
+      case "date":
+        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,
+                )
+              }
+              disabled={disabled}
+            />
+            {error && <p className="kyro-form-error">{error}</p>}
+          </div>
+        );
+
+      case "select":
+        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>
+            <select
+              className={`kyro-form-input kyro-form-select ${error ? "kyro-form-input-error" : ""}`}
+              value={value || ""}
+              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
+              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>}
+          </div>
+        );
+
+      case "radio":
+        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>
+            {error && <p className="kyro-form-error">{error}</p>}
+          </div>
+        );
+
+      case "color":
+        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-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>
+            {error && <p className="kyro-form-error">{error}</p>}
+          </div>
+        );
+
+      case "json":
+        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-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);
+                }
+              }}
+              disabled={disabled}
+              rows={6}
+              placeholder='{"key": "value"}'
+            />
+            {field.admin?.description && !error && (
+              <p className="kyro-form-help">{field.admin.description}</p>
+            )}
+            {error && <p className="kyro-form-error">{error}</p>}
+          </div>
+        );
+
+      case "markdown":
+        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 ${error ? "kyro-form-input-error" : ""}`}
+              value={value || ""}
+              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
+              disabled={disabled}
+              rows={8}
+              placeholder="Enter markdown content..."
+            />
+            {field.admin?.description && !error && (
+              <p className="kyro-form-help">{field.admin.description}</p>
+            )}
+            {error && <p className="kyro-form-error">{error}</p>}
+          </div>
+        );
+
+      case "code":
+        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-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>
+            )}
+            {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;
+                      }
+                    });
+                    handleFieldChange(field.name!, [...items, newItem]);
+                  }}
+                  disabled={disabled}
+                >
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    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;
+
+      case "relationship":
+        return (
+          <RelationshipField
+            key={field.name}
+            field={field as any}
+            value={value}
+            onChange={(newValue) => handleFieldChange(field.name!, newValue)}
+            disabled={disabled}
+            error={error}
+          />
+        );
+
+      case "upload":
+        return (
+          <UploadField
+            key={field.name}
+            field={field as any}
+            value={value}
+            onChange={(newValue) => handleFieldChange(field.name!, 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>
+            )}
+            {error && <p className="kyro-form-error">{error}</p>}
+          </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>
+        );
+      }
+    }
+  };
+
+  return (
+    <div className="kyro-form">
+      {config.fields.map((field) => renderField(field))}
+    </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}
+        />
+      );
+  }
+}
+
+interface UploadFieldProps {
+  field: any;
+  value: any;
+  onChange: (value: any) => void;
+  disabled?: boolean;
+  error?: string;
+}
+
+function UploadField({
+  field,
+  value,
+  onChange,
+  disabled,
+  error,
+}: UploadFieldProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const isImage = (file: File) => file.type.startsWith("image/");
+
+  const handleFile = (file: File) => {
+    if (isImage(file)) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setPreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+    onChange({
+      filename: file.name,
+      size: file.size,
+      type: file.type,
+      url: URL.createObjectURL(file),
+    });
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files[0];
+    if (file) handleFile(file);
+  };
+
+  return (
+    <div 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-upload ${isDragging ? "kyro-form-upload-dragging" : ""} ${error ? "kyro-form-upload-error" : ""}`}
+        onDragOver={(e) => {
+          e.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={handleDrop}
+        onClick={() => inputRef.current?.click()}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          className="kyro-form-upload-input"
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (file) handleFile(file);
+          }}
+          disabled={disabled}
+          accept={field.mimeTypes?.join(",")}
+        />
+        {preview || value?.url ? (
+          <div className="kyro-form-upload-preview">
+            <img
+              src={preview || value.url}
+              alt="Preview"
+              className="kyro-form-upload-image"
+            />
+            <div className="kyro-form-upload-info">
+              <span className="kyro-form-upload-filename">
+                {value?.filename || "Uploaded file"}
+              </span>
+              <button
+                type="button"
+                className="kyro-form-upload-change"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  inputRef.current?.click();
+                }}
+              >
+                Change
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="kyro-form-upload-placeholder">
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+            >
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="17,8 12,3 7,8" />
+              <line x1="12" y1="3" x2="12" y2="15" />
+            </svg>
+            <span>Drop image here or click to upload</span>
+            <span className="kyro-form-upload-hint">
+              PNG, JPG, GIF up to 10MB
+            </span>
+          </div>
+        )}
+      </div>
+      {field.admin?.description && !error && (
+        <p className="kyro-form-help">{field.admin.description}</p>
+      )}
+      {error && <p className="kyro-form-error">{error}</p>}
+    </div>
+  );
+}
+
+interface RelationshipFieldProps {
+  field: any;
+  value: any;
+  onChange: (value: any) => void;
+  disabled?: boolean;
+  error?: string;
+}
+
+function RelationshipField({
+  field,
+  value,
+  onChange,
+  disabled,
+  error,
+}: RelationshipFieldProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [options, setOptions] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const isMultiple = field.hasMany;
+  const targetCollection = Array.isArray(field.relationTo)
+    ? 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 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),
+    );
+  });
+
+  const getLabel = (opt: any) => {
+    if (!opt) return "";
+    return opt.title || opt.name || opt.filename || opt.slug || opt.id;
+  };
+
+  const isSelected = (optId: string) => {
+    if (!value) return false;
+    if (isMultiple) {
+      return (value as any[]).some((v) => (v.id || v) === optId);
+    }
+    return (value.id || value) === optId;
+  };
+
+  const toggleSelection = (opt: any) => {
+    if (isMultiple) {
+      const current = Array.isArray(value) ? value : [];
+      if (isSelected(opt.id)) {
+        onChange(current.filter((item) => (item.id || item) !== opt.id));
+      } else {
+        onChange([...current, opt.id]);
+      }
+    } else {
+      if (isSelected(opt.id)) {
+        onChange(null);
+      } else {
+        onChange(opt.id);
+        setIsOpen(false);
+      }
+    }
+  };
+
+  return (
+    <div 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-relationship"
+        onClick={() => !disabled && setIsOpen(true)}
+        style={disabled ? { opacity: 0.5, cursor: "not-allowed" } : {}}
+      >
+        <div className="kyro-form-relationship-header">
+          <span className="kyro-form-relationship-type">
+            {targetCollection}
+          </span>
+          {isMultiple && (
+            <span className="kyro-form-relationship-badge">Multiple</span>
+          )}
+        </div>
+
+        <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}`
+            )
+          ) : (
+            <span className="kyro-form-relationship-empty">
+              Click to search and select...
+            </span>
+          )}
+        </div>
+      </div>
+
+      {field.admin?.description && !error && (
+        <p className="kyro-form-help">{field.admin.description}</p>
+      )}
+      {error && <p className="kyro-form-error">{error}</p>}
+
+      {/* Modal */}
+      {isOpen && (
+        <div className="kyro-modal-overlay" onClick={() => setIsOpen(false)}>
+          <div
+            className="kyro-relation-modal"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="kyro-relation-modal-header">
+              <h3>Select {field.label || field.name}</h3>
+              <input
+                type="text"
+                autoFocus
+                placeholder={`Search in ${targetCollection}...`}
+                className="kyro-relation-modal-search"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </div>
+
+            <div className="kyro-relation-modal-list">
+              {loading ? (
+                <div className="kyro-relation-modal-empty">Loading...</div>
+              ) : filteredOptions.length === 0 ? (
+                <div className="kyro-relation-modal-empty">
+                  No results found.
+                </div>
+              ) : (
+                filteredOptions.map((opt) => (
+                  <button
+                    key={opt.id}
+                    type="button"
+                    className={`kyro-relation-modal-item ${isSelected(opt.id) ? "selected" : ""}`}
+                    onClick={() => toggleSelection(opt)}
+                  >
+                    <span>{getLabel(opt)}</span>
+                    <span className="kyro-relation-modal-item-id">
+                      ({opt.id.slice(0, 8)}...)
+                    </span>
+                  </button>
+                ))
+              )}
+            </div>
+
+            <div className="kyro-relation-modal-footer">
+              <button
+                type="button"
+                className="kyro-btn kyro-btn-secondary kyro-btn-sm"
+                onClick={() => setIsOpen(false)}
+              >
+                Done
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}