@nocobase/client-v2 2.2.0-alpha.1 → 2.2.0-alpha.3

package/src/flow/models/actions/JSCollectionActionModel.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createSafeDocument, createSafeWindow, createSafeNavigator, tExpr } from '@nocobase/flow-engine';
+import { tExpr } from '@nocobase/flow-engine';
 import type { ButtonProps } from 'antd/es/button';
 import { CodeEditor } from '../../components/code-editor';
 import { ActionModel, ActionSceneEnum } from '../base';
@@ -78,12 +78,7 @@ if (!rows.length) {
       },
       async handler(ctx, params) {
         const { code, version } = resolveRunJsParams(ctx, params);
-        const navigator = createSafeNavigator();
-        await ctx.runjs(
-          code,
-          { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
-          { version },
-        );
+        await ctx.runjs(code, undefined, { version });
       },
     },
   },

package/src/flow/models/actions/JSItemActionModel.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { ElementProxy, createSafeDocument, createSafeNavigator, createSafeWindow, tExpr } from '@nocobase/flow-engine';
+import { ElementProxy, tExpr } from '@nocobase/flow-engine';
 import React from 'react';
 import { CodeEditor } from '../../components/code-editor';
 import { ActionModel, ActionSceneEnum, CollectionActionGroupModel, RecordActionGroupModel } from '../base';
@@ -137,12 +137,7 @@ JSItemActionModel.registerFlow({
           ctx.defineProperty('element', {
             get: () => new ElementProxy(element),
           });
-          const navigator = createSafeNavigator();
-          await ctx.runjs(
-            code,
-            { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
-            { version },
-          );
+          await ctx.runjs(code, undefined, { version });
         });
       },
     },

package/src/flow/models/actions/JSRecordActionModel.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createSafeDocument, createSafeWindow, createSafeNavigator, tExpr } from '@nocobase/flow-engine';
+import { tExpr } from '@nocobase/flow-engine';
 import type { ButtonProps } from 'antd/es/button';
 import { CodeEditor } from '../../components/code-editor';
 import { ActionSceneEnum, RecordActionModel } from '../base';
@@ -78,12 +78,7 @@ if (!ctx.record) {
       },
       async handler(ctx, params) {
         const { code, version } = resolveRunJsParams(ctx, params);
-        const navigator = createSafeNavigator();
-        await ctx.runjs(
-          code,
-          { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
-          { version },
-        );
+        await ctx.runjs(code, undefined, { version });
       },
     },
   },

package/src/flow/models/base/ActionModel.tsx

@@ -18,6 +18,17 @@ import { commonConditionHandler, ConditionBuilder } from '../../components/Condi
 export { ActionModel, ActionSceneEnum, ActionWithoutPermission, type ActionSceneType } from './ActionModelCore';
 import { ActionModel } from './ActionModelCore';
 
