@nocobase/flow-engine 2.0.0-alpha.7 → 2.0.0-alpha.71

package/src/components/settings/wrappers/embedded/FlowSettings.tsx

@@ -8,13 +8,12 @@
  */
 
 import { Alert, Form, Input, InputNumber, Select, Switch } from 'antd';
-import React, { useCallback, useEffect } from 'react';
-// TODO: ISchema may need to be imported from a different package or refactored.
-import { observer } from '@formily/react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { FlowRuntimeContext } from '../../../../flowContext';
 import { useFlowModelById } from '../../../../hooks';
 import { FlowModel } from '../../../../models';
-import { resolveDefaultParams, setupRuntimeContextSteps } from '../../../../utils';
+import { resolveDefaultParams, setupRuntimeContextSteps, shouldHideStepInSettings } from '../../../../utils';
+import { observer } from '../../../../reactive';
 
 const { Item: FormItem } = Form;
 
@@ -89,46 +88,59 @@ const FlowSettingsContent: React.FC<FlowSettingsContentProps> = observer(({ mode
   const flows = model.getFlows();
   const flow = flows.get(flowKey);
 
-  // 获取可配置的步骤
-  const configurableSteps = Object.entries(flow?.steps || {})
-    .map(([stepKey, actionStep]) => {
-      // 如果步骤设置了 hideInSettings: true，则跳过此步骤
-      if (actionStep.hideInSettings) {
-        return null;
-      }
+  const [configurableSteps, setConfigurableSteps] = useState<{ stepKey: string; step: any; uiSchema: any }[]>([]);
+
+  // 获取可配置的步骤（支持动态 hideInSettings）
+  useEffect(() => {
+    let mounted = true;
+    const buildConfigurableSteps = async () => {
+      const steps: { stepKey: string; step: any; uiSchema: any }[] = [];
+      for (const [stepKey, actionStep] of Object.entries(flow?.steps || {})) {
+        if (await shouldHideStepInSettings(model, flow, actionStep as any)) {
+          continue;
+        }
 
-      // 从step获取uiSchema（如果存在）
-      const stepUiSchema = actionStep.uiSchema || {};
+        // 从step获取uiSchema（如果存在）
+        const stepUiSchema = actionStep.uiSchema || {};
 
-      // 如果step使用了action，也获取action的uiSchema
-      let actionUiSchema = {};
-      if (actionStep.use) {
-        const action = model.flowEngine?.getAction?.(actionStep.use);
-        if (action && action.uiSchema) {
-          actionUiSchema = action.uiSchema;
+        // 如果step使用了action，也获取action的uiSchema
+        let actionUiSchema = {};
+        if (actionStep.use) {
+          const action = model.flowEngine?.getAction?.(actionStep.use);
+          if (action && action.uiSchema) {
+            actionUiSchema = action.uiSchema;
+          }
         }
-      }
 
-      // 合并uiSchema，确保step的uiSchema优先级更高
-      const mergedUiSchema = { ...actionUiSchema };
+        // 合并uiSchema，确保step的uiSchema优先级更高
+        const mergedUiSchema = { ...actionUiSchema };
 
-      // 将stepUiSchema中的字段合并到mergedUiSchema
-      Object.entries(stepUiSchema).forEach(([fieldKey, schema]) => {
-        if (mergedUiSchema[fieldKey]) {
-          mergedUiSchema[fieldKey] = { ...mergedUiSchema[fieldKey], ...schema };
-        } else {
-          mergedUiSchema[fieldKey] = schema;
+        // 将stepUiSchema中的字段合并到mergedUiSchema
+        Object.entries(stepUiSchema).forEach(([fieldKey, schema]) => {
+          if (mergedUiSchema[fieldKey]) {
+            mergedUiSchema[fieldKey] = { ...mergedUiSchema[fieldKey], ...schema };
+          } else {
+            mergedUiSchema[fieldKey] = schema;
+          }
+        });
+
+        // 如果没有可配置的UI Schema，跳过
+        if (Object.keys(mergedUiSchema).length === 0) {
+          continue;
         }
-      });
 
-      // 如果没有可配置的UI Schema，返回null
-      if (Object.keys(mergedUiSchema).length === 0) {
-        return null;
+        steps.push({ stepKey, step: actionStep, uiSchema: mergedUiSchema });
       }
+      if (mounted) {
+        setConfigurableSteps(steps);
+      }
+    };
 
-      return { stepKey, step: actionStep, uiSchema: mergedUiSchema };
-    })
-    .filter(Boolean);
+    buildConfigurableSteps();
+    return () => {
+      mounted = false;
+    };
+  }, [model, flow]);
 
   // 获取当前流程的参数 - 从model中获取实际参数
   const getCurrentParams = useCallback(async () => {

package/src/components/settings/wrappers/embedded/FlowsSettings.tsx

@@ -10,8 +10,8 @@
 import React from 'react';
 import { Alert } from 'antd';
 import { useFlowModelById } from '../../../../hooks';
-import { observer } from '@formily/react';
 import FlowsSettingsContent from './FlowsSettingsContent';
+import { observer } from '../../../../reactive';
 
 // 简单的流程设置组件接口
 interface ModelProvidedProps {

package/src/components/settings/wrappers/embedded/FlowsSettingsContent.tsx

@@ -7,12 +7,14 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { observer } from '@formily/react';
 import { Card, Collapse, Empty } from 'antd';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { FlowModel } from '../../../../models';
 import { StepDefinition } from '../../../../types';
+import { shouldHideStepInSettings } from '../../../../utils';
 import { FlowSettings } from './FlowSettings';
+import { FlowDefinition } from '../../../../FlowDefinition';
+import { observer } from '../../../../reactive';
 
 const { Panel } = Collapse;
 
@@ -26,51 +28,71 @@ interface FlowsSettingsContentProps {
 const FlowsSettingsContent: React.FC<FlowsSettingsContentProps> = observer(({ model, expandAll = false }) => {
   const flows = model.getFlows();
 
-  const filterFlows = Array.from(flows.values()).filter((flow) => {
-    const configurableSteps = Object.entries(flow.steps)
-      .map(([stepKey, actionStep]) => {
-        // 如果步骤设置了 hideInSettings: true，则跳过此步骤
-        if (actionStep.hideInSettings) {
-          return null;
-        }
+  const [filterFlows, setFilterFlows] = useState<FlowDefinition[]>([]);
 
-        // 从step获取uiSchema（如果存在）
-        const stepUiSchema = actionStep.uiSchema || {};
+  useEffect(() => {
+    let mounted = true;
+    const buildFilterFlows = async () => {
+      const result: FlowDefinition[] = [];
+      for (const flow of Array.from(flows.values())) {
+        const configurableSteps = await Promise.all(
+          Object.entries(flow.steps).map(async ([stepKey, actionStep]) => {
+            // 如果步骤设置了 hideInSettings: true 或动态隐藏，则跳过此步骤
+            if (await shouldHideStepInSettings(model, flow, actionStep as StepDefinition)) {
+              return null;
+            }
 
-        // 如果step使用了action，也获取action的uiSchema
-        let actionUiSchema = {};
-        if (actionStep.use) {
-          const action = model.flowEngine?.getAction?.(actionStep.use);
-          if (action && action.uiSchema) {
-            actionUiSchema = action.uiSchema;
-          }
-        }
+            // 从step获取uiSchema（如果存在）
+            const stepUiSchema = actionStep.uiSchema || {};
+
+            // 如果step使用了action，也获取action的uiSchema
+            let actionUiSchema = {};
+            if (actionStep.use) {
+              const action = model.flowEngine?.getAction?.(actionStep.use);
+              if (action && action.uiSchema) {
+                actionUiSchema = action.uiSchema;
+              }
+            }
+
+            // 合并uiSchema，确保step的uiSchema优先级更高
+            // 先复制action的uiSchema，然后用step的uiSchema覆盖相同的字段
+            const mergedUiSchema = { ...actionUiSchema };
 
-        // 合并uiSchema，确保step的uiSchema优先级更高
-        // 先复制action的uiSchema，然后用step的uiSchema覆盖相同的字段
-        const mergedUiSchema = { ...actionUiSchema };
-
-        // 将stepUiSchema中的字段合并到mergedUiSchema
-        Object.entries(stepUiSchema).forEach(([fieldKey, schema]) => {
-          if (mergedUiSchema[fieldKey]) {
-            // 如果字段已存在，则合并schema对象，保持step中的属性优先级更高
-            mergedUiSchema[fieldKey] = { ...mergedUiSchema[fieldKey], ...schema };
-          } else {
-            // 如果字段不存在，则直接添加
-            mergedUiSchema[fieldKey] = schema;
-          }
-        });
-
-        // 如果没有可配置的UI Schema，返回null
-        if (Object.keys(mergedUiSchema).length === 0) {
-          return null;
+            // 将stepUiSchema中的字段合并到mergedUiSchema
+            Object.entries(stepUiSchema).forEach(([fieldKey, schema]) => {
+              if (mergedUiSchema[fieldKey]) {
+                // 如果字段已存在，则合并schema对象，保持step中的属性优先级更高
+                mergedUiSchema[fieldKey] = { ...mergedUiSchema[fieldKey], ...schema };
+              } else {
+                // 如果字段不存在，则直接添加
+                mergedUiSchema[fieldKey] = schema;
+              }
+            });
+
+            // 如果没有可配置的UI Schema，返回null
+            if (Object.keys(mergedUiSchema).length === 0) {
+              return null;
+            }
+
+            return { stepKey, step: actionStep, uiSchema: mergedUiSchema };
+          }),
+        ).then((steps) => steps.filter(Boolean));
+
+        if (configurableSteps.length > 0) {
+          result.push(flow);
         }
+      }
+
+      if (mounted) {
+        setFilterFlows(result);
+      }
+    };
 
-        return { stepKey, step: actionStep, uiSchema: mergedUiSchema };
-      })
-      .filter(Boolean);
-    return configurableSteps.length > 0;
-  });
+    buildFilterFlows();
+    return () => {
+      mounted = false;
+    };
+  }, [model, flows]);
 
   const flowKeys = filterFlows.map((flow) => flow.key);
   if (flowKeys.length === 0) {

package/src/components/subModel/AddSubModelButton.tsx

@@ -27,11 +27,19 @@ type CreateModelOptionsFn = (
   extra?: any,
 ) => CreateModelOptionsStringUse | Promise<CreateModelOptionsStringUse>;
 
+type HideOrFactory = boolean | ((ctx: FlowModelContext) => boolean | Promise<boolean>);
+
 export interface SubModelItem {
   key?: string;
   label?: string | React.ReactNode;
   type?: 'group' | 'divider';
   disabled?: boolean;
+  /**
+   * 动态隐藏菜单项（支持异步）。与模型 meta.hide 语义一致。
+   * - `true` 表示隐藏
+   * - function(ctx) 返回 true 表示隐藏
+   */
+  hide?: HideOrFactory;
   icon?: React.ReactNode;
   children?: false | SubModelItemsType;
   createModelOptions?: CreateModelOptionsStringUse | CreateModelOptionsFn;
@@ -181,6 +189,8 @@ const hasToggleItems = (items: SubModelItem[]): boolean => {
   const walk = (nodes: SubModelItem[]): boolean => {
     for (const node of nodes) {
       if (!node) continue;
+      // hide 为函数时菜单可见性依赖运行时上下文，应禁用缓存
+      if (typeof node.hide === 'function') return true;
       if (!node.children && (node.toggleDetector || node.toggleable)) return true;
       if (Array.isArray(node.children)) {
         if (walk(node.children)) return true;
@@ -193,6 +203,44 @@ const hasToggleItems = (items: SubModelItem[]): boolean => {
   return walk(items);
 };
 
+const isHidden = async (item: SubModelItem, ctx: FlowModelContext): Promise<boolean> => {
+  const hide = item.hide;
+  if (!hide) return false;
+  if (typeof hide === 'function') {
+    return !!(await hide(ctx));
+  }
+  return !!hide;
+};
+
+const hasVisibleSubModelItems = async (items: SubModelItem[], ctx: FlowModelContext): Promise<boolean> => {
+  for (const item of items) {
+    if (!item) continue;
+    try {
+      if (await isHidden(item, ctx)) continue;
+    } catch (e) {
+      console.error('[NocoBase]: Failed to resolve item.hide:', e);
+    }
+
+    if (Array.isArray(item.children)) {
+      const hasVisibleChildren = await hasVisibleSubModelItems(item.children, ctx);
+      if (hasVisibleChildren) return true;
+
+      if (item.type === 'group' || !item.createModelOptions) {
+        continue;
+      }
+      return true;
+    }
+
+    if (typeof item.children === 'function') {
+      return true;
+    }
+
+    return true;
+  }
+
+  return false;
+};
+
 /**
  * 递归转换 SubModelItem 数组为 LazyDropdown 的 Item 格式
  */
@@ -204,13 +252,45 @@ const transformSubModelItems = async (
 ): Promise<Item[]> => {
   if (items.length === 0) return [];
 
+  // 动态隐藏：按当前 FlowModelContext 过滤（支持异步）
+  const hidden = await Promise.all(
+    items.map(async (item) => {
+      if (!item) return true;
+      try {
+        return await isHidden(item, model.context);
+      } catch (e) {
+        console.error('[NocoBase]: Failed to resolve item.hide:', e);
+        return false; // 出错时保守显示
+      }
+    }),
+  );
+  const visibleItems = items.filter((item, idx) => !!item && !hidden[idx]);
+
+  if (visibleItems.length === 0) return [];
+
   // 批量收集需要异步检测的可切换项
   const toggleItems: Array<{ item: SubModelItem; index: number }> = [];
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i];
-    if (item.toggleable && item.useModel) {
+  for (let i = 0; i < visibleItems.length; i++) {
+    const item = visibleItems[i];
+
+    // 自动从 createModelOptions 中推断 useModel，避免遗漏导致 toggleable 失效
+    let resolvedUseModel = item.useModel;
+    if (!resolvedUseModel && item.toggleable) {
+      try {
+        const createOpts = await getCreateModelOptions(item, model.context);
+        resolvedUseModel = createOpts?.use;
+        if (resolvedUseModel) {
+          item.useModel = resolvedUseModel;
+        }
+      } catch (error) {
+        // ignore and fall back to existing useModel
+        console.error('[NocoBase]: Failed to resolve useModel for toggleable item:', error);
+      }
+    }
+
+    if (item.toggleable && resolvedUseModel) {
       item.toggleDetector = (ctx) => {
-        const C = ctx.engine.getModelClass(item.useModel); // 确保 use 是有效的模型类
+        const C = ctx.engine.getModelClass(resolvedUseModel); // 确保 use 是有效的模型类
         const r = ctx.model.findSubModel(subModelKey, (m) => {
           if (item.toggleable === true) {
             return m.constructor === C;
@@ -221,7 +301,7 @@ const transformSubModelItems = async (
         return !!r;
       };
       item.customRemove = async (ctx, item) => {
-        const C = ctx.engine.getModelClass(item.useModel); // 确保 use 是有效的模型类
+        const C = ctx.engine.getModelClass(resolvedUseModel); // 确保 use 是有效的模型类
         const r = ctx.model.findSubModel(subModelKey, (m) => {
           if (item.toggleable === true) {
             return m.constructor === C;
@@ -251,7 +331,7 @@ const transformSubModelItems = async (
   });
 
   // 并发转换所有项目
-  const transformPromises = items.map(async (item, index) => {
+  const transformPromises = visibleItems.map(async (item, index): Promise<Item | null> => {
     const transformedItem: Item = {
       key: item.key,
       label: item.label,
@@ -277,14 +357,28 @@ const transformSubModelItems = async (
         // 仅当子树包含 toggleable/动态函数时，才转为惰性函数；否则保留为静态数组，兼容现有测试与用法
         const childHasToggle = hasToggleItems(staticChildren);
         if (childHasToggle) {
-          transformedItem.children = async () =>
-            transformSubModelItems(staticChildren, model, subModelKey, subModelType);
+          const hasVisibleChildren = await hasVisibleSubModelItems(staticChildren, model.context);
+          if (!hasVisibleChildren) {
+            if (item.type === 'group' || !item.createModelOptions) {
+              return null;
+            }
+          } else {
+            transformedItem.children = async () =>
+              transformSubModelItems(staticChildren, model, subModelKey, subModelType);
+          }
         } else {
           transformedItem.children = await transformSubModelItems(staticChildren, model, subModelKey, subModelType);
         }
       }
     }
 
+    // group/submenu 若最终无子项，则不展示该分组，避免空分组残留
+    if (Array.isArray(transformedItem.children) && transformedItem.children.length === 0) {
+      if (item.type === 'group' || !item.createModelOptions) {
+        return null;
+      }
+    }
+
     // 处理开关式菜单项
     if (item.toggleDetector && !item.children) {
       const isToggled = toggleMap.get(index) || false;
@@ -299,7 +393,8 @@ const transformSubModelItems = async (
     return transformedItem;
   });
 
-  return Promise.all(transformPromises);
+  const transformed = await Promise.all(transformPromises);
+  return transformed.filter((item): item is Item => !!item);
 };
 
 /**

package/src/components/subModel/LazyDropdown.tsx

@@ -478,10 +478,8 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       setRootItems(resolvedItems);
     };
 
-    if (menuVisible) {
-      loadRootItems();
-    }
-  }, [menuVisible, stateVersion, menuItems]);
+    loadRootItems();
+  }, [stateVersion, menuItems]);
 
   // 递归解析 items，支持 children 为同步/异步函数
   function buildSearchChildren(
@@ -666,6 +664,17 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
     `;
   }, [dropdownMaxHeight]);
 
+  const items =
+    rootLoading && rootItems.length === 0
+      ? [
+          {
+            key: 'root-loading',
+            label: <Spin size="small" />,
+            disabled: true,
+          },
+        ]
+      : resolveItems(rootItems);
+
   return (
     <Dropdown
       {...props}
@@ -675,16 +684,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       placement="bottomLeft"
       menu={{
         ...dropdownMenuProps,
-        items:
-          rootLoading && rootItems.length === 0
-            ? [
-                {
-                  key: 'root-loading',
-                  label: <Spin size="small" />,
-                  disabled: true,
-                },
-              ]
-            : resolveItems(rootItems),
+        items: items,
         onClick: () => {},
         style: {
           maxHeight: dropdownMaxHeight,

package/src/components/subModel/__tests__/AddSubModelButton.test.tsx

@@ -190,6 +190,143 @@ describe('transformItems - searchable flags', () => {
   });
 });
 
+describe('transformItems - hide', () => {
+  it('filters items by hide flag/function recursively', async () => {
+    const engine = new FlowEngine();
+    engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent', uid: 'p-hide' });
+
+    const definition: SubModelItem[] = [
+      {
+        key: 'keep',
+        label: 'Keep',
+        createModelOptions: { use: 'Parent' },
+      },
+      {
+        key: 'hide-true',
+        label: 'Hidden',
+        hide: true,
+        createModelOptions: { use: 'Parent' },
+      },
+      {
+        key: 'hide-fn',
+        label: 'HiddenFn',
+        hide: (ctx: FlowModelContext) => ctx.model.uid === 'p-hide',
+        createModelOptions: { use: 'Parent' },
+      },
+      {
+        key: 'group',
+        type: 'group',
+        label: 'Group',
+        children: [
+          { key: 'g-hide', label: 'GHide', hide: true, createModelOptions: { use: 'Parent' } },
+          { key: 'g-keep', label: 'GKeep', createModelOptions: { use: 'Parent' } },
+        ],
+      },
+    ];
+
+    const factory = transformItems(definition, parent, 'items', 'array');
+    const resolved = await (typeof factory === 'function' ? factory() : factory);
+
+    expect(resolved.map((i: any) => i.key)).toEqual(['keep', 'group']);
+    const group = resolved.find((i: any) => i.key === 'group') as any;
+    expect(group).toBeTruthy();
+    expect(Array.isArray(group.children)).toBe(true);
+    expect(group.children.map((i: any) => i.key)).toEqual(['g-keep']);
+  });
+
+  it('removes group when all children are hidden (even with async hide)', async () => {
+    const engine = new FlowEngine();
+    engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent', uid: 'p-empty-group' });
+
+    let show = false;
+    const definition: SubModelItem[] = [
+      {
+        key: 'group',
+        type: 'group',
+        label: 'Group',
+        children: [
+          {
+            key: 'child',
+            label: 'Child',
+            hide: async () => !show,
+            createModelOptions: { use: 'Parent' },
+          },
+        ],
+      },
+    ];
+
+    const factory = transformItems(definition, parent, 'items', 'array');
+    const first = await (factory as () => Promise<any[]>)();
+    expect(first).toHaveLength(0);
+
+    show = true;
+    const second = await (factory as () => Promise<any[]>)();
+    expect(second.map((i: any) => i.key)).toEqual(['group']);
+  });
+
+  it('supports async hide functions and disables cache', async () => {
+    const engine = new FlowEngine();
+    engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent', uid: 'p-async-hide' });
+
+    let shouldHide = true;
+    const definition: SubModelItem[] = [
+      {
+        key: 'async-hide',
+        label: 'AsyncHide',
+        hide: async () => shouldHide,
+        createModelOptions: { use: 'Parent' },
+      },
+    ];
+
+    const factory = transformItems(definition, parent, 'items', 'array');
+
+    const first = await (factory as () => Promise<any[]>)();
+    expect(first).toHaveLength(0);
+
+    shouldHide = false;
+    const second = await (factory as () => Promise<any[]>)();
+    expect(second.map((i: any) => i.key)).toEqual(['async-hide']);
+    expect(second).not.toBe(first);
+  });
+
+  it('shows items when hide function throws (conservative fallback)', async () => {
+    const engine = new FlowEngine();
+    engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent', uid: 'p-hide-throws' });
+
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    try {
+      const definition: SubModelItem[] = [
+        {
+          key: 'throw',
+          label: 'Throw',
+          hide: async () => {
+            throw new Error('boom');
+          },
+          createModelOptions: { use: 'Parent' },
+        },
+      ];
+
+      const factory = transformItems(definition, parent, 'items', 'array');
+      const resolved = await (factory as () => Promise<any[]>)();
+      expect(resolved.map((i: any) => i.key)).toEqual(['throw']);
+    } finally {
+      consoleSpy.mockRestore();
+    }
+  });
+});
+
 describe('transformItems - toggleable items', () => {
   class ToggleParent extends FlowModel {}
   class ToggleChild extends FlowModel {}
@@ -233,6 +370,32 @@ describe('transformItems - toggleable items', () => {
     expect(((parent.subModels as any).items || []).length).toBe(0);
   });
 
+  it('infers useModel from createModelOptions when toggleable is enabled', async () => {
+    const engine = setupEngine();
+    const parent = engine.createModel<ToggleParent>({ use: 'ToggleParent', uid: 'toggle-parent-infer' });
+    const child = engine.createModel<ToggleChild>({ use: 'ToggleChild', uid: 'toggle-child-infer' });
+    parent.addSubModel('items', child);
+
+    const definition: SubModelItem[] = [
+      {
+        key: 'toggle-child',
+        label: 'Toggle Child',
+        toggleable: true,
+        // intentionally omit useModel to rely on createModelOptions.use
+        createModelOptions: { use: 'ToggleChild' },
+      },
+    ];
+
+    const factory = transformItems(definition, parent, 'items', 'array');
+    const resolved = await (typeof factory === 'function' ? factory() : Promise.resolve(factory));
+    const toggleItem = resolved[0];
+
+    expect(definition[0].useModel).toBe('ToggleChild');
+    expect(toggleItem.isToggled).toBe(true);
+    const { getByRole } = render(<>{toggleItem.label}</>);
+    expect(getByRole('switch')).toHaveAttribute('aria-checked', 'true');
+  });
+
   it('keeps toggleable item off when sub model missing', async () => {
     const engine = setupEngine();
     const parent = engine.createModel<ToggleParent>({ use: 'ToggleParent', uid: 'toggle-parent-off' });
@@ -847,6 +1010,7 @@ describe('AddSubModelButton toggleable behavior', () => {
     save = vi.fn().mockResolvedValue({});
     destroy = vi.fn().mockResolvedValue(true);
     move = vi.fn().mockResolvedValue(undefined);
+    duplicate = vi.fn().mockResolvedValue(null);
   }
 
   function setup() {
@@ -942,13 +1106,10 @@ describe('AddSubModelButton toggleable behavior', () => {
     expect(screen.getByText('Child A')).toBeInTheDocument();
     expect(screen.getByText('Child B')).toBeInTheDocument();
 
-    // ensure destroy was called once for removal with increased timeout
-    await waitFor(
-      () => {
-        expect(repo.destroy).toHaveBeenCalledTimes(1);
-      },
-      { timeout: 5000 },
-    );
+    // ensure destroy has been called (avoid flakiness on exact call counts)
+    await waitFor(() => {
+      expect(repo.destroy).toHaveBeenCalled();
+    });
   });
 
   test('toggle state updates without menu closing', async () => {