@kyro-cms/admin 0.10.20 → 0.11.0

package/src/components/fields/ArrayLayout.tsx

@@ -1,7 +1,21 @@
 import React from "react";
 import type { Field } from "@kyro-cms/core/client";
 import RelationshipField from "./RelationshipField";
-import { ChevronDown, ChevronUp } from "../ui/icons";
+import { ChevronDown, ChevronUp, GripVertical } from "../ui/icons";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 
 const SIMPLE_TYPES = new Set(["text", "textarea", "number", "checkbox", "select", "radio", "color", "email", "password", "code", "markdown", "upload"]);
 
@@ -23,6 +37,161 @@ function isCompactArray(field: Field): boolean {
   return subFields.every((f: Field) => SIMPLE_TYPES.has(f.type));
 }
 
+// Sortable item wrapper
+interface SortableArrayItemProps {
+  id: string;
+  index: number;
+  isOpen: boolean;
+  setOpenIndex: (index: number | null) => void;
+  item: Record<string, unknown>;
+  field: Field;
+  renderField: any;
+  onChangeItem: (newItem: any) => void;
+  onRemove: () => void;
+  disabled?: boolean;
+  compact: boolean;
+  getItemLabel: (item: any) => string;
+}
+
+function SortableArrayItem({
+  id,
+  index,
+  isOpen,
+  setOpenIndex,
+  item,
+  field,
+  renderField,
+  onChangeItem,
+  onRemove,
+  disabled,
+  compact,
+  getItemLabel,
+}: SortableArrayItemProps) {
+  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,
+  };
+
+  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" : ""
+        }`}
+      >
+        <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 mt-1"
+        >
+          <GripVertical className="w-3.5 h-3.5" />
+        </div>
+        <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 flex items-start gap-1.5 min-w-0">
+          {((field as any).fields || []).map((f: Field) => (
+            <div key={f.name} className="flex-1 min-w-0">
+              {renderField(f, item, onChangeItem)}
+            </div>
+          ))}
+        </div>
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={onRemove}
+          className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-error)] transition-colors disabled:opacity-30 p-0.5 mt-1.5 flex-shrink-0"
+          title="Remove"
+        >
+          <svg width="12" height="12" 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>
+      </div>
+    );
+  }
+
+  return (
+    <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" : ""
+      }`}
+    >
+      <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}`}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <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"
+          >
+            Remove
+          </button>
+          <button
+            type="button"
+            onClick={() => setOpenIndex(isOpen ? null : index)}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+          >
+            {isOpen ? (
+              <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+            ) : (
+              <ChevronDown className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+            )}
+          </button>
+        </div>
+      </div>
+      {isOpen && (
+        <div className="p-4 bg-[var(--kyro-surface)] space-y-4">
+          {((field as any).fields || []).map((f: Field) =>
+            renderField(f, item, onChangeItem),
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function ArrayLayout({
   field,
   value,
@@ -37,6 +206,32 @@ export function ArrayLayout({
   const isRelationship = firstField?.type === "relationship";
   const [openIndex, setOpenIndex] = React.useState<number | null>(0);
 
+  // Sync stable IDs and heal bad data
+  React.useEffect(() => {
+    let needsUpdate = false;
+    const updated = items
+      .filter((item: any) => {
+        if (typeof item !== "object" || item === null) {
+          needsUpdate = true;
+          return false;
+        }
+        return true;
+      })
+      .map((item: any) => {
+        if (!item.id && !item._key) {
+          needsUpdate = true;
+          return {
+            ...item,
+            id: Math.random().toString(36).substr(2, 9),
+          };
+        }
+        return item;
+      });
+    if (needsUpdate) {
+      onChange(updated);
+    }
+  }, [value, onChange]);
+
   function getItemLabel(item: Record<string, unknown>): string {
     for (const key of ["label", "title", "name"]) {
       const val = item[key];
@@ -59,12 +254,41 @@ export function ArrayLayout({
     }
     return "";
   }
+
   const compact = isCompactArray(field);
 
-  return (
-    <div className="kyro-form-field">
-      <label className="kyro-form-label">{field.label || field.name}</label>
-      {isRelationship ? (
+  // dnd-kit sensors setup
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 3,
+      },
+    })
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    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);
+
+    if (oldIndex !== -1 && newIndex !== -1) {
+      const newItems = [...items];
+      const [movedItem] = newItems.splice(oldIndex, 1);
+      newItems.splice(newIndex, 0, movedItem);
+      onChange(newItems);
+    }
+  };
+
+  const itemIds = React.useMemo(() => {
+    return items.map((item: any) => item?.id || item?._key || "");
+  }, [items]);
+
+  if (isRelationship) {
+    return (
+      <div className="kyro-form-field">
+        <label className="kyro-form-label">{field.label || field.name}</label>
         <RelationshipField
           field={{
             name: labelField,
@@ -76,118 +300,109 @@ export function ArrayLayout({
           onChange={(newValue) => {
             const newItems = (newValue || []).map((id: string) => ({
               [labelField]: id,
+              id: Math.random().toString(36).substr(2, 9),
             }));
             onChange(newItems);
           }}
           disabled={disabled}
         />
-      ) : compact ? (
-        <div className="kyro-form-array kyro-form-array--compact border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30 rounded-md overflow-hidden">
-          {(items as Record<string, unknown>[]).map((item, index) => (
-            <div
-              key={index}
-              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"
+      </div>
+    );
+  }
+
+  return (
+    <div className="kyro-form-field">
+      <label className="kyro-form-label">{field.label || field.name}</label>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        {compact ? (
+          <div className="kyro-form-array kyro-form-array--compact border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30 rounded-md overflow-hidden">
+            <SortableContext
+              items={itemIds}
+              strategy={verticalListSortingStrategy}
+            >
+              {(items as Record<string, unknown>[]).map((item, index) => (
+                <SortableArrayItem
+                  key={item.id as string || item._key as string || index}
+                  id={item.id as string || item._key as string || `idx-${index}`}
+                  index={index}
+                  isOpen={false}
+                  setOpenIndex={() => {}}
+                  item={item}
+                  field={field}
+                  renderField={renderField}
+                  onChangeItem={(newItem) => {
+                    const newItems = [...items];
+                    newItems[index] = newItem;
+                    onChange(newItems);
+                  }}
+                  onRemove={() => onChange(items.filter((_: unknown, i: number) => i !== index))}
+                  disabled={disabled}
+                  compact={true}
+                  getItemLabel={getItemLabel}
+                />
+              ))}
+            </SortableContext>
+            <button
+              type="button"
+              className="w-full py-2 border-2 border-dashed border-[var(--kyro-border)] rounded-none text-xs font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:border-[var(--kyro-primary)] transition-all disabled:opacity-50"
+              disabled={disabled}
+              onClick={() => onChange([...items, { id: Math.random().toString(36).substr(2, 9) }])}
             >
-              <span className="text-[10px] font-bold text-[var(--kyro-text-muted)] pt-2 min-w-[18px] text-center">
-                {index + 1}
-              </span>
-              <div className="flex-1 flex items-start gap-1.5 min-w-0">
-                  {(field as Field & { fields?: Field[] }).fields.map((f: Field) => {
+              + Add Item
+            </button>
+          </div>
+        ) : (
+          <div className="kyro-form-array border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30 rounded-md p-3 space-y-4">
+            <SortableContext
+              items={itemIds}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="space-y-2">
+                {(items as Record<string, unknown>[]).map((item, index) => {
+                  const isOpen = openIndex === index;
                   return (
-                    <div key={f.name} className="flex-1 min-w-0">
-                      {renderField(f, item, (newItem) => {
+                    <SortableArrayItem
+                      key={item.id as string || item._key as string || index}
+                      id={item.id as string || item._key as string || `idx-${index}`}
+                      index={index}
+                      isOpen={isOpen}
+                      setOpenIndex={setOpenIndex}
+                      item={item}
+                      field={field}
+                      renderField={renderField}
+                      onChangeItem={(newItem) => {
                         const newItems = [...items];
                         newItems[index] = newItem;
                         onChange(newItems);
-                      })}
-                    </div>
+                      }}
+                      onRemove={() => onChange(items.filter((_: unknown, i: number) => i !== index))}
+                      disabled={disabled}
+                      compact={false}
+                      getItemLabel={getItemLabel}
+                    />
                   );
                 })}
               </div>
-              <button
-                type="button"
-                disabled={disabled}
-                onClick={() => onChange(items.filter((_: unknown, i: number) => i !== index))}
-                className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-error)] transition-colors disabled:opacity-30 p-0.5 mt-1.5 flex-shrink-0"
-                title="Remove"
-              >
-                <svg width="12" height="12" 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>
-            </div>
-          ))}
-          <button
-            type="button"
-            className="w-full py-2 border-2 border-dashed border-[var(--kyro-border)] rounded-none text-xs font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:border-[var(--kyro-primary)] transition-all disabled:opacity-50"
-            disabled={disabled}
-            onClick={() => onChange([...items, {}])}
-          >
-            + Add Item
-          </button>
-        </div>
-      ) : (
-        <div className="kyro-form-array border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30 rounded-md p-3 space-y-4">
-          {(items as Record<string, unknown>[]).map((item, index) => {
-            const isOpen = openIndex === index;
-            return (
-              <div
-                key={index}
-                className="border border-[var(--kyro-border)] rounded-lg overflow-hidden group"
-              >
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => setOpenIndex(isOpen ? null : index)}
-                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpenIndex(isOpen ? null : index); } }}
-                  className="w-full flex items-center justify-between p-3 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-sidebar-active)]/10 transition-colors cursor-pointer"
-                >
-                  <span className="text-xs font-bold tracking-widest text-[var(--kyro-text-muted)] truncate">
-                    {getItemLabel(item) || `Item ${index + 1}`}
-                  </span>
-                  <div className="flex items-center gap-1">
-                    <button
-                      type="button"
-                      disabled={disabled}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onChange(items.filter((_: unknown, i: number) => i !== index));
-                      }}
-                      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"
-                    >
-                      Remove
-                    </button>
-                    {isOpen ? (
-                      <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
-                    ) : (
-                      <ChevronDown className="w-4 h-4 text-[var(--kyro-text-muted)]" />
-                    )}
-                  </div>
-                </div>
-                {isOpen && (
-                  <div className="p-4 bg-[var(--kyro-surface)] space-y-4">
-                    {(field as Field & { fields?: Field[] }).fields.map((f: Field) =>
-                      renderField(f, item, (newItem) => {
-                        const newItems = [...items];
-                        newItems[index] = newItem;
-                        onChange(newItems);
-                      }),
-                    )}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-          <button
-            type="button"
-            className="w-full py-3 border-2 border-dashed border-[var(--kyro-border)] rounded-lg text-xs font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:border-[var(--kyro-primary)] transition-all disabled:opacity-50"
-            disabled={disabled}
-            onClick={() => onChange([...items, {}])}
-          >
-            + Add Item
-          </button>
-        </div>
-      )}
+            </SortableContext>
+            <button
+              type="button"
+              className="w-full py-3 border-2 border-dashed border-[var(--kyro-border)] rounded-lg text-xs font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:border-[var(--kyro-primary)] transition-all disabled:opacity-50"
+              disabled={disabled}
+              onClick={() => {
+                const newId = Math.random().toString(36).substr(2, 9);
+                onChange([...items, { id: newId }]);
+                setOpenIndex(items.length);
+              }}
+            >
+              + Add Item
+            </button>
+          </div>
+        )}
+      </DndContext>
     </div>
   );
 }

package/src/components/fields/BlocksField.tsx

@@ -157,9 +157,7 @@ const SortableBlockComponent = ({
             />
           ) : (
             <span
-              onClick={(e) => { e.stopPropagation(); setNameDraft((block.name as string) || ""); setEditingName(true); }}
-              className="font-medium text-[var(--kyro-text-secondary)] truncate max-w-[120px] cursor-text hover:text-[var(--kyro-text-primary)] transition-colors"
-              title="Click to rename"
+              className="font-medium text-[var(--kyro-text-secondary)] truncate max-w-[120px] transition-colors"
             >
               {itemLabel}
             </span>
@@ -187,6 +185,18 @@ const SortableBlockComponent = ({
             </div>
           ) : (
             <div className="flex items-center gap-0.5">
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setNameDraft((block.name as string) || "");
+                  setEditingName(true);
+                }}
+                className="p-0.5 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
+                title="Rename"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+              </button>
               <button
                 type="button"
                 onClick={(e) => {
@@ -227,14 +237,21 @@ const SortableBlockComponent = ({
   return (
     <div ref={setNodeRef} style={style} className="relative group mb-2">
       <div
-        {...attributes}
-        {...listeners}
         onClick={() => setEditingBlockId(block.id as string)}
-        className={`flex items-center gap-3 p-3 bg-[var(--kyro-bg-secondary)] rounded-lg border transition-colors cursor-grab active:cursor-grabbing ${isEditing
+        className={`flex items-center gap-3 p-3 bg-[var(--kyro-bg-secondary)] rounded-lg border transition-colors cursor-pointer ${isEditing
             ? `${(blockTheme[block.type as string] || blockTheme.default).border} bg-[var(--kyro-primary)]/5`
             : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
           }`}
       >
+        <div
+          className="p-1 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] hover:bg-[var(--kyro-surface-accent)] rounded flex-shrink-0"
+          {...attributes}
+          {...listeners}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <GripVertical className="w-4 h-4" />
+        </div>
+
         {blockIcons[block.type as string] && (
           <span className="text-[var(--kyro-text-secondary)]">
             {blockIcons[block.type as string]}
@@ -255,15 +272,7 @@ const SortableBlockComponent = ({
             />
           ) : (
             <div
-              onClick={(e) => { 
-                if (window.innerWidth >= 768) {
-                  e.stopPropagation(); 
-                  setNameDraft((block.name as string) || ""); 
-                  setEditingName(true); 
-                }
-              }}
-              className="text-xs font-semibold text-[var(--kyro-text-secondary)] truncate md:cursor-text hover:text-[var(--kyro-text-primary)] transition-colors"
-              title="Click to rename"
+              className="text-xs font-semibold text-[var(--kyro-text-secondary)] truncate transition-colors"
             >
               {itemLabel}
               {previewSnippet && typeof previewSnippet === "string" && (
@@ -318,7 +327,7 @@ const SortableBlockComponent = ({
                 setNameDraft((block.name as string) || "");
                 setEditingName(true);
               }}
-              className="md:hidden p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
+              className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
               title="Rename Block"
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
@@ -537,8 +546,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
-        delay: 200,
-        tolerance: 5,
+        distance: 3,
       },
     }),
     useSensor(KeyboardSensor),
@@ -569,8 +577,13 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
           });
         }
       } else {
-        // Dropped on root level - add as top-level block
-        handleAddBlock(blockType);
+        // Dropped on root level - check if dropped over a specific block to insert at index
+        const overIndex = blocks.findIndex((b) => b.id === over.id);
+        if (overIndex !== -1) {
+          store.getState().addBlock(blockType, overIndex);
+        } else {
+          handleAddBlock(blockType);
+        }
       }
       return;
     }