@kyro-cms/admin 0.10.20 → 0.11.0

package/src/components/fields/ListField.tsx

@@ -1,4 +1,19 @@
 import React from "react";
+import { Plus, 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 ListFieldProps {
   items?: string[];
@@ -6,12 +21,79 @@ interface ListFieldProps {
   compact?: boolean;
 }
 
+interface SortableListItemProps {
+  id: string;
+  text: string;
+  onRemove: () => void;
+}
+
+function SortableListItem({ id, text, onRemove }: SortableListItemProps) {
+  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,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`flex items-center gap-2 group/item p-1.5 hover:bg-[var(--kyro-surface-accent)]/50 rounded-md transition-colors ${
+        isDragging ? "bg-[var(--kyro-surface-accent)] shadow-sm" : ""
+      }`}
+    >
+      <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-3.5 h-3.5" />
+      </div>
+      <span className="text-sm text-[var(--kyro-text-primary)] flex-1">
+        • {text}
+      </span>
+      <button
+        type="button"
+        onClick={onRemove}
+        className="opacity-0 group-hover/item:opacity-100 p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
+      >
+        ×
+      </button>
+    </div>
+  );
+}
+
 export const ListField: React.FC<ListFieldProps> = ({
   items = [],
   onChange,
   compact = false,
 }) => {
   const [inputValue, setInputValue] = React.useState("");
+  const [mappedItems, setMappedItems] = React.useState<{ id: string; text: string }[]>([]);
+
+  // Synchronize incoming items
+  React.useEffect(() => {
+    const mappedTexts = mappedItems.map(item => item.text);
+    if (JSON.stringify(mappedTexts) !== JSON.stringify(items)) {
+      setMappedItems(
+        items.map((text, idx) => ({
+          id: `${text}-${idx}-${Math.random().toString(36).substr(2, 4)}`,
+          text,
+        }))
+      );
+    }
+  }, [items]);
 
   const handleAdd = () => {
     if (inputValue.trim()) {
@@ -31,43 +113,71 @@ export const ListField: React.FC<ListFieldProps> = ({
     onChange(items.filter((_, i) => i !== index));
   };
 
+  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 = mappedItems.findIndex((item) => item.id === active.id);
+    const newIndex = mappedItems.findIndex((item) => item.id === over.id);
+
+    if (oldIndex !== -1 && newIndex !== -1) {
+      const newItems = [...items];
+      const [movedItem] = newItems.splice(oldIndex, 1);
+      newItems.splice(newIndex, 0, movedItem);
+      onChange(newItems);
+    }
+  };
+
   const inputClass = compact
     ? "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-md">
-          No items. Type below to add.
-        </div>
-      ) : (
-        <div className="space-y-1">
-          {items.map((item, index) => (
-            <div key={index} className="flex items-center gap-2 group/item">
-              <span className="text-sm text-[var(--kyro-text-primary)] flex-1">
-                • {item}
-              </span>
-              <button
-                type="button"
-                onClick={() => handleRemove(index)}
-                className="opacity-0 group-hover/item:opacity-100 p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
-              >
-                ×
-              </button>
+    <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">
+            No items. Type below to add.
+          </div>
+        ) : (
+          <SortableContext
+            items={mappedItems.map((item) => item.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className="space-y-1">
+              {mappedItems.map((item, index) => (
+                <SortableListItem
+                  key={item.id}
+                  id={item.id}
+                  text={item.text}
+                  onRemove={() => handleRemove(index)}
+                />
+              ))}
             </div>
-          ))}
-        </div>
-      )}
-      <input
-        type="text"
-        value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
-        onKeyDown={handleKeyDown}
-        className={inputClass}
-        placeholder="Type and press Enter to add..."
-      />
-    </div>
+          </SortableContext>
+        )}
+        <input
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          className={inputClass}
+          placeholder="Type and press Enter to add..."
+        />
+      </div>
+    </DndContext>
   );
 };
 

package/src/components/fields/RelationshipField.tsx

@@ -1,7 +1,21 @@
 import { useEffect, useState, useRef, useCallback } from "react";