+function getMobileDefaultProps(ctx) {
+  const defaultProps = ctx.model.defaultProps || {};
+  if (ctx.isMobileLayout && defaultProps.icon) {
+    return {
+      ...defaultProps,
+      iconOnly: true,
+    };
+  }
+  return defaultProps;
+}
+
 ActionModel.registerFlow({
   key: 'buttonSettings',
   title: tExpr('Button settings'),
@@ -80,7 +91,7 @@ ActionModel.registerFlow({
         };
       },
       defaultParams(ctx) {
-        const defaultProps = ctx.model.defaultProps || {};
+        const defaultProps = getMobileDefaultProps(ctx);
         if (!ctx.model.enableEditColor) {
           return defaultProps;
         }

package/src/flow/models/base/ActionModelCore.tsx

@@ -25,7 +25,7 @@ export function ActionWithoutPermission(props) {
     const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} ` : '';
     return `${dataSourcePrefix}${collectionPrefix}`;
-  }, []);
+  }, [collection, dataSource.displayName, dataSource.key, t]);
   const { actionName } = props?.forbidden || model.forbidden;
   const messageValue = useMemo(() => {
     return t(
@@ -143,10 +143,11 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   renderButton() {
     const { iconOnly, ...props } = this.props;
     const icon = this.getIcon() ? <Icon type={this.getIcon() as any} /> : undefined;
+    const titleContent = iconOnly && icon ? null : props.children || this.getTitle();
 
     return (
       <Button {...props} onClick={this.onClick.bind(this)} icon={icon}>
-        {iconOnly ? null : props.children || this.getTitle()}
+        {titleContent}
       </Button>
     );
   }
@@ -162,11 +163,12 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   renderHiddenInConfig(): React.ReactNode | undefined {
     const { iconOnly, ...props } = this.props;
     const icon = this.getIcon() ? <Icon type={this.getIcon() as any} /> : undefined;
+    const titleContent = iconOnly && icon ? null : props.children || this.getTitle();
     if (this.forbidden) {
       return (
         <ActionWithoutPermission>
           <Button {...props} onClick={this.onClick.bind(this)} icon={icon} style={{ opacity: '0.3' }}>
-            {iconOnly ? null : props.children || this.getTitle()}
+            {titleContent}
           </Button>
         </ActionWithoutPermission>
       );
@@ -174,7 +176,7 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     return (
       <Tooltip title={this.context.t('The button is hidden and only visible when the UI Editor is active')}>
         <Button {...props} onClick={this.onClick.bind(this)} icon={icon} style={{ opacity: '0.3' }}>
-          {iconOnly ? null : props.children || this.getTitle()}
+          {titleContent}
         </Button>
       </Tooltip>
     );

package/src/flow/models/base/GridModel.tsx

@@ -75,6 +75,12 @@ interface DragState {
   generatedIds: Map<string, string>;
 }
 
+const MOBILE_GRID_DISABLED_DROP_SLOT_TYPES = new Set<LayoutSlot['type']>(['column-edge', 'item-edge', 'empty-column']);
+
+const filterMobileGridDragSlots = (slots: LayoutSlot[]) => {
+  return slots.filter((slot) => !MOBILE_GRID_DISABLED_DROP_SLOT_TYPES.has(slot.type));
+};
+
 const getClientPoint = (event: any): { x: number; y: number } | null => {
   if (!event) {
     return null;
@@ -625,7 +631,7 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
       return;
     }
     const snapshot = buildLayoutSnapshot({ container: this.getDragContainer() });
-    this.dragState.slots = snapshot.slots;
+    this.dragState.slots = this.context.isMobileLayout ? filterMobileGridDragSlots(snapshot.slots) : snapshot.slots;
     this.dragState.containerRect = snapshot.containerRect;
   }
 
@@ -1135,7 +1141,7 @@ GridModel.registerFlow({
 /**
  * 将多列栅格 rows 转换为移动端单列 rows。
  * 遍历原 rows 的行与列顺序，把每个原列（过滤空白列后）变成一个新行（仅一列）。
- * 行 key 使用 uid() 生成，保持插入顺序即可。
+ * 行 key 使用原 rowId 与 columnIndex 生成，避免每次渲染产生随机 key 导致移动端滚动位置丢失。
  * @param rows 原始多列 rows
  * @returns 单列 rows
  */
@@ -1145,13 +1151,38 @@ export function transformRowsToSingleColumn(
 ): Record<string, string[][]> {
   const emptyColumnUid = options?.emptyColumnUid ?? EMPTY_COLUMN_UID;
   const singleColumnRows: Record<string, string[][]> = {};
+
+  const getAvailableRowId = (baseRowId: string) => {
+    if (!singleColumnRows[baseRowId]) {
+      return baseRowId;
+    }
+
+    let duplicateIndex = 1;
+    let rowId = `${baseRowId}:duplicate:${duplicateIndex}`;
+    while (singleColumnRows[rowId]) {
+      duplicateIndex += 1;
+      rowId = `${baseRowId}:duplicate:${duplicateIndex}`;
+    }
+    return rowId;
+  };
+
   Object.keys(rows).forEach((rowId) => {
     const columns = rows[rowId];
-    columns.forEach((column) => {
-      const filtered = column.filter((id) => id !== emptyColumnUid);
-      if (filtered.length > 0) {
-        singleColumnRows[uid()] = [filtered];
-      }
+    const effectiveColumns = columns
+      .map((column, columnIndex) => ({
+        columnIndex,
+        items: column.filter((id) => id !== emptyColumnUid),
+      }))
+      .filter((column) => column.items.length > 0);
+
+    if (effectiveColumns.length === 1 && effectiveColumns[0].columnIndex === 0) {
+      singleColumnRows[getAvailableRowId(rowId)] = [effectiveColumns[0].items];
+      return;
+    }
+
+    effectiveColumns.forEach((column) => {
+      const generatedRowId = `mobile:${encodeURIComponent(rowId)}:${column.columnIndex}`;
+      singleColumnRows[getAvailableRowId(generatedRowId)] = [column.items];
     });
   });
   return singleColumnRows;

package/src/flow/models/base/PageModel/PageModel.tsx

@@ -375,12 +375,15 @@ export class PageModel extends FlowModel<PageModelStructure> {
           tabBarStyle={this.props.tabBarStyle}
           items={this.mapTabs()}
           onChange={(activeKey) => {
+            const previousActiveKey = this.props.tabActiveKey || this.getActiveTabKey();
             this.context.view.navigation?.changeTo?.({
               tabUid: activeKey,
             });
 
             this.invokeTabModelLifecycleMethod(activeKey, 'onActive');
-            this.invokeTabModelLifecycleMethod(this.props.tabActiveKey, 'onInactive');
+            if (previousActiveKey && previousActiveKey !== activeKey) {
+              this.invokeTabModelLifecycleMethod(previousActiveKey, 'onInactive');
+            }
             this.setProps('tabActiveKey', activeKey);
           }}
           // destroyInactiveTabPane

package/src/flow/models/base/PageModel/__tests__/PageModel.test.ts

@@ -140,13 +140,9 @@ vi.mock('@nocobase/flow-engine', () => {
     jioToJoiSchema: () => ({
       validate: (value: any) => ({ value }),
     }),
-    createSafeWindow: () => window,
-    createSafeDocument: () => document,
-    createSafeNavigator: () => navigator,
     isRunJSValue: () => false,
     isVariableExpression: () => false,
     normalizeRunJSValue: (value: any) => value,
-    runjsWithSafeGlobals: async (handler: any, ...args: any[]) => handler?.(...args),
     parseCtxDateExpression: (value: any) => value,
     setupRunJSContexts: () => undefined,
     getRunJSScenesForContext: () => [],
@@ -452,6 +448,34 @@ describe('PageModel', () => {
         marginInlineEnd: 24,
       });
     });
+
+    it('should deactivate the previous tab when navigation updates active tab synchronously', () => {
+      pageModel.props = { tabActiveKey: 'tab-old' } as any;
+      const invokeSpy = vi.spyOn(pageModel as any, 'invokeTabModelLifecycleMethod').mockImplementation(() => undefined);
+      const changeTo = vi.fn((params: { tabUid: string }) => {
+        pageModel.props.tabActiveKey = params.tabUid;
+      });
+
+      pageModel.context.view = {
+        navigation: {
+          viewParams: {
+            tabUid: 'tab-old',
+          },
+          changeTo,
+        },
+      } as any;
+
+      const result = pageModel.renderTabs() as any;
+      const tabsElement = result.props.children;
+
+      tabsElement.props.onChange('tab-new');
+
+      expect(changeTo).toHaveBeenCalledWith({ tabUid: 'tab-new' });
+      expect(invokeSpy).toHaveBeenNthCalledWith(1, 'tab-new', 'onActive');
+      expect(invokeSpy).toHaveBeenNthCalledWith(2, 'tab-old', 'onInactive');
+      expect(invokeSpy).not.toHaveBeenCalledWith('tab-new', 'onInactive');
+      expect(pageModel.props.tabActiveKey).toBe('tab-new');
+    });
   });
 
   describe('render header spacing with tabs', () => {

package/src/flow/models/base/__tests__/ActionModel.test.ts

@@ -0,0 +1,83 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { FlowEngine, FlowRuntimeContext } from '@nocobase/flow-engine';
+import { describe, expect, it } from 'vitest';
+import { ActionModel } from '../ActionModel';
+
+class IconActionModel extends ActionModel {
+  defaultProps = {
+    type: 'default' as const,
+    title: 'Icon action',
+    icon: 'PlusOutlined',
+  };
+}
+
+class PlainActionModel extends ActionModel {
+  defaultProps = {
+    type: 'default' as const,
+    title: 'Plain action',
+  };
+}
+
+function getButtonSettingsDefaultParams(model: ActionModel) {
+  const defaultParams = model.getFlow('buttonSettings')?.getStep('general')?.defaultParams;
+  if (typeof defaultParams !== 'function') {
+    throw new Error('buttonSettings.general.defaultParams is unavailable.');
+  }
+  return defaultParams(new FlowRuntimeContext(model, 'buttonSettings', 'settings'));
+}
+
+describe('ActionModel button settings', () => {
+  it('uses icon-only buttons by default for mobile icon actions', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ IconActionModel });
+    const model = engine.createModel<IconActionModel>({
+      use: 'IconActionModel',
+      uid: 'mobile-icon-action',
+    });
+
+    model.context.defineProperty('isMobileLayout', { value: true });
+
+    expect(getButtonSettingsDefaultParams(model)).toMatchObject({
+      icon: 'PlusOutlined',
+      iconOnly: true,
+    });
+  });
+
+  it('keeps button titles visible by default outside mobile layouts', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ IconActionModel });
+    const model = engine.createModel<IconActionModel>({
+      use: 'IconActionModel',
+      uid: 'desktop-icon-action',
+    });
+
+    expect(getButtonSettingsDefaultParams(model)).toMatchObject({
+      icon: 'PlusOutlined',
+    });
+    expect(getButtonSettingsDefaultParams(model)).not.toHaveProperty('iconOnly', true);
+  });
+
+  it('does not force icon-only buttons for mobile actions without icons', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ PlainActionModel });
+    const model = engine.createModel<PlainActionModel>({
+      use: 'PlainActionModel',
+      uid: 'mobile-plain-action',
+    });
+
+    model.context.defineProperty('isMobileLayout', { value: true });
+
+    expect(getButtonSettingsDefaultParams(model)).toMatchObject({
+      title: 'Plain action',
+    });
+    expect(getButtonSettingsDefaultParams(model)).not.toHaveProperty('iconOnly', true);
+  });
+});

package/src/flow/models/base/__tests__/ActionModelCore.render.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@nocobase/test/client';
+import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+import { App, ConfigProvider } from 'antd';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { ActionModel } from '../ActionModel';
+
+class NoIconActionModel extends ActionModel {
+  defaultProps = {
+    type: 'link' as const,
+    title: 'Open details',
+  };
+}
+
+describe('ActionModel rendering', () => {
+  it('shows the title when iconOnly is true but no icon is configured', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ NoIconActionModel });
+    const model = engine.createModel<NoIconActionModel>({
+      use: 'NoIconActionModel',
+      props: {
+        title: 'Open details',
+        iconOnly: true,
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>{model.render()}</App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Open details' })).toBeInTheDocument();
+  });
+});

package/src/flow/models/base/__tests__/GridModel.dragSnapshotContainer.test.ts

@@ -10,7 +10,7 @@
 import { FlowEngine } from '@nocobase/flow-engine';
 import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { GridModel } from '../GridModel';
+import { GridModel, transformRowsToSingleColumn } from '../GridModel';
 
 const createMockRect = ({ top, left, width, height }: { top: number; left: number; width: number; height: number }) => {
   return {
@@ -66,6 +66,83 @@ const createGridContainer = () => {
   return container;
 };
 
+const createGridContainerWithEmptyColumn = () => {
+  const container = document.createElement('div');
+  container.setAttribute('data-grid-root', '');
+  const row = document.createElement('div');
+  row.setAttribute('data-grid-row-id', 'row-1');
+  container.appendChild(row);
+
+  const firstColumn = document.createElement('div');
+  firstColumn.setAttribute('data-grid-column-row-id', 'row-1');
+  firstColumn.setAttribute('data-grid-column-index', '0');
+  row.appendChild(firstColumn);
+
+  const item = document.createElement('div');
+  item.setAttribute('data-grid-item-row-id', 'row-1');
+  item.setAttribute('data-grid-column-index', '0');
+  item.setAttribute('data-grid-item-index', '0');
+  item.setAttribute('data-grid-item-uid', 'item-1');
+  firstColumn.appendChild(item);
+
+  const secondColumn = document.createElement('div');
+  secondColumn.setAttribute('data-grid-column-row-id', 'row-1');
+  secondColumn.setAttribute('data-grid-column-index', '1');
+  row.appendChild(secondColumn);
+
+  mockRect(container, { top: 0, left: 0, width: 480, height: 280 });
+  mockRect(row, { top: 20, left: 20, width: 440, height: 120 });
+  mockRect(firstColumn, { top: 20, left: 20, width: 220, height: 120 });
+  mockRect(item, { top: 30, left: 30, width: 200, height: 100 });
+  mockRect(secondColumn, { top: 20, left: 260, width: 200, height: 120 });
+  return container;
+};
+
+const createProjectedMobileGridContainer = (rows: Record<string, string[][]>) => {
+  const container = document.createElement('div');
+  container.setAttribute('data-grid-root', '');
+  mockRect(container, { top: 0, left: 0, width: 480, height: 320 });
+
+  let top = 20;
+  Object.entries(transformRowsToSingleColumn(rows)).forEach(([rowId, columns]) => {
+    const row = document.createElement('div');
+    row.setAttribute('data-grid-row-id', rowId);
+    container.appendChild(row);
+
+    const column = document.createElement('div');
+    column.setAttribute('data-grid-column-row-id', rowId);
+    column.setAttribute('data-grid-column-index', '0');
+    row.appendChild(column);
+
+    const items = columns[0] || [];
+    items.forEach((itemUid, itemIndex) => {
+      const item = document.createElement('div');
+      item.setAttribute('data-grid-item-row-id', rowId);
+      item.setAttribute('data-grid-column-index', '0');
+      item.setAttribute('data-grid-item-index', String(itemIndex));
+      item.setAttribute('data-grid-item-uid', itemUid);
+      column.appendChild(item);
+      mockRect(item, { top: top + 10 + itemIndex * 36, left: 30, width: 420, height: 32 });
+    });
+
+    mockRect(row, { top, left: 20, width: 440, height: 52 });
+    mockRect(column, { top, left: 20, width: 440, height: 52 });
+    top += 72;
+  });
+
+  return container;
+};
+
+const setMobileGridItems = (engine: FlowEngine, model: GridModel, itemUids: string[]) => {
+  (model as any).subModels = {
+    items: itemUids.map((itemUid) => engine.createModel({ use: 'FlowModel', uid: itemUid })),
+  };
+};
+
+const getSavedTopLevelItemOrder = (model: GridModel) => {
+  return Object.values(model.props.rows || {}).map((columns: string[][]) => columns[0]?.[0]);
+};
+
 describe('GridModel drag snapshot container', () => {
   let engine: FlowEngine;
 
@@ -106,6 +183,167 @@ describe('GridModel drag snapshot container', () => {
     model.handleDragCancel({} as any);
   });
 
+  it('filters multi-column drop slots from mobile drag snapshots', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-mobile-drag-slots',
+      props: {
+        rows: {
+          'row-1': [['item-1'], []],
+        },
+        sizes: {
+          'row-1': [12, 12],
+        },
+      },
+      structure: {} as any,
+    });
+    model.context.defineProperty('isMobileLayout', { value: true });
+
+    const container = createGridContainerWithEmptyColumn();
+    (model.gridContainerRef as any).current = container;
+
+    model.handleDragStart({
+      active: { id: 'item-1' },
+      activatorEvent: { clientX: 80, clientY: 80 },
+    } as any);
+
+    const slotTypes = ((model as any).dragState?.slots || []).map((slot) => slot.type);
+    expect(slotTypes).toContain('column');
+    expect(slotTypes).toContain('row-gap');
+    expect(slotTypes).not.toContain('column-edge');
+    expect(slotTypes).not.toContain('item-edge');
+    expect(slotTypes).not.toContain('empty-column');
+    model.handleDragCancel({} as any);
+  });
+
+  it('keeps empty-row slot available for the first mobile grid item', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-mobile-empty-drag-slots',
+      props: {},
+      structure: {} as any,
+    });
+    model.context.defineProperty('isMobileLayout', { value: true });
+
+    const container = document.createElement('div');
+    mockRect(container, { top: 0, left: 0, width: 480, height: 280 });
+    (model.gridContainerRef as any).current = container;
+
+    model.handleDragStart({
+      active: { id: 'item-1' },
+      activatorEvent: { clientX: 80, clientY: 80 },
+    } as any);
+
+    expect(((model as any).dragState?.slots || []).map((slot) => slot.type)).toEqual(['empty-row']);
+    model.handleDragCancel({} as any);
+  });
+
+  it('saves mobile vertical sorting when moving the second item above the first one', () => {
+    const rows = {
+      'row-a': [['item-a']],
+      'row-b': [['item-b']],
+    };
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-mobile-sort-second-above-first',
+      props: {
+        rows,
+        sizes: {
+          'row-a': [24],
+          'row-b': [24],
+        },
+        rowOrder: ['row-a', 'row-b'],
+      },
+      structure: {} as any,
+    });
+    model.context.defineProperty('isMobileLayout', { value: true });
+    setMobileGridItems(engine, model, ['item-a', 'item-b']);
+    (model as any).saveStepParams = vi.fn();
+
+    const container = createProjectedMobileGridContainer(rows);
+    (model.gridContainerRef as any).current = container;
+
+    model.handleDragStart({
+      active: { id: 'item-b' },
+      activatorEvent: { clientX: 240, clientY: 118 },
+    } as any);
+    model.handleDragEnd({
+      delta: { x: 0, y: -112 },
+    } as any);
+
+    expect(getSavedTopLevelItemOrder(model)).toEqual(['item-b', 'item-a']);
+  });
+
+  it('saves mobile vertical sorting when moving the first item below the last one', () => {
+    const rows = {
+      'row-a': [['item-a']],
+      'row-b': [['item-b']],
+      'row-c': [['item-c']],
+    };
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-mobile-sort-first-below-last',
+      props: {
+        rows,
+        sizes: {
+          'row-a': [24],
+          'row-b': [24],
+          'row-c': [24],
+        },
+        rowOrder: ['row-a', 'row-b', 'row-c'],
+      },
+      structure: {} as any,
+    });
+    model.context.defineProperty('isMobileLayout', { value: true });
+    setMobileGridItems(engine, model, ['item-a', 'item-b', 'item-c']);
+    (model as any).saveStepParams = vi.fn();
+
+    const container = createProjectedMobileGridContainer(rows);
+    (model.gridContainerRef as any).current = container;
+
+    model.handleDragStart({
+      active: { id: 'item-a' },
+      activatorEvent: { clientX: 240, clientY: 46 },
+    } as any);
+    model.handleDragEnd({
+      delta: { x: 0, y: 184 },
+    } as any);
+
+    expect(getSavedTopLevelItemOrder(model)).toEqual(['item-b', 'item-c', 'item-a']);
+  });
+
+  it('does not filter multi-column drop slots from desktop drag snapshots', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-desktop-drag-slots',
+      props: {
+        rows: {
+          'row-1': [['item-1'], []],
+        },
+        sizes: {
+          'row-1': [12, 12],
+        },
+      },
+      structure: {} as any,
+    });
+
+    const container = createGridContainerWithEmptyColumn();
+    (model.gridContainerRef as any).current = container;
+
+    model.handleDragStart({
+      active: { id: 'item-1' },
+      activatorEvent: { clientX: 80, clientY: 80 },
+    } as any);
+
+    const slotTypes = ((model as any).dragState?.slots || []).map((slot) => slot.type);
+    expect(slotTypes).toContain('column');
+    expect(slotTypes).toContain('row-gap');
+    expect(slotTypes).toContain('column-edge');
+    expect(slotTypes).toContain('item-edge');
+    expect(slotTypes).toContain('empty-column');
+    model.handleDragCancel({} as any);
+  });
+
   it('uses native pointer position instead of scroll-adjusted drag delta', () => {
     const model = engine.createModel<GridModel>({
       use: 'GridModel',