feat(components,app-shell): enable column drag-reorder in Studio + persist field order (#2092)

The data-table already implements column drag-reorder; this enables it in the
Studio Data grid (design mode) and persists the new order to the object's FIELD
METADATA (field display order = metadata order), per spec — no drag re-implemented.

- GridFieldAuthoring context gains onReorderFields(orderedFieldNames). Providing it
  enables the table's built-in reorder (reorderEnabled) and routes the drop's new
  column order to the host.
- data-table calls fieldAuthoring.onReorderFields on column drop (alongside its
  existing onColumnsReorder) and gates the drag affordances on reorderEnabled.
- DataPillar reorders the object's fields to match — keeping system/hidden fields
  (not shown as columns) in place, reordering only the visible fields among their
  slots — then save + publish + remount.

Verified live (showcase_account): drag Industry to the front → effective field order
[owner_id,name,industry,...] → [industry,owner_id,name,...]; system fields
(organization_id/created_at/...) stay first; persisted to the env overlay.

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx

@@ -731,6 +731,40 @@ function DataPillar({ packageId }: { packageId: string }): React.ReactElement {
     }
   }, [adapter, client, current]);
 
+  // Drag-reorder columns → reorder the object's `fields` metadata (field display
+  // order follows metadata order), then publish so the new order persists.
+  const doReorderFields = React.useCallback(
+    async (orderedNames: string[]) => {
+      if (!current) return;
+      const view = readFields(objDraft.fields);
+      // Reorder only the visible fields among their own slots; keep system /
+      // hidden fields (not shown as columns) in their original positions.
+      const visible = new Set(orderedNames);
+      const visibleInOrder = orderedNames
+        .map((n) => view.entries.find((e) => e.name === n))
+        .filter((e): e is (typeof view.entries)[number] => Boolean(e));
+      let vi = 0;
+      const entries = view.entries.map((e) => (visible.has(e.name) ? visibleInOrder[vi++] : e));
+      const body = { ...objDraft, fields: writeFields({ ...view, entries }) };
+      setObjDraft(body);
+      setSaving('publish');
+      setError(null);
+      try {
+        await client.save('object', current.name, body, { mode: 'draft' });
+        await client.publish('object', current.name);
+        (adapter as { clearCache?: () => void } | null)?.clearCache?.();
+        setHasDraft(false);
+        setDirty(false);
+        setGridVer((v) => v + 1); // remount so the grid reflects the persisted order
+      } catch (e) {
+        setError(e instanceof Error ? e.message : String(e));
+      } finally {
+        setSaving(false);
+      }
+    },
+    [client, current, objDraft, adapter],
+  );
+
   const inspector = getMetadataInspector('object');
 
   return (
@@ -799,6 +833,7 @@ function DataPillar({ packageId }: { packageId: string }): React.ReactElement {
                     }
                   },
                   editColumnLabel: '编辑字段属性',
+                  onReorderFields: doReorderFields,
                 }}
               >
                 <SchemaRenderer

packages/components/src/context/gridFieldAuthoring.tsx

@@ -33,6 +33,14 @@ export interface GridFieldAuthoring {
   onEditColumn?: (fieldName: string) => void;
   /** Optional tooltip/aria-label for the edit-field button (defaults to "Edit field"). */
   editColumnLabel?: string;
+  /**
+   * Invoked when the user drag-reorders columns. Receives the new column order
+   * as accessorKeys (= field names, including any non-field columns). Providing
+   * this also ENABLES the table's built-in column drag-reorder (design mode), so
+   * the host can persist the order to the object's field metadata. Omit to leave
+   * reordering to the table's own `reorderableColumns`/`onColumnsReorder`.
+   */
+  onReorderFields?: (orderedFieldNames: string[]) => void;
 }
 
 const GridFieldAuthoringContext = React.createContext<GridFieldAuthoring | null>(null);

packages/components/src/renderers/complex/data-table.tsx

@@ -238,6 +238,9 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
   const fieldAuthoring = useGridFieldAuthoring();
   const addColumnEnabled = !!fieldAuthoring?.onAddColumn;
   const editColumnEnabled = !!fieldAuthoring?.onEditColumn;
+  // The table already implements column drag-reorder; a design host enables it by
+  // providing onReorderFields (to persist the order to the object's field metadata).
+  const reorderEnabled = reorderableColumns || !!fieldAuthoring?.onReorderFields;
 
   // i18n support for pagination labels
   const { t, language } = useTableTranslation();
@@ -562,22 +565,22 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
 
   // Column reordering handlers
   const handleColumnDragStart = (e: React.DragEvent, index: number) => {
-    if (!reorderableColumns) return;
+    if (!reorderEnabled) return;
     setDraggedColumn(index);
     e.dataTransfer.effectAllowed = 'move';
   };
 
   const handleColumnDragOver = (e: React.DragEvent, index: number) => {
-    if (!reorderableColumns) return;
+    if (!reorderEnabled) return;
     e.preventDefault();
     e.dataTransfer.dropEffect = 'move';
     setDragOverColumn(index);
   };
 
   const handleColumnDrop = (e: React.DragEvent, dropIndex: number) => {
-    if (!reorderableColumns || draggedColumn === null) return;
+    if (!reorderEnabled || draggedColumn === null) return;
     e.preventDefault();
-    
+
     if (draggedColumn === dropIndex) {
       setDraggedColumn(null);
       setDragOverColumn(null);
@@ -587,15 +590,17 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     const newColumns = [...columns];
     const [removed] = newColumns.splice(draggedColumn, 1);
     newColumns.splice(dropIndex, 0, removed);
-    
+
     setColumns(newColumns);
     setDraggedColumn(null);
     setDragOverColumn(null);
-    
+
     // Call callback if provided
     if (schema.onColumnsReorder) {
       schema.onColumnsReorder(newColumns);
     }
+    // Design host: persist the new order to the object's field metadata.
+    fieldAuthoring?.onReorderFields?.(newColumns.map((c) => c.accessorKey));
   };
 
   const handleColumnDragEnd = () => {
@@ -927,7 +932,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       minWidth: columnWidth,
                       ...(isFrozen && { left: frozenOffset }),
                     }}
-                    draggable={reorderableColumns}
+                    draggable={reorderEnabled}
                     onDragStart={(e) => handleColumnDragStart(e, index)}
                     onDragOver={(e) => handleColumnDragOver(e, index)}
                     onDrop={(e) => handleColumnDrop(e, index)}
@@ -940,7 +945,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       col.align === 'right' ? 'justify-end' : 'justify-between'
                     )}>
                       <div className="flex items-center gap-1">
-                        {reorderableColumns && (
+                        {reorderEnabled && (
                           <GripVertical className="h-4 w-4 opacity-0 group-hover:opacity-50 cursor-grab active:cursor-grabbing shrink-0" />
                         )}
                         {col.headerIcon && (