From 30dc95a66608010d23c30475475aec5b213545aa Mon Sep 17 00:00:00 2001
From: Kouji Takao <kouji.takao@gmail.com>
Date: Sun, 1 Feb 2026 02:01:59 +0900
Subject: [PATCH 1/2] feat: add middle stage size and update min-height

- Reduced min-height to 600px in CSS
- Added middle stage size constants (360x270)
- Implemented stage size resolution for middle size
- Added middle stage toggle button
- Updated SpriteInfo to position labels above inputs for middle size
- Set middle stage as default
- Added unit tests for new functionality

Resolves smalruby/smalruby3-editor#39
---
 .../components/sprite-info/sprite-info.jsx    | 10 +++++--
 .../stage-header/icon--middle-stage.svg       | 14 +++++++++
 .../components/stage-header/stage-header.jsx  | 15 ++++++++++
 .../src/containers/stage-header.jsx           |  1 +
 .../scratch-gui/src/lib/layout-constants.js   | 15 ++++++++--
 packages/scratch-gui/src/lib/screen-utils.js  |  3 ++
 packages/scratch-gui/src/playground/index.css |  2 +-
 .../scratch-gui/src/reducers/stage-size.js    |  2 +-
 .../test/unit/lib/layout-constants.test.js    | 21 +++++++++++++
 .../test/unit/lib/screen-utils.test.js        | 30 +++++++++++++++++++
 .../unit/reducers/stage-size-reducer.test.js  | 17 +++++++++++
 11 files changed, 124 insertions(+), 6 deletions(-)
 create mode 100644 packages/scratch-gui/src/components/stage-header/icon--middle-stage.svg
 create mode 100644 packages/scratch-gui/test/unit/lib/layout-constants.test.js
 create mode 100644 packages/scratch-gui/test/unit/lib/screen-utils.test.js
 create mode 100644 packages/scratch-gui/test/unit/reducers/stage-size-reducer.test.js

diff --git a/packages/scratch-gui/src/components/sprite-info/sprite-info.jsx b/packages/scratch-gui/src/components/sprite-info/sprite-info.jsx
index be67843d4e0..f84258b38eb 100644
--- a/packages/scratch-gui/src/components/sprite-info/sprite-info.jsx
+++ b/packages/scratch-gui/src/components/sprite-info/sprite-info.jsx
@@ -116,7 +116,10 @@ class SpriteInfo extends React.Component {
                         </div> :
                         null
                 }
-                <Label text="x">
+                <Label
+                    text="x"
+                    above={stageSize === STAGE_DISPLAY_SIZES.middle}
+                >
                     <BufferedInput
                         small
                         disabled={this.props.disabled}
@@ -143,7 +146,10 @@ class SpriteInfo extends React.Component {
                         </div> :
                         null
                 }
-                <Label text="y">
+                <Label
+                    text="y"
+                    above={stageSize === STAGE_DISPLAY_SIZES.middle}
+                >
                     <BufferedInput
                         small
                         disabled={this.props.disabled}
diff --git a/packages/scratch-gui/src/components/stage-header/icon--middle-stage.svg b/packages/scratch-gui/src/components/stage-header/icon--middle-stage.svg
new file mode 100644
index 00000000000..de504d47fe5
--- /dev/null
+++ b/packages/scratch-gui/src/components/stage-header/icon--middle-stage.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Middle Stage</title>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Middle-Stage" stroke="#855CD6">
+            <g id="middle-stage" transform="translate(3.000000, 4.000000)">
+                <path d="M1,0 L8,0 L8,12 L1,12 L1,12 C0.44771525,12 6.76353751e-17,11.5522847 0,11 L0,1 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z" id="Rectangle"></path>
+                <path d="M8,0 L13,0 L13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 L14,4 L8,4 L8,0 Z" id="Rectangle" fill="#855CD6"></path>
+                <path d="M8,4 L14,4 L14,11 L14,11 C14,11.5522847 13.5522847,12 13,12 L8,12 L8,4 Z" id="Rectangle-Copy"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/packages/scratch-gui/src/components/stage-header/stage-header.jsx b/packages/scratch-gui/src/components/stage-header/stage-header.jsx
index b66b60805ab..71fbfba68d9 100644
--- a/packages/scratch-gui/src/components/stage-header/stage-header.jsx
+++ b/packages/scratch-gui/src/components/stage-header/stage-header.jsx
@@ -14,6 +14,7 @@ import {STAGE_SIZE_MODES} from '../../lib/layout-constants';
 import fullScreenIcon from './icon--fullscreen.svg';
 import largeStageIcon from './icon--large-stage.svg';
 import smallStageIcon from './icon--small-stage.svg';
