@kyro-cms/admin 0.10.19 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.10.19",
+  "version": "0.11.0",
   "engines": {
     "node": ">=22"
   },
@@ -120,7 +120,7 @@
     "vitest": "^4.1.4"
   },
   "peerDependencies": {
-    "@kyro-cms/core": "^0.10.0",
+    "@kyro-cms/core": "^0.11.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/src/components/fields/ArrayField.tsx

@@ -1,7 +1,22 @@
 import React from "react";
-import { Plus, ChevronDown, ChevronUp, X } from "../ui/icons";
+import { Plus, ChevronDown, ChevronUp, X, 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";
 
 interface ArrayFieldItem {
+  id?: string;
   [key: string]: unknown;
 }
 
@@ -12,6 +27,219 @@ interface ArrayFieldProps {
   compact?: boolean;
 }
 
+interface SortableArrayFieldItemProps {
+  id: string;
+  index: number;
+  isOpen: boolean;
+  setOpenIndex: (index: number | null) => void;
+  item: Record<string, unknown>;
+  labelField: string;
+  itemKeys: string[];
+  inputClass: string;
+  handleItemChange: (index: number, field: string, value: string) => void;
+  handleRemove: (index: number) => void;
+  compact: boolean;
+}
+
+function SortableArrayFieldItem({
+  id,
+  index,
+  isOpen,
+  setOpenIndex,
+  item,
+  labelField,
+  itemKeys,
+  inputClass,
+  handleItemChange,
+  handleRemove,
+  compact,
+}: SortableArrayFieldItemProps) {
+  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 itemLabel =
+    String(item[labelField] || item.title || item.name || `Item ${index + 1}`);
+
+  if (compact) {
+    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-2.5 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-0.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] hover:bg-[var(--kyro-border)] rounded flex-shrink-0"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <GripVertical className="w-3.5 h-3.5" />
+            </div>
+            <span
+              onClick={() => setOpenIndex(isOpen ? null : index)}
+              className="text-sm font-medium text-[var(--kyro-text-primary)] truncate cursor-pointer flex-1 py-1 text-left"
+            >
+              {itemLabel}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleRemove(index);
+              }}
+              className="opacity-0 group-hover:opacity-100 p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
+              title="Remove"
+            >
+              <X className="w-3.5 h-3.5" />
+            </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-2.5 bg-[var(--kyro-surface)] space-y-2">
+            {itemKeys.length > 0 ? (
+              itemKeys.map((key) => (
+                <input
+                  key={key}
+                  type="text"
+                  value={String(item[key] || "")}
+                  onChange={(e) =>
+                    handleItemChange(index, key, e.target.value)
+                  }
+                  onClick={(e) => e.stopPropagation()}
+                  className={inputClass}
+                  placeholder={key}
+                />
+              ))
+            ) : (
+              <input
+                type="text"
+                value={String(item.value || "")}
+                onChange={(e) =>
+                  handleItemChange(index, "value", e.target.value)
+                }
+                onClick={(e) => e.stopPropagation()}
+                className={inputClass}
+                placeholder="Value..."
+              />
+            )}
+          </div>
+        )}
+      </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"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <GripVertical className="w-4 h-4" />
+          </div>
+          <span
+            onClick={() => setOpenIndex(isOpen ? null : index)}
+            className="text-sm font-medium text-[var(--kyro-text-primary)] truncate cursor-pointer flex-1 py-1 text-left"
+          >
+            {itemLabel}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleRemove(index);
+            }}
+            className="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
+            title="Remove"
+          >
+            <X className="w-4 h-4" />
+          </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-3 bg-[var(--kyro-surface)] space-y-2">
+          {itemKeys.length > 0 ? (
+            itemKeys.map((key) => (
+              <input
+                key={key}
+                type="text"
+                value={String(item[key] || "")}
+                onChange={(e) =>
+                  handleItemChange(index, key, e.target.value)
+                }
+                className={inputClass}
+                placeholder={key}
+              />
+            ))
+          ) : (
+            <input
+              type="text"
+              value={String(item.value || "")}
+              onChange={(e) =>
+                handleItemChange(index, "value", e.target.value)
+              }
+              className={inputClass}
+              placeholder="Value..."
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export const ArrayField: React.FC<ArrayFieldProps> = ({
   items = [],
   labelField = "title",
@@ -20,6 +248,32 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
 }) => {
   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) => {
+        if (typeof item !== "object" || item === null) {
+          needsUpdate = true;
+          return false;
+        }
+        return true;
+      })
+      .map((item) => {
+        if (!item.id && !item._key) {
+          needsUpdate = true;
+          return {
+            ...item,
+            id: Math.random().toString(36).substr(2, 9),
+          };
+        }
+        return item;
+      });
+    if (needsUpdate) {
+      onChange(updated);
+    }
+  }, [items, onChange]);
+
   const handleItemChange = (index: number, field: string, value: string) => {
     const newItems = [...items];
     newItems[index] = { ...newItems[index], [field]: value };
@@ -35,7 +289,9 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
   };
 
   const handleAdd = () => {
+    const newId = Math.random().toString(36).substr(2, 9);
     const newItem: ArrayFieldItem = {
+      id: newId,
       [labelField]: `Item ${items.length + 1}`,
     };
     onChange([...items, newItem]);
@@ -51,88 +307,71 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
       ? Object.keys(items[0]).filter((k) => k !== "id" && k !== "_key")
       : [];
 
-  if (compact) {
-    return (
-      <div className="space-y-1.5">
+  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) => (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];
+      const [movedItem] = newItems.splice(oldIndex, 1);
+      newItems.splice(newIndex, 0, movedItem);
+      onChange(newItems);
+    }
+  };
+
+  const itemIds = React.useMemo(() => {
+    return items.map((item) => item?.id || item?._key || "");
+  }, [items]);
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+    >
+      <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-md">
+          <div className={compact 
+            ? "text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-md"
+            : "text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg"
+          }>
             No items. Click "Add Item" to create one.
           </div>
         ) : (
-          <div className="space-y-1">
-            {items.map((item, index) => {
-              const isOpen = openIndex === index;
-              const itemLabel =
-                item[labelField] ||
-                item.title ||
-                item.name ||
-                `Item ${index + 1}`;
-              return (
-                <div
-                  key={index}
-                  className="border border-[var(--kyro-border)] rounded-lg overflow-hidden group"
-                >
-                  <button
-                    type="button"
-                    onClick={() => setOpenIndex(isOpen ? null : index)}
-                    className="w-full flex items-center justify-between p-2.5 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-sidebar-active)]/10 transition-colors"
-                  >
-                    <span className="text-sm font-medium text-[var(--kyro-text-primary)] truncate">
-                      {itemLabel}
-                    </span>
-                    <div className="flex items-center gap-1">
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleRemove(index);
-                        }}
-                        className="opacity-0 group-hover:opacity-100 p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
-                        title="Remove"
-                      >
-                        <X className="w-3.5 h-3.5" />
-                      </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>
-                  </button>
-                  {isOpen && (
-                    <div className="p-2.5 bg-[var(--kyro-surface)] space-y-2">
-                      {itemKeys.length > 0 ? (
-                        itemKeys.map((key) => (
-                          <input
-                            key={key}
-                            type="text"
-                            value={item[key] || ""}
-                            onChange={(e) =>
-                              handleItemChange(index, key, e.target.value)
-                            }
-                            onClick={(e) => e.stopPropagation()}
-                            className={inputClass}
-                            placeholder={key}
-                          />
-                        ))
-                      ) : (
-                        <input
-                          type="text"
-                          value={item.value || ""}
-                          onChange={(e) =>
-                            handleItemChange(index, "value", e.target.value)
-                          }
-                          onClick={(e) => e.stopPropagation()}
-                          className={inputClass}
-                          placeholder="Value..."
-                        />
-                      )}
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
+          <SortableContext
+            items={itemIds}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className={compact ? "space-y-1" : "space-y-2"}>
+              {items.map((item, index) => (
+                <SortableArrayFieldItem
+                  key={item.id || item._key || index}
+                  id={item.id || item._key || `idx-${index}`}
+                  index={index}
+                  isOpen={openIndex === index}
+                  setOpenIndex={setOpenIndex}
+                  item={item as Record<string, unknown>}
+                  labelField={labelField}
+                  itemKeys={itemKeys}
+                  inputClass={inputClass}
+                  handleItemChange={handleItemChange}
+                  handleRemove={handleRemove}
+                  compact={compact}
+                />
+              ))}
+            </div>
+          </SortableContext>
         )}
         <button
           type="button"
@@ -143,98 +382,7 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
           Add Item
         </button>
       </div>
-    );
-  }
-
-  return (
-    <div className="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">
-          No items. Click "Add Item" to create one.
-        </div>
-      ) : (
-        <div className="space-y-2">
-          {items.map((item, index) => {
-            const isOpen = openIndex === index;
-            const itemLabel =
-              item[labelField] ||
-              item.title ||
-              item.name ||
-              `Item ${index + 1}`;
-            return (
-              <div
-                key={index}
-                className="border border-[var(--kyro-border)] rounded-lg overflow-hidden group"
-              >
-                <button
-                  type="button"
-                  onClick={() => 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"
-                >
-                  <span className="text-sm font-medium text-[var(--kyro-text-primary)] truncate">
-                    {itemLabel}
-                  </span>
-                  <div className="flex items-center gap-1">
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleRemove(index);
-                      }}
-                      className="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
-                      title="Remove"
-                    >
-                      <X className="w-4 h-4" />
-                    </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>
-                </button>
-                {isOpen && (
-                  <div className="p-3 bg-[var(--kyro-surface)] space-y-2">
-                    {itemKeys.length > 0 ? (
-                      itemKeys.map((key) => (
-                        <input
-                          key={key}
-                          type="text"
-                          value={item[key] || ""}
-                          onChange={(e) =>
-                            handleItemChange(index, key, e.target.value)
-                          }
-                          className={inputClass}
-                          placeholder={key}
-                        />
-                      ))
-                    ) : (
-                      <input
-                        type="text"
-                        value={item.value || ""}
-                        onChange={(e) =>
-                          handleItemChange(index, "value", e.target.value)
-                        }
-                        className={inputClass}
-                        placeholder="Value..."
-                      />
-                    )}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      )}
-      <button
-        type="button"
-        onClick={handleAdd}
-        className="flex items-center justify-center gap-1.5 w-full px-3 py-2 text-xs font-medium rounded-lg border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:border-[var(--kyro-sidebar-active)] hover:text-[var(--kyro-text-primary)] transition-colors"
-      >
-        <Plus className="w-3.5 h-3.5" />
-        Add Item
-      </button>
-    </div>
+    </DndContext>
   );
 };