@kyro-cms/admin 0.8.0 → 0.9.1

package/src/components/fields/CheckboxField.tsx

@@ -11,12 +11,16 @@ interface CheckboxFieldComponentProps {
 
 export default function CheckboxField({
   field,
-  value = false,
+  value,
   onChange,
   error,
   disabled,
 }: CheckboxFieldComponentProps) {
-  const isReadOnly = field.admin?.readOnly;
+  const isReadOnly =
+    typeof field.admin?.readOnly === "function"
+      ? false
+      : Boolean(field.admin?.readOnly);
+  const checked = value ?? false;
 
   return (
     <FieldLayout
@@ -27,7 +31,7 @@ export default function CheckboxField({
       <label className="flex items-center gap-2.5 cursor-pointer group py-0.5">
         <input
           type="checkbox"
-          checked={value}
+          checked={checked}
           onChange={(e) => onChange?.(e.target.checked)}
           disabled={disabled || isReadOnly}
           className={`w-4 h-4 rounded border-[var(--kyro-border)] text-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)] transition-all ${

package/src/components/fields/DateField.tsx

@@ -16,7 +16,10 @@ export default function DateField({
   error,
   disabled,
 }: DateFieldComponentProps) {
-  const isReadOnly = field.admin?.readOnly;
+  const isReadOnly =
+    typeof field.admin?.readOnly === "function"
+      ? false
+      : Boolean(field.admin?.readOnly);
 
   return (
     <FieldLayout

package/src/components/fields/GroupLayout.tsx

@@ -22,10 +22,10 @@ export function GroupLayout({
 
   return (
     <div className="kyro-form-group border border-[var(--kyro-border)] rounded-[var(--kyro-radius-lg)] p-6 bg-[var(--kyro-surface-accent)]/30">
-      <h3 className="text-sm font-bold  tracking-widest text-[var(--kyro-text-primary)] mb-6 border-b border-[var(--kyro-border)] pb-2 inline-block">
+      <h3 className="text-sm font-bold tracking-widest text-[var(--kyro-text-primary)] mb-6 border-b border-[var(--kyro-border)] pb-2 inline-block">
         {field.label || field.name}
       </h3>
-      <div className="space-y-6">
+      <div className={field.admin?.inline ? "flex items-start gap-4" : "space-y-6"}>
         {(field as Field & { fields?: Field[] }).fields.map((f: Field) =>
           renderField(f, groupData, onChange),
         )}

package/src/components/fields/HeadingSubheadingField.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+interface HeadingSubheadingFieldProps {
+  heading?: string;
+  subheading?: string;
+  onChange: (field: string, value: string) => void;
+  compact?: boolean;
+}
+
+export const HeadingSubheadingField: React.FC<HeadingSubheadingFieldProps> = ({
+  heading = "",
+  subheading = "",
+  onChange,
+  compact = false,
+}) => {
+  const inputClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  const textareaClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] min-h-[50px] resize-none focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] min-h-[80px] resize-none focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  return (
+    <div className={compact ? "space-y-2" : "space-y-3"}>
+      <input
+        type="text"
+        value={heading}
+        onChange={(e) => onChange("heading", e.target.value)}
+        className={`${inputClass} font-bold text-base`}
+        placeholder="Heading..."
+      />
+      <textarea
+        value={subheading}
+        onChange={(e) => onChange("subheading", e.target.value)}
+        className={textareaClass}
+        placeholder="Subheading..."
+      />
+    </div>
+  );
+};
+
+export default HeadingSubheadingField;

package/src/components/fields/ListField.tsx

@@ -32,13 +32,13 @@ export const ListField: React.FC<ListFieldProps> = ({
   };
 
   const inputClass = compact
-    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded-md bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
     : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
 
   return (
     <div className={compact ? "space-y-1.5" : "space-y-2"}>
       {items.length === 0 ? (
-        <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
+        <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-md">
           No items. Type below to add.
         </div>
       ) : (

package/src/components/fields/NumberField.tsx

@@ -16,7 +16,10 @@ export default function NumberField({
   error,
   disabled,
 }: NumberFieldComponentProps) {
-  const isReadOnly = field.admin?.readOnly;
+  const isReadOnly =
+    typeof field.admin?.readOnly === "function"
+      ? false
+      : Boolean(field.admin?.readOnly);
 
   return (
     <FieldLayout

package/src/components/fields/RelationshipField.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, useCallback } from "react";
 import { Search, X, ChevronDown, Loader2 } from "../ui/icons";
 import { apiGet, buildSearchQuery } from "../../lib/api";
 
@@ -15,12 +15,33 @@ interface RelationshipFieldProps {
       placeholder?: string;
     };
   };
-  value?: string | string[] | null;
-  onChange?: (value: string | string[] | null) => void;
+  value?: unknown;
+  onChange?: (value: unknown) => void;
   error?: string;
   disabled?: boolean;
 }
 
+interface ResolvedDoc {
+  id: string;
+  relationTo?: string;
+  [key: string]: unknown;
+}
+
+function getLabel(opt: Record<string, unknown>): string {
+  const mainTabs = opt?.mainTabs as Record<string, unknown> | undefined;
+
+  return (
+    (opt?.title as string) ||
+    (mainTabs?.title as string) ||
+    (opt?.name as string) ||
+    (opt?.label as string) ||
+    (opt?.email as string) ||
+    (opt?.filename as string) ||
+    (opt?.slug as string) ||
+    "Untitled"
+  );
+}
+
 export function RelationshipField({
   field,
   value,
@@ -30,28 +51,85 @@ export function RelationshipField({
 }: RelationshipFieldProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState("");
-  const [options, setOptions] = useState<Record<string, unknown>[]>([]);
+  const [options, setOptions] = useState<ResolvedDoc[]>([]);
   const [loading, setLoading] = useState(false);
+  const [selectedDocs, setSelectedDocs] = useState<ResolvedDoc[]>([]);
+  const fetchedIdsRef = useRef<Set<string>>(new Set());
   const containerRef = useRef<HTMLDivElement>(null);
+  const onChangeRef = useRef<(value: unknown) => void>(() => {});
+  onChangeRef.current = onChange || (() => {});
 
   const isMultiple = field.hasMany;
   const relationTo = Array.isArray(field.relationTo)
     ? field.relationTo
     : [field.relationTo];
-  const targetCollection = relationTo[0];
+  const isPolymorphic = relationTo.length > 1;
+  const [activeRelation, setActiveRelation] = useState(relationTo[0]);
+
+  const extractIds = useCallback((): string[] => {
+    if (!value) return [];
+    const items = isMultiple
+      ? Array.isArray(value) ? value : []
+      : value ? [value] : [];
+    return items.map((item) => {
+      if (typeof item === "object" && item !== null) {
+        return (item as { value?: string }).value || (item as { id?: string }).id || "";
+      }
+      return String(item);
+    }).filter(Boolean);
+  }, [value, isMultiple]);
 
-  const fetchOptions = (query: string = "") => {
+  const fetchSelectedDocs = useCallback((ids: string[]) => {
+    if (ids.length === 0) return;
+    ids.forEach((id) => {
+      if (fetchedIdsRef.current.has(id)) return;
+      fetchedIdsRef.current.add(id);
+      const rel = isPolymorphic
+        ? (() => {
+            if (!value) return activeRelation;
+            const items = isMultiple
+              ? Array.isArray(value) ? value : []
+              : [value];
+            const match = items.find((item) => {
+              if (typeof item === "object" && item !== null) {
+                return (item as { value?: string }).value === id || (item as { id?: string }).id === id;
+              }
+              return false;
+            });
+            return match && typeof match === "object" ? (match as { relationTo?: string }).relationTo || activeRelation : activeRelation;
+          })()
+        : activeRelation;
+      apiGet<Record<string, unknown>>(`/api/${rel}/${id}`)
+        .then((response) => {
+          const doc = (response as any).data || response;
+          if (!doc || typeof doc !== "object") return;
+
+          setSelectedDocs((prev) => {
+            if (prev.some((d) => d.id === id)) return prev;
+            return [...prev, { ...doc, id: String((doc as any).id), relationTo: rel }];
+          });
+        })
+        .catch(() => {});
+    });
+  }, [isPolymorphic, value, activeRelation, isMultiple]);
+
+  useEffect(() => {
+    const ids = extractIds();
+    fetchSelectedDocs(ids);
+  }, [extractIds, fetchSelectedDocs]);
+
+  const fetchOptions = useCallback((query: string = "") => {
     setLoading(true);
     const searchFields = ["title", "name", "label", "email"];
-    const url = `/api/${targetCollection}?${buildSearchQuery(query, searchFields)}`;
+    const url = `/api/${activeRelation}?${buildSearchQuery(query, searchFields)}`;
 
-    apiGet(url)
+    apiGet<{ docs?: Record<string, unknown>[] }>(url)
       .then((data) => {
         setOptions((prev) => {
           const existingIds = new Set(prev.map((o) => o.id));
-const newDocs = (data.docs || []).filter(
-             (d: Record<string, unknown>) => !existingIds.has(d.id as string),
-           );
+          const newDocs: ResolvedDoc[] = (data.docs || []).filter(
+            (d) => !existingIds.has(d.id as string),
+          ).map((d) => ({ ...d, id: d.id as string }));
           return [...prev, ...newDocs];
         });
         setLoading(false);
@@ -59,39 +137,14 @@ const newDocs = (data.docs || []).filter(
       .catch(() => {
         setLoading(false);
       });
-  };
-
-const fetchSelectedItems = () => {
-     const items: (string | Record<string, unknown>)[] = isMultiple
-      ? Array.isArray(value)
-        ? value
-        : []
-      : value
-        ? [value]
-        : [];
-    items.forEach((itemId) => {
-      const id = typeof itemId === "object" ? itemId?.id : itemId;
-      if (id && !options.some((o) => o.id === id)) {
-        apiGet(`/api/${targetCollection}/${id}`)
-          .then((doc) => {
-            setOptions((prev) => [...prev, doc]);
-          })
-          .catch(() => {});
-      }
-    });
-  };
-
-  useEffect(() => {
-    if (value) {
-      fetchSelectedItems();
-    }
-  }, [value, targetCollection]);
+  }, [activeRelation]);
 
   useEffect(() => {
     if (isOpen) {
+      setOptions([]);
       fetchOptions(search);
     }
-  }, [isOpen, targetCollection]);
+  }, [isOpen, activeRelation]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -106,24 +159,14 @@ const fetchSelectedItems = () => {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
-  const getLabel = (opt: Record<string, unknown>) => {
-    return (
-      opt?.title ||
-      opt?.name ||
-      opt?.label ||
-      opt?.email ||
-      opt?.filename ||
-      opt?.slug ||
-      String(opt?.id) ||
-      "Untitled"
-    );
-  };
-
-  const getValueId = (val: string | Record<string, unknown>) => {
-    return val?.id || val;
+  const getValueId = (val: unknown): string => {
+    if (typeof val === "object" && val !== null) {
+      return (val as { value?: string }).value || (val as { id?: string }).id || "";
+    }
+    return String(val);
   };
 
-  const isSelected = (opt: Record<string, unknown>) => {
+  const isSelected = (opt: Record<string, unknown>): boolean => {
     const optId = opt.id;
     if (!value) return false;
     if (isMultiple && Array.isArray(value)) {
@@ -135,60 +178,56 @@ const fetchSelectedItems = () => {
   const handleSelect = (opt: Record<string, unknown>) => {
     const optId = opt.id;
     if (isMultiple) {
-      const current = Array.isArray(value) ? value : [];
+      const current: unknown[] = Array.isArray(value) ? value : [];
       if (isSelected(opt)) {
-        onChange?.(current.filter((v) => getValueId(v) !== optId));
+        onChangeRef.current?.(current.filter((v) => getValueId(v) !== optId));
       } else {
-        onChange?.([...current, optId]);
+        const newItem = isPolymorphic
+          ? { relationTo: activeRelation, value: optId }
+          : optId;
+        onChangeRef.current?.([...current, newItem]);
       }
     } else {
       if (isSelected(opt)) {
-        onChange?.(null);
+        onChangeRef.current?.(null);
       } else {
-        onChange?.(optId);
+        const newItem = isPolymorphic
+          ? { relationTo: activeRelation, value: optId }
+          : optId;
+        onChangeRef.current?.(newItem);
         setIsOpen(false);
         setSearch("");
       }
     }
   };
 
-  const handleClear = () => {
-    onChange?.(isMultiple ? [] : null);
-  };
-
   const renderSelectedItems = () => {
     if (!value) return null;
 
-    let items: (string | Record<string, unknown>)[];
-    if (isMultiple) {
-      items = Array.isArray(value) ? value : [];
-    } else {
-      items = value ? [value] : [];
-    }
+    const items: unknown[] = isMultiple
+      ? Array.isArray(value) ? value : []
+      : value ? [value] : [];
 
     return (
       <div className="flex flex-wrap gap-1.5 mt-2">
-        {items.map((item, idx) => {
-          const rawId = typeof item === "object" ? item?.id || item : item;
-          const opt = options.find((o) => o.id === rawId);
-          const label = opt ? getLabel(opt) : String(rawId).slice(0, 8);
+        {items.map((item) => {
+          const rawId = getValueId(item);
+          const doc = selectedDocs.find((d) => d.id === rawId);
+          const label = doc ? getLabel(doc) : rawId.slice(0, 12);
+          const rel = isPolymorphic && doc ? doc.relationTo : null;
           return (
             <span
-              key={idx}
+              key={rawId}
               className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md bg-[var(--kyro-sidebar-active)]/10 text-[var(--kyro-sidebar-active)]"
             >
+              {rel && <span className="opacity-60 mr-0.5">{rel}:</span>}
               {label}
               {!disabled && (
                 <button
                   type="button"
                   onClick={() => {
-                    if (isMultiple) {
-onChange?.(
-                         (items as (string | Record<string, unknown>)[]).filter((_: unknown, i: number) => i !== idx),
-                      );
-                    } else {
-                      onChange?.(null);
-                    }
+                    const filtered = items.filter((value) => getValueId(value) !== rawId);
+                    onChangeRef.current?.(isMultiple ? filtered : (filtered[0] ?? null));
                   }}
                   className="hover:opacity-70"
                 >
@@ -213,6 +252,28 @@ onChange?.(
         </label>
       )}
       <div ref={containerRef} className="relative">
+        {isPolymorphic && (
+          <div className="flex gap-1 mb-1.5">
+            {relationTo.map((rel) => (
+              <button
+                key={rel}
+                type="button"
+                onClick={() => {
+                  setActiveRelation(rel);
+                  setOptions([]);
+                  setSearch("");
+                }}
+                className={`px-2 py-0.5 text-[10px] font-bold rounded transition-colors ${
+                  activeRelation === rel
+                    ? "kyro-btn-primary"
+                    : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
+                }`}
+              >
+                {rel}
+              </button>
+            ))}
+          </div>
+        )}
         <div className="relative">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
           <input
@@ -225,10 +286,15 @@ onChange?.(
             }}
             onFocus={() => setIsOpen(true)}
             placeholder={
-              field.admin?.placeholder || `Search ${targetCollection}...`
+              field.admin?.placeholder || `Search ${activeRelation}...`
+            }
+            disabled={
+              disabled ||
+              (typeof field.admin?.readOnly === "function"
+                ? false
+                : Boolean(field.admin?.readOnly))
             }
-            disabled={disabled || field.admin?.readOnly}
-            className="w-full pl-9 pr-10 py-2 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent disabled:opacity-50"
+            className="w-full pl-9 pr-10 py-2 border border-[var(--kyro-border)] rounded-md bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent disabled:opacity-50"
           />
           <div className="absolute right-3 top-1/2 -translate-y-1/2">
             {loading ? (
@@ -242,7 +308,7 @@ onChange?.(
         </div>
 
         {isOpen && (
-          <div className="absolute z-20 w-full mt-1 border border-[var(--kyro-border)] rounded-lg shadow-lg bg-[var(--kyro-surface)] max-h-64 overflow-auto">
+          <div className="relative z-20 w-full mt-1 border border-[var(--kyro-border)] rounded-lg shadow-lg bg-[var(--kyro-surface)] max-h-64 overflow-auto">
             {loading ? (
               <div className="p-4 text-center text-sm text-[var(--kyro-text-muted)]">
                 Loading...
@@ -272,7 +338,7 @@ onChange?.(
                         </span>
                       )}
                     </div>
-                    {opt.slug && (
+                    {"slug" in opt && typeof opt.slug === "string" && (
                       <div className="text-xs text-[var(--kyro-text-muted)]">
                         {opt.slug}
                       </div>