-import { Search, X, ChevronDown, Loader2 } from "../ui/icons";
+import { Search, X, ChevronDown, Loader2, GripVertical } from "../ui/icons";
 import { apiGet, buildSearchQuery } from "../../lib/api";
 import { EmptyState } from "../ui/EmptyState";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  horizontalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 
 interface RelationshipFieldProps {
   field: {
@@ -43,6 +57,63 @@ function getLabel(opt: Record<string, unknown>): string {
   );
 }
 
+interface SortableTagProps {
+  id: string;
+  label: string;
+  relation?: string | null;
+  onRemove: () => void;
+  disabled?: boolean;
+}
+
+function SortableTag({ id, label, relation, onRemove, disabled }: SortableTagProps) {
+  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,
+  };
+
+  return (
+    <span
+      ref={setNodeRef}
+      style={style}
+      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)] border border-transparent ${
+        isDragging ? "border-[var(--kyro-primary)] shadow-sm bg-[var(--kyro-sidebar-active)]/20" : ""
+      }`}
+    >
+      {!disabled && (
+        <div
+          {...attributes}
+          {...listeners}
+          className="cursor-grab active:cursor-grabbing hover:bg-[var(--kyro-sidebar-active)]/20 rounded p-0.5 text-[var(--kyro-sidebar-active)] opacity-70 flex items-center justify-center"
+        >
+          <GripVertical className="w-2.5 h-2.5" />
+        </div>
+      )}
+      {relation && <span className="opacity-60 mr-0.5">{relation}:</span>}
+      {label}
+      {!disabled && (
+        <button
+          type="button"
+          onClick={onRemove}
+          className="hover:opacity-70 p-0.5 ml-0.5 flex items-center justify-center"
+        >
+          <X className="w-3 h-3" />
+        </button>
+      )}
+    </span>
+  );
+}
+
 export function RelationshipField({
   field,
   value,
@@ -202,6 +273,33 @@ export function RelationshipField({
     }
   };
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 3,
+      },
+    })
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const items: unknown[] = isMultiple
+      ? Array.isArray(value) ? value : []
+      : [];
+
+    const oldIndex = items.findIndex((item) => getValueId(item) === active.id);
+    const newIndex = items.findIndex((item) => getValueId(item) === over.id);
+
+    if (oldIndex !== -1 && newIndex !== -1) {
+      const newItems = [...items];
+      const [movedItem] = newItems.splice(oldIndex, 1);
+      newItems.splice(newIndex, 0, movedItem);
+      onChangeRef.current?.(newItems);
+    }
+  };
+
   const renderSelectedItems = () => {
     if (!value) return null;
 
@@ -209,6 +307,45 @@ export function RelationshipField({
       ? Array.isArray(value) ? value : []
       : value ? [value] : [];
 
+    const tagIds = items.map((item) => getValueId(item));
+
+    if (isMultiple && items.length > 1) {
+      return (
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <div className="flex flex-wrap gap-1.5 mt-2">
+            <SortableContext
+              items={tagIds}
+              strategy={horizontalListSortingStrategy}
+            >
+              {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 (
+                  <SortableTag
+                    key={rawId}
+                    id={rawId}
+                    label={label}
+                    relation={rel}
+                    onRemove={() => {
+                      const filtered = items.filter((value) => getValueId(value) !== rawId);
+                      onChangeRef.current?.(filtered);
+                    }}
+                    disabled={disabled}
+                  />
+                );
+              })}
+            </SortableContext>
+          </div>
+        </DndContext>
+      );
+    }
+
     return (
       <div className="flex flex-wrap gap-1.5 mt-2">
         {items.map((item) => {
@@ -230,7 +367,7 @@ export function RelationshipField({
                     const filtered = items.filter((value) => getValueId(value) !== rawId);
                     onChangeRef.current?.(isMultiple ? filtered : (filtered[0] ?? null));
                   }}
-                  className="hover:opacity-70"
+                  className="hover:opacity-70 flex items-center justify-center"
                 >
                   <X className="w-3 h-3" />
                 </button>

package/src/lib/normalize-upload-fields.ts

@@ -21,11 +21,11 @@ export function normalizeUploadFields(value: unknown): unknown {
 
     // Heuristic: detect a full media object by checking for id + url/filename/mimeType
     // and a small number of keys (media objects typically have ~6-8 keys).
-    // Also handle bare {id} objects that result from JSONB column conversion.
     const keys = Object.keys(obj);
     const hasId = "id" in obj && (typeof obj.id === "string" || obj.id === null);
-    const hasMediaField = "url" in obj || "filename" in obj || "mimeType" in obj;
-    if (hasId && (hasMediaField || keys.length <= 2) && keys.length <= 8) {
+    const hasMediaField = "url" in obj && ("filename" in obj || "mimeType" in obj);
+    
+    if (hasId && hasMediaField && keys.length <= 8) {
       return obj.id;
     }