+import middleStageIcon from './icon--middle-stage.svg';
 import unFullScreenIcon from './icon--unfullscreen.svg';
 
 import scratchLogo from '../menu-bar/scratch-logo.svg';
@@ -33,6 +34,11 @@ const messages = defineMessages({
         description: 'Button to change stage size to small',
         id: 'gui.stageHeader.stageSizeSmall'
     },
+    middleStageSizeMessage: {
+        defaultMessage: 'Switch to middle stage',
+        description: 'Button to change stage size to middle',
+        id: 'gui.stageHeader.stageSizeMiddle'
+    },
     fullStageSizeMessage: {
         defaultMessage: 'Enter full screen mode',
         description: 'Button to change stage size to full screen',
@@ -63,6 +69,7 @@ const StageHeaderComponent = function (props) {
         onKeyPress,
         onSetStageLarge,
         onSetStageSmall,
+        onSetStageMiddle,
         onSetStageFull,
         onSetStageUnFull,
         onUpdateProjectThumbnail,
@@ -149,6 +156,13 @@ const StageHeaderComponent = function (props) {
                                 isSelected: stageSizeMode === STAGE_SIZE_MODES.small,
                                 title: intl.formatMessage(messages.smallStageSizeMessage)
                             },
+                            {
+                                handleClick: onSetStageMiddle,
+                                icon: middleStageIcon,
+                                iconClassName: styles.stageButtonIcon,
+                                isSelected: stageSizeMode === STAGE_SIZE_MODES.middle,
+                                title: intl.formatMessage(messages.middleStageSizeMessage)
+                            },
                             {
                                 handleClick: onSetStageLarge,
                                 icon: largeStageIcon,
@@ -212,6 +226,7 @@ StageHeaderComponent.propTypes = {
     onSetStageFull: PropTypes.func.isRequired,
     onSetStageLarge: PropTypes.func.isRequired,
     onSetStageSmall: PropTypes.func.isRequired,
+    onSetStageMiddle: PropTypes.func.isRequired,
     onSetStageUnFull: PropTypes.func.isRequired,
     onUpdateProjectThumbnail: PropTypes.func,
     projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
diff --git a/packages/scratch-gui/src/containers/stage-header.jsx b/packages/scratch-gui/src/containers/stage-header.jsx
index f962c05cfa6..6af88552aea 100644
--- a/packages/scratch-gui/src/containers/stage-header.jsx
+++ b/packages/scratch-gui/src/containers/stage-header.jsx
@@ -61,6 +61,7 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
     onSetStageLarge: () => dispatch(setStageSize(STAGE_SIZE_MODES.large)),
     onSetStageSmall: () => dispatch(setStageSize(STAGE_SIZE_MODES.small)),
+    onSetStageMiddle: () => dispatch(setStageSize(STAGE_SIZE_MODES.middle)),
     onSetStageFull: () => dispatch(setFullScreen(true)),
     onSetStageUnFull: () => dispatch(setFullScreen(false))
 });
diff --git a/packages/scratch-gui/src/lib/layout-constants.js b/packages/scratch-gui/src/lib/layout-constants.js
index 8766efae2cb..98875a17c8e 100644
--- a/packages/scratch-gui/src/lib/layout-constants.js
+++ b/packages/scratch-gui/src/lib/layout-constants.js
@@ -13,7 +13,12 @@ const STAGE_SIZE_MODES = keyMirror({
     /**
      * The "small stage" button is pressed; the user would like a small stage.
      */
-    small: null
+    small: null,
+
+    /**
+     * The "middle stage" button is pressed; the user would like a middle stage.
+     */
+    middle: null
 });
 
 /**
@@ -34,7 +39,12 @@ const STAGE_DISPLAY_SIZES = keyMirror({
     /**
      * Small stage (ignores browser width)
      */
-    small: null
+    small: null,
+
+    /**
+     * Middle stage
+     */
+    middle: null
 });
 
 // zoom level to start with
@@ -44,6 +54,7 @@ const STAGE_DISPLAY_SCALES = {};
 STAGE_DISPLAY_SCALES[STAGE_DISPLAY_SIZES.large] = 1; // large mode, wide browser (standard)
 STAGE_DISPLAY_SCALES[STAGE_DISPLAY_SIZES.largeConstrained] = 0.85; // large mode but narrow browser
 STAGE_DISPLAY_SCALES[STAGE_DISPLAY_SIZES.small] = 0.5; // small mode, regardless of browser size
+STAGE_DISPLAY_SCALES[STAGE_DISPLAY_SIZES.middle] = 0.75; // middle mode, regardless of browser size
 
 export default {
     standardStageWidth: 480,
diff --git a/packages/scratch-gui/src/lib/screen-utils.js b/packages/scratch-gui/src/lib/screen-utils.js
index 38e4051d273..b37ab838824 100644
--- a/packages/scratch-gui/src/lib/screen-utils.js
+++ b/packages/scratch-gui/src/lib/screen-utils.js
@@ -29,6 +29,9 @@ const resolveStageSize = (stageSizeMode, isFullSize) => {
     if (stageSizeMode === STAGE_SIZE_MODES.small) {
         return STAGE_DISPLAY_SIZES.small;
     }
+    if (stageSizeMode === STAGE_SIZE_MODES.middle) {
+        return STAGE_DISPLAY_SIZES.middle;
+    }
     if (isFullSize) {
         return STAGE_DISPLAY_SIZES.large;
     }
diff --git a/packages/scratch-gui/src/playground/index.css b/packages/scratch-gui/src/playground/index.css
index edb710e70da..4b65314a001 100644
--- a/packages/scratch-gui/src/playground/index.css
+++ b/packages/scratch-gui/src/playground/index.css
@@ -8,7 +8,7 @@ body,
 
     /* Setting min height/width makes the UI scroll below those sizes */
     min-width: 1024px;
-    min-height: 640px; /* Min height to fit sprite/backdrop button */
+    min-height: 600px; /* Min height to fit sprite/backdrop button */
 }
 
 /* @todo: move globally? Safe / side FX, for blocks particularly? */
diff --git a/packages/scratch-gui/src/reducers/stage-size.js b/packages/scratch-gui/src/reducers/stage-size.js
index 44246ca43ae..9069fae4a30 100644
--- a/packages/scratch-gui/src/reducers/stage-size.js
+++ b/packages/scratch-gui/src/reducers/stage-size.js
@@ -3,7 +3,7 @@ import {STAGE_DISPLAY_SIZES} from '../lib/layout-constants.js';
 const SET_STAGE_SIZE = 'scratch-gui/StageSize/SET_STAGE_SIZE';
 
 const initialState = {
-    stageSize: STAGE_DISPLAY_SIZES.large
+    stageSize: STAGE_DISPLAY_SIZES.middle
 };
 
 const reducer = function (state, action) {
diff --git a/packages/scratch-gui/test/unit/lib/layout-constants.test.js b/packages/scratch-gui/test/unit/lib/layout-constants.test.js
new file mode 100644
index 00000000000..dfc9169ce67
--- /dev/null
+++ b/packages/scratch-gui/test/unit/lib/layout-constants.test.js
@@ -0,0 +1,21 @@
+import {
+    STAGE_SIZE_MODES,
+    STAGE_DISPLAY_SIZES,
+    STAGE_DISPLAY_SCALES
+} from '../../../src/lib/layout-constants';
+
+describe('Layout Constants', () => {
+    test('STAGE_SIZE_MODES includes middle', () => {
+        expect(STAGE_SIZE_MODES.middle).toBe('middle');
+    });
+
+    test('STAGE_DISPLAY_SIZES includes middle', () => {
+        expect(STAGE_DISPLAY_SIZES.middle).toBe('middle');
+    });
+
+    test('STAGE_DISPLAY_SCALES includes middle', () => {
+        // We need to make sure we are accessing the property after it is defined.
+        // Since we are testing if it exists, using the string key is safer for the test setup if the constant isn't there yet.
+        expect(STAGE_DISPLAY_SCALES.middle).toBe(0.75);
+    });
+});
diff --git a/packages/scratch-gui/test/unit/lib/screen-utils.test.js b/packages/scratch-gui/test/unit/lib/screen-utils.test.js
new file mode 100644
index 00000000000..b4720b4cd6f
--- /dev/null
+++ b/packages/scratch-gui/test/unit/lib/screen-utils.test.js
@@ -0,0 +1,30 @@
+import {
+    resolveStageSize,
+    getStageDimensions
+} from '../../../src/lib/screen-utils';
+import layout from '../../../src/lib/layout-constants';
+
+describe('resolveStageSize', () => {
+    test('returns middle display size when mode is middle', () => {
+        const mode = 'middle'; 
+        const size = resolveStageSize(mode, false);
+        expect(size).toBe('middle'); 
+    });
+});
+
+describe('getStageDimensions', () => {
+    test('returns correct dimensions for middle size', () => {
+        const size = 'middle';
+        // Mocking STAGE_DISPLAY_SCALES locally if needed, but getStageDimensions imports it.
+        // We expect the implementation to use the constant.
+        
+        // Since getStageDimensions uses STAGE_DISPLAY_SCALES from layout-constants, 
+        // and we can't easily mock that internal dependency without complex jest setup or rewire,
+        // we will rely on the fact that we will update layout-constants.
+        
+        const dimensions = getStageDimensions(size, false);
+        expect(dimensions.width).toBe(360);
+        expect(dimensions.height).toBe(270);
+        expect(dimensions.scale).toBe(0.75);
+    });
+});
diff --git a/packages/scratch-gui/test/unit/reducers/stage-size-reducer.test.js b/packages/scratch-gui/test/unit/reducers/stage-size-reducer.test.js
new file mode 100644
index 00000000000..cfd2b90564d
--- /dev/null
+++ b/packages/scratch-gui/test/unit/reducers/stage-size-reducer.test.js
@@ -0,0 +1,17 @@
+import stageSizeReducer, {
+    stageSizeInitialState as initialState,
+    setStageSize
+} from '../../../src/reducers/stage-size';
+
+describe('stageSizeReducer', () => {
+    // This test checks for the new default state (Phase 3)
+    test('initial state is middle', () => {
+        expect(initialState.stageSize).toBe('middle');
+    });
+
+    test('handles setStageSize action for middle', () => {
+        const action = setStageSize('middle');
+        const state = stageSizeReducer(initialState, action);
+        expect(state.stageSize).toBe('middle');
+    });
+});

From 447b2c4964fdd307856d9fc14d96d891aab63372 Mon Sep 17 00:00:00 2001
From: Kouji Takao <kouji.takao@gmail.com>
Date: Sun, 1 Feb 2026 02:08:51 +0900
Subject: [PATCH 2/2] fix: add missing translations for middle stage size
 button

---
 packages/scratch-gui/src/locales/en.js      | 3 ++-
 packages/scratch-gui/src/locales/ja-Hira.js | 3 ++-
 packages/scratch-gui/src/locales/ja.js      | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/scratch-gui/src/locales/en.js b/packages/scratch-gui/src/locales/en.js
index 53b10339d22..ddb7ea94b42 100644
--- a/packages/scratch-gui/src/locales/en.js
+++ b/packages/scratch-gui/src/locales/en.js
@@ -216,5 +216,6 @@ export default {
     'gui.connection.networkFiltered.copied': 'Copied!',
     'gui.connection.networkFiltered.copyButton': 'Copy to clipboard',
     'gui.connection.networkFiltered.tryagainbutton': 'Try again',
-    'gui.connection.networkFiltered.useLegacyMeshButton': 'Use legacy mesh'
+    'gui.connection.networkFiltered.useLegacyMeshButton': 'Use legacy mesh',
+    'gui.stageHeader.stageSizeMiddle': 'Switch to middle stage'
 };
diff --git a/packages/scratch-gui/src/locales/ja-Hira.js b/packages/scratch-gui/src/locales/ja-Hira.js
index d3175202e23..ffc91730784 100644
--- a/packages/scratch-gui/src/locales/ja-Hira.js
+++ b/packages/scratch-gui/src/locales/ja-Hira.js
@@ -272,5 +272,6 @@ export default {
     'gui.connection.networkFiltered.copied': 'コピーしました！',
     'gui.connection.networkFiltered.copyButton': 'クリップボードにコピー',
     'gui.connection.networkFiltered.tryagainbutton': 'もういちどためす',
-    'gui.connection.networkFiltered.useLegacyMeshButton': 'じゅうらいのメッシュをつかう'
+    'gui.connection.networkFiltered.useLegacyMeshButton': 'じゅうらいのメッシュをつかう',
+    'gui.stageHeader.stageSizeMiddle': 'ちゅうサイズのステージにきりかえる'
 };
diff --git a/packages/scratch-gui/src/locales/ja.js b/packages/scratch-gui/src/locales/ja.js
index 2ec3c44e840..dfbdfb9ef2e 100644
--- a/packages/scratch-gui/src/locales/ja.js
+++ b/packages/scratch-gui/src/locales/ja.js
@@ -272,5 +272,6 @@ export default {
     'gui.connection.networkFiltered.copied': 'コピーしました！',
     'gui.connection.networkFiltered.copyButton': 'クリップボードにコピー',
     'gui.connection.networkFiltered.tryagainbutton': 'もう一度試す',
-    'gui.connection.networkFiltered.useLegacyMeshButton': '従来のメッシュを使う'
+    'gui.connection.networkFiltered.useLegacyMeshButton': '従来のメッシュを使う',
+    'gui.stageHeader.stageSizeMiddle': '中サイズのステージに切り替える'
 };