@kyro-cms/admin 0.12.6 → 0.12.8

package/src/components/fields/ArrayLayout.tsx

@@ -27,7 +27,7 @@ interface ArrayLayoutProps {
   renderField: (
     field: Field,
     parentData: Record<string, unknown>,
-    onChange: (value: unknown) => void,
+    onChange: (value: Record<string, unknown>) => void,
   ) => React.ReactNode;
   disabled?: boolean;
 }
@@ -46,12 +46,16 @@ interface SortableArrayItemProps {
   setOpenIndex: (index: number | null) => void;
   item: Record<string, unknown>;
   field: Field;
-  renderField: any;
-  onChangeItem: (newItem: any) => void;
+  renderField: (
+    field: Field,
+    parentData: Record<string, unknown>,
+    onChange: (value: Record<string, unknown>) => void,
+  ) => React.ReactNode;
+  onChangeItem: (newItem: Record<string, unknown>) => void;
   onRemove: () => void;
   disabled?: boolean;
   compact: boolean;
-  getItemLabel: (item: any) => string;
+  getItemLabel: (item: Record<string, unknown>) => string;
 }
 
 function SortableArrayItem({
@@ -68,31 +72,28 @@ function SortableArrayItem({
   compact,
   getItemLabel,
 }: SortableArrayItemProps) {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
   const {
     attributes,
     listeners,
     setNodeRef,
     transform,
     transition,
-    isDragging,
   } = useSortable({ id });
 
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
-    zIndex: isDragging ? 10 : 1,
-    opacity: isDragging ? 0.8 : 1,
   };
 
+  const fields = (field as Field & { fields?: Field[] }).fields || [];
+
   if (compact) {
     return (
       <div
         ref={setNodeRef}
         style={style}
-        className={`flex items-start gap-2 px-3 py-1.5 border-b border-[var(--kyro-border)] last:border-b-0 hover:bg-[var(--kyro-sidebar-active)]/5 transition-colors ${
-          isDragging ? "bg-[var(--kyro-surface-accent)]/50" : ""
-        }`}
+        className="flex items-start gap-2 px-3 py-1.5 border-b border-[var(--kyro-border)] last:border-b-0"
       >
         <div
           {...attributes}
@@ -104,8 +105,8 @@ function SortableArrayItem({
         <span className="text-[10px] font-bold text-[var(--kyro-text-muted)] pt-2.5 min-w-[18px] text-center">
           {index + 1}
         </span>
-        <div className={`flex-1 min-w-0 ${((field as any).fields || []).length >= 3 ? "flex flex-col gap-1.5" : "flex items-start gap-1.5"}`}>
-          {((field as any).fields || []).map((f: Field) => (
+        <div className={`flex-1 min-w-0 ${fields.length >= 3 ? "flex flex-col gap-1.5" : "flex items-start gap-1.5"}`}>
+          {fields.map((f: Field) => (
             <div key={f.name} className="flex-1 min-w-0">
               {renderField(f, item, onChangeItem)}
             </div>
@@ -130,50 +131,44 @@ function SortableArrayItem({
     <div
       ref={setNodeRef}
       style={style}
-      className={`border border-[var(--kyro-border)] rounded-lg overflow-hidden group bg-[var(--kyro-surface)] ${
-        isDragging ? "border-[var(--kyro-primary)] shadow-md" : ""
-      }`}
+      className={`border border-[var(--kyro-border)] rounded-[var(--kyro-radius-md)] bg-[var(--kyro-surface-accent)]/10 overflow-hidden`}
     >
-      <div className="w-full flex items-center justify-between p-3 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-sidebar-active)]/10 transition-colors">
-        <div className="flex items-center gap-2 flex-1 min-w-0">
-          <div
-            {...attributes}
-            {...listeners}
-            className="p-1 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] hover:bg-[var(--kyro-border)] rounded flex-shrink-0"
-          >
-            <GripVertical className="w-4 h-4" />
-          </div>
-          <span
-            role="button"
-            tabIndex={0}
-            onClick={() => setOpenIndex(isOpen ? null : index)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                setOpenIndex(isOpen ? null : index);
-              }
-            }}
-            className="text-xs font-bold tracking-widest text-[var(--kyro-text-muted)] truncate cursor-pointer flex-1 py-1 text-left"
-          >
-            {getItemLabel(item) || `Item ${index + 1}`}
+      <div className="flex items-center gap-2 px-4 py-3 bg-[var(--kyro-surface-accent)]/20 border-b border-[var(--kyro-border)]">
+        <div
+          {...attributes}
+          {...listeners}
+          className="p-1 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] hover:bg-[var(--kyro-surface-accent)] rounded flex-shrink-0"
+        >
+          <GripVertical className="w-3.5 h-3.5" />
+        </div>
+        
+        <span className="text-xs font-bold text-[var(--kyro-text-muted)] min-w-[18px]">
+          {index + 1}
+        </span>
+        
+        <div className="flex-1 min-w-0">
+          <span className="text-xs font-medium text-[var(--kyro-text-primary)] truncate block">
+            {getItemLabel(item) || `${field.label || field.name} Item`}
           </span>
         </div>
-        <div className="flex items-center gap-1">
+
+        <div className="flex items-center gap-1 flex-shrink-0">
           <button
             type="button"
             disabled={disabled}
-            onClick={(e) => {
-              e.stopPropagation();
-              onRemove();
-            }}
-            className="text-[11px] font-bold text-[var(--kyro-error)] opacity-0 group-hover:opacity-100 transition-opacity disabled:opacity-30 hover:bg-[var(--kyro-danger-bg)] rounded px-1.5 py-0.5"
+            onClick={onRemove}
+            className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-error)] transition-colors disabled:opacity-30 p-1 rounded hover:bg-[var(--kyro-surface-accent)]"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
-            Remove
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
           </button>
+          
           <button
             type="button"
             onClick={() => setOpenIndex(isOpen ? null : index)}
-            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            className="p-1 rounded hover:bg-[var(--kyro-surface-accent)] transition-colors"
           >
             {isOpen ? (
               <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
@@ -185,7 +180,7 @@ function SortableArrayItem({
       </div>
       {isOpen && (
         <div className="p-4 bg-[var(--kyro-surface)] space-y-4">
-          {((field as any).fields || []).map((f: Field) =>
+          {fields.map((f: Field) =>
             renderField(f, item, onChangeItem),
           )}
         </div>
@@ -201,7 +196,7 @@ export function ArrayLayout({
   renderField,
   disabled,
 }: ArrayLayoutProps) {
-  const items = Array.isArray(value) ? value : [];
+  const items = (Array.isArray(value) ? value : []) as Record<string, unknown>[];
   const fields = (field as Field & { fields?: { name?: string; type?: string; relationTo?: string; label?: string }[] }).fields || [];
   const firstField = fields[0];
   const labelField = firstField?.name || "user";
@@ -212,14 +207,14 @@ export function ArrayLayout({
   React.useEffect(() => {
     let needsUpdate = false;
     const updated = items
-      .filter((item: any) => {
+      .filter((item) => {
         if (typeof item !== "object" || item === null) {
           needsUpdate = true;
           return false;
         }
         return true;
       })
-      .map((item: any) => {
+      .map((item) => {
         if (!item.id && !item._key) {
           needsUpdate = true;
           return {
@@ -239,13 +234,14 @@ export function ArrayLayout({
       const val = item[key];
       if (val && typeof val === "string") return val;
     }
-    for (const f of fields) {
+    const fieldsTyped = fields as Field[];
+    for (const f of fieldsTyped) {
       if (f.type === "text" || f.type === "textarea") {
         const val = item[f.name!];
         if (val && typeof val === "string") return val;
       }
-      if (f.type === "group" && (f as any).fields) {
-        for (const inner of (f as any).fields) {
+      if (f.type === "group" && (f as Field & { fields?: Field[] }).fields) {
+        for (const inner of (f as Field & { fields?: Field[] }).fields || []) {
           if (inner.type === "text" || inner.type === "textarea") {
             const group = item[f.name!] as Record<string, unknown> | undefined;
             const val = group?.[inner.name!];
@@ -272,8 +268,8 @@ export function ArrayLayout({
     const { active, over } = event;
     if (!over || active.id === over.id) return;
 
-    const oldIndex = items.findIndex((item: any) => (item.id || item._key) === active.id);
-    const newIndex = items.findIndex((item: any) => (item.id || item._key) === over.id);
+    const oldIndex = items.findIndex((item) => (item.id || item._key) === active.id);
+    const newIndex = items.findIndex((item) => (item.id || item._key) === over.id);
 
     if (oldIndex !== -1 && newIndex !== -1) {
       const newItems = [...items];
@@ -284,7 +280,7 @@ export function ArrayLayout({
   };
 
   const itemIds = React.useMemo(() => {
-    return items.map((item: any) => item?.id || item?._key || "");
+    return items.map((item) => (item?.id || item?._key || "") as string);
   }, [items]);
 
   if (isRelationship) {
@@ -296,11 +292,12 @@ export function ArrayLayout({
             name: labelField,
             relationTo: (field as Field & { fields?: { relationTo?: string }[] }).fields?.[0]?.relationTo || "",
             hasMany: true,
-            label: (field as Field & { fields?: { label?: string }[] }).fields?.[0]?.label,
+            // Omit the inner field's label to avoid duplicate labels in the UI
+            label: undefined,
           }}
           value={(items as Record<string, unknown>[]).map((i) => i[labelField]).filter(Boolean)}
           onChange={(newValue) => {
-            const newItems = (newValue || []).map((id: string) => ({
+            const newItems = ((newValue as string[]) || []).map((id: string) => ({
               [labelField]: id,
               id: Math.random().toString(36).substr(2, 9),
             }));

package/src/components/fields/BlocksField.tsx

@@ -75,7 +75,7 @@ const SortableBlockComponent = ({
   onDuplicate,
   compact,
 }: {
-  block: Record<string, unknown>;
+  block: Record<string, any>;
   index: number;
   blockSchema?: Record<string, any>;
   editingBlockId: string | null;

package/src/components/fields/ChildrenField.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { ChildBlocksTree } from "../blocks/ChildBlocksTree";
+import type { BlockData } from "@kyro-cms/core/client";
 
 interface ChildrenFieldProps {
   blockId: string;
-  children: Record<string, unknown>[];
-  onUpdateChildren: (newChildren: Record<string, unknown>[]) => void;
+  children: BlockData[];
+  onUpdateChildren: (newChildren: BlockData[]) => void;
   label?: string;
   compact?: boolean;
 }

package/src/components/fields/CodeField.tsx

@@ -3,6 +3,7 @@ import { githubLight } from "@uiw/codemirror-theme-github";
 import { aura } from "@uiw/codemirror-theme-aura";
 import type { CodeField as CodeFieldType } from "@kyro-cms/core/client";
 import { useTheme } from "../ThemeProvider";
+import type { Extension } from "@codemirror/state";
 
 interface CodeFieldProps {
   field: CodeFieldType;
@@ -74,7 +75,7 @@ export const CodeField: React.FC<CodeFieldProps> = ({
 }) => {
   const [isMounted, setIsMounted] = useState(false);
   const [isDark, setIsDark] = useState(false);
-  const [extensions, setExtensions] = useState<unknown[]>([]);
+  const [extensions, setExtensions] = useState<Extension[]>([]);
   const [loading, setLoading] = useState(false);
   const [copied, setCopied] = useState(false);
   const [isFullScreen, setIsFullScreen] = useState(false);
@@ -104,7 +105,7 @@ export const CodeField: React.FC<CodeFieldProps> = ({
         const loader =
           languageExtensions[language] || languageExtensions.javascript;
         const ext = await loader();
-        setExtensions([ext]);
+        setExtensions([ext as Extension]);
       } catch (err) {
         console.error("Failed to load language extension:", err);
         setExtensions([]);

package/src/components/fields/ColumnsField.tsx

@@ -1,16 +1,17 @@
 import React from "react";
 import { ChildBlocksTree } from "../blocks/ChildBlocksTree";
+import type { BlockData } from "@kyro-cms/core/client";
 
 interface ColumnData {
   id: number;
-  children: Record<string, unknown>[];
+  children: BlockData[];
 }
 
 interface ColumnsFieldProps {
   columns?: number;
   columnData?: ColumnData[];
   onColumnsChange: (columns: number) => void;
-  onUpdateColumnChildren: (columnIndex: number, newChildren: Record<string, unknown>[]) => void;
+  onUpdateColumnChildren: (columnIndex: number, newChildren: BlockData[]) => void;
   compact?: boolean;
 }
 

package/src/components/fields/DateField.tsx

@@ -32,8 +32,8 @@ export default function DateField({
         value={value == null ? "" : value}
         onChange={(e) => onChange?.(e.target.value)}
         disabled={disabled || isReadOnly}
-        min={field.minDate}
-        max={field.maxDate}
+        min={field.minDate as string | undefined}
+        max={field.maxDate as string | undefined}
         required={field.required}
         className={`kyro-form-input ${
           disabled || isReadOnly ? "opacity-50 cursor-not-allowed" : ""

package/src/components/fields/FieldLayout.tsx

@@ -31,11 +31,11 @@ export default function FieldLayout({
         {children}
       </div>
 
-      {(field.admin?.description || error) && (
+      {((field.admin?.description as string | undefined) || error) && (
         <div className="flex flex-col gap-1.5 px-1">
-          {field.admin?.description && !error && (
+          {((field.admin?.description as string | undefined) && !error) && (
             <p className="text-[11px] leading-relaxed text-[var(--kyro-text-muted)] font-medium opacity-60 italic">
-              {field.admin.description}
+              {field.admin?.description as string}
             </p>
           )}
           {error && (

package/src/components/fields/GroupLayout.tsx

@@ -8,7 +8,7 @@ interface GroupLayoutProps {
   renderField: (
     field: Field,
     parentData: Record<string, unknown>,
-    onChange: (value: unknown) => void,
+    onChange: (value: Record<string, unknown>) => void,
   ) => React.ReactNode;
 }
 
@@ -29,7 +29,7 @@ export function GroupLayout({
 
       </div>
       <div className={field.admin?.inline ? "flex items-start gap-4" : "space-y-6"}>
-        {(field as Field & { fields?: Field[] }).fields.map((f: Field) =>
+        {(field as Field & { fields?: Field[] }).fields?.map((f: Field) =>
           renderField(f, groupData, onChange),
         )}
       </div>

package/src/components/fields/IconField.tsx

@@ -43,7 +43,7 @@ export default function IconField({
             type="text"
             value={normalizedValue}
             onChange={(e) => onChange?.(e.target.value)}
-            placeholder={field.admin?.placeholder || "e.g., activity"}
+            placeholder={(field.admin?.placeholder as string) || "e.g., activity"}
             disabled={disabled || isReadOnly}
             required={field.required}
             className={`kyro-form-input ${disabled || isReadOnly ? "opacity-70 bg-[var(--kyro-bg-secondary)] cursor-not-allowed" : ""}`}

package/src/components/fields/MarkdownField.tsx

@@ -237,8 +237,8 @@ export const MarkdownField: React.FC<MarkdownFieldProps> = ({
         </div>
       )}
 
-      {field.admin?.description && !error && (
-        <p className="kyro-form-help">{field.admin.description}</p>
+      {((field.admin?.description as string | undefined) && !error) && (
+        <p className="kyro-form-help">{field.admin?.description as string}</p>
       )}
       {error && <p className="kyro-form-error">{error}</p>}
     </div>

package/src/components/fields/NumberField.tsx

@@ -31,11 +31,11 @@ export default function NumberField({
         id={field.name}
         value={value ?? ""}
         onChange={(e) => onChange?.(parseFloat(e.target.value) || 0)}
-        placeholder={field.admin?.placeholder}
+        placeholder={field.admin?.placeholder as string | undefined}
         disabled={disabled || isReadOnly}
-        min={field.min}
-        max={field.max}
-        step={field.step || (field.integer ? 1 : "any")}
+        min={field.min as number | undefined}
+        max={field.max as number | undefined}
+        step={(field.step as number | string | undefined) || (field.integer ? 1 : "any")}
         required={field.required}
         className={`kyro-form-input ${
           disabled || isReadOnly ? "opacity-50 cursor-not-allowed" : ""

package/src/components/fields/RelationshipField.tsx

@@ -235,7 +235,10 @@ export function RelationshipField({
 
   const getValueId = (val: unknown): string => {
     if (typeof val === "object" && val !== null) {
-      return (val as { value?: string }).value || (val as { id?: string }).id || "";
+      const inner = (val as { value?: unknown }).value ?? (val as { id?: unknown }).id;
+      // Recursively unwrap in case of doubly-nested {relationTo, value: {relationTo, value: id}}
+      if (inner !== undefined && inner !== null) return getValueId(inner);
+      return "";
     }
     return String(val);
   };