From 130585a8d146db3adc39511752daac0a805059ad Mon Sep 17 00:00:00 2001
From: Emerson Lopes <24904209+emerson-d-lopes@users.noreply.github.com>
Date: Wed, 22 Jul 2026 20:03:19 -0300
Subject: [PATCH 1/2] fix(pou): show return type selector for graphical
 function POUs

The return type selector in the variables editor was gated on
editor.type === 'plc-textual', so functions written in FBD, LD, or SFC
had no way to select their return type even though the store action,
POU creation defaults, and the ST transpiler already fully support
return types for graphical functions.

Extend the condition to include 'plc-graphical'. Add a component test
covering the selector's visibility for FBD/LD/ST functions and its
absence for programs and function blocks.

Fixes #696

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U5TQ1y3yBEDx73tYTHoUBj
---
 .../__tests__/return-type-visibility.test.tsx | 47 +++++++++++++++++++
 .../_organisms/variables-editor/index.tsx     |  2 +-
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/components/_organisms/variables-editor/__tests__/return-type-visibility.test.tsx

diff --git a/src/frontend/components/_organisms/variables-editor/__tests__/return-type-visibility.test.tsx b/src/frontend/components/_organisms/variables-editor/__tests__/return-type-visibility.test.tsx
new file mode 100644
index 000000000..f0bdda07a
--- /dev/null
+++ b/src/frontend/components/_organisms/variables-editor/__tests__/return-type-visibility.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react'
+
+// The variables code editor pulls in Monaco, which cannot run in jsdom.
+vi.mock('@root/frontend/components/_organisms/variables-code-editor', () => ({
+  VariablesCodeEditor: () => <div data-testid='variables-code-editor' />,
+}))
+
+import { useOpenPLCStore } from '../../../../store'
+import { VariablesEditor } from '../index'
+
+const createPou = (name: string, type: 'program' | 'function' | 'function-block', language: 'st' | 'fbd' | 'ld') => {
+  const result = useOpenPLCStore.getState().pouActions.create({ type, name, language })
+  expect(result.ok).toBe(true)
+}
+
+// https://github.com/Autonomy-Logic/openplc-editor/issues/696
+describe('VariablesEditor return type selector', () => {
+  it('shows the return type selector for a function written in FBD', () => {
+    createPou('FbdFunction', 'function', 'fbd')
+    render(<VariablesEditor name='FbdFunction' />)
+    expect(screen.getByText('Return type :')).toBeTruthy()
+  })
+
+  it('shows the return type selector for a function written in LD', () => {
+    createPou('LdFunction', 'function', 'ld')
+    render(<VariablesEditor name='LdFunction' />)
+    expect(screen.getByText('Return type :')).toBeTruthy()
+  })
+
+  it('shows the return type selector for a function written in ST', () => {
+    createPou('StFunction', 'function', 'st')
+    render(<VariablesEditor name='StFunction' />)
+    expect(screen.getByText('Return type :')).toBeTruthy()
+  })
+
+  it('does not show the return type selector for an FBD program', () => {
+    createPou('FbdProgram', 'program', 'fbd')
+    render(<VariablesEditor name='FbdProgram' />)
+    expect(screen.queryByText('Return type :')).toBeNull()
+  })
+
+  it('does not show the return type selector for an FBD function block', () => {
+    createPou('FbdBlock', 'function-block', 'fbd')
+    render(<VariablesEditor name='FbdBlock' />)
+    expect(screen.queryByText('Return type :')).toBeNull()
+  })
+})
diff --git a/src/frontend/components/_organisms/variables-editor/index.tsx b/src/frontend/components/_organisms/variables-editor/index.tsx
index e3b650e59..582cb7ecd 100644
--- a/src/frontend/components/_organisms/variables-editor/index.tsx
+++ b/src/frontend/components/_organisms/variables-editor/index.tsx
@@ -1052,7 +1052,7 @@ const VariablesEditor = ({ name: propName, isActive: _isActive = true }: Variabl
         <div aria-label='Variables editor actions' className='relative flex h-8 w-full gap-4'>
           {editorVariables.display === 'table' && (
             <div aria-label='Variables editor table actions container' className='flex h-full w-full select-none gap-4'>
-              {editor.type === 'plc-textual' && editor.meta.pouType === 'function' && (
+              {(editor.type === 'plc-textual' || editor.type === 'plc-graphical') && editor.meta.pouType === 'function' && (
                 <div className='flex h-full max-w-lg flex-1 items-center gap-2'>
                   <label
                     htmlFor='return type'

From 48dd93a1b318898df04d2486fe222fd022c4ae00 Mon Sep 17 00:00:00 2001
From: Emerson Lopes <24904209+emerson-d-lopes@users.noreply.github.com>
Date: Thu, 23 Jul 2026 07:32:44 -0300
Subject: [PATCH 2/2] fix(pou): use dedicated id for return type selector,
 cover SFC

Address review feedback: the return type SelectTrigger reused the
class filter's id ("class-filter"), producing duplicate ids when both
render, and the label's htmlFor pointed at nothing. Use a dedicated
"return-type" id wired to the label, assert the association in a test,
and add an SFC function case alongside FBD/LD/ST.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U5TQ1y3yBEDx73tYTHoUBj
---
 .../__tests__/return-type-visibility.test.tsx | 19 ++++++++++++++++++-
 .../_organisms/variables-editor/index.tsx     |  4 ++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/frontend/components/_organisms/variables-editor/__tests__/return-type-visibility.test.tsx b/src/frontend/components/_organisms/variables-editor/__tests__/return-type-visibility.test.tsx
index f0bdda07a..510601d1a 100644
--- a/src/frontend/components/_organisms/variables-editor/__tests__/return-type-visibility.test.tsx
+++ b/src/frontend/components/_organisms/variables-editor/__tests__/return-type-visibility.test.tsx
@@ -8,7 +8,11 @@ vi.mock('@root/frontend/components/_organisms/variables-code-editor', () => ({
 import { useOpenPLCStore } from '../../../../store'
 import { VariablesEditor } from '../index'
 
-const createPou = (name: string, type: 'program' | 'function' | 'function-block', language: 'st' | 'fbd' | 'ld') => {
+const createPou = (
+  name: string,
+  type: 'program' | 'function' | 'function-block',
+  language: 'st' | 'fbd' | 'ld' | 'sfc',
+) => {
   const result = useOpenPLCStore.getState().pouActions.create({ type, name, language })
   expect(result.ok).toBe(true)
 }
@@ -27,6 +31,19 @@ describe('VariablesEditor return type selector', () => {
     expect(screen.getByText('Return type :')).toBeTruthy()
   })
 
+  it('shows the return type selector for a function written in SFC', () => {
+    createPou('SfcFunction', 'function', 'sfc')
+    render(<VariablesEditor name='SfcFunction' />)
+    expect(screen.getByText('Return type :')).toBeTruthy()
+  })
+
+  it('associates the return type label with its select trigger', () => {
+    createPou('LabeledFunction', 'function', 'fbd')
+    render(<VariablesEditor name='LabeledFunction' />)
+    const trigger = screen.getByLabelText('Return type :')
+    expect(trigger.id).toBe('return-type')
+  })
+
   it('shows the return type selector for a function written in ST', () => {
     createPou('StFunction', 'function', 'st')
     render(<VariablesEditor name='StFunction' />)
diff --git a/src/frontend/components/_organisms/variables-editor/index.tsx b/src/frontend/components/_organisms/variables-editor/index.tsx
index 582cb7ecd..d4e7858a3 100644
--- a/src/frontend/components/_organisms/variables-editor/index.tsx
+++ b/src/frontend/components/_organisms/variables-editor/index.tsx
@@ -1055,14 +1055,14 @@ const VariablesEditor = ({ name: propName, isActive: _isActive = true }: Variabl
               {(editor.type === 'plc-textual' || editor.type === 'plc-graphical') && editor.meta.pouType === 'function' && (
                 <div className='flex h-full max-w-lg flex-1 items-center gap-2'>
                   <label
-                    htmlFor='return type'
+                    htmlFor='return-type'
                     className='w-fit text-nowrap text-xs font-medium text-neutral-1000 dark:text-neutral-300'
                   >
                     Return type :
                   </label>
                   <Select value={returnType} onValueChange={handleReturnTypeChange}>
                     <SelectTrigger
-                      id='class-filter'
+                      id='return-type'
                       placeholder={returnType}
                       withIndicator
                       className='group flex h-full w-full items-center justify-between rounded-lg border border-neutral-500 px-2 font-caption text-cp-sm font-medium text-neutral-850 outline-none dark:border-neutral-850 dark:text-neutral-300'