From 63a6873ce10a791ab1a0ddcff49511fe3546963a Mon Sep 17 00:00:00 2001
From: supervoidcoder <88671013+supervoidcoder@users.noreply.github.com>
Date: Fri, 7 Nov 2025 00:47:32 +0000
Subject: [PATCH 1/3] fix(playground): include compressed blocks and messages
 in horizontal compressed playground to restore toolbox/flyout

---
 README.md                                   |   7 +-
 tests/horizontal_playground_compressed.html | 498 ++++++++++++++++++++
 2 files changed, 504 insertions(+), 1 deletion(-)
 create mode 100644 tests/horizontal_playground_compressed.html
diff --git a/README.md b/README.md
index d661f86a03..5412eec673 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,12 @@ Install dependencies:
 npm ci
 ```
 
-Open tests/vertical_playground.html in a browser for development. You don't need to rebuild compressed versions for most changes. Open tests/vertical_playground_compressed.html instead to test if the compressed versions built properly.
+Open the playgrounds in a browser for development. For a local page that works without fetching Closure from node_modules, use the compressed playgrounds:
+
+- Horizontal (compressed): `tests/horizontal_playground_compressed.html`
+- Vertical (compressed): `tests/vertical_playground_compressed.html`
+
+You don't need to rebuild compressed versions for most changes. Rebuild compressed versions when you want to update the bundled artifacts.
 
 To re-build compressed versions, run:
 
diff --git a/tests/horizontal_playground_compressed.html b/tests/horizontal_playground_compressed.html
new file mode 100644
index 0000000000..d58992a7a3
--- /dev/null
+++ b/tests/horizontal_playground_compressed.html
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
+    <title>Horizontal Playground (Compressed)</title>
+
+  <!-- Use the compressed bundle so Closure/network loading is not required at runtime -->
+  <script src="../blockly_compressed_horizontal.js"></script>
+  <script src="../msg/messages.js"></script>
+  <script src="../msg/scratch_msgs.js"></script>
+  <script src="../blocks_compressed.js"></script>
+  <script src="../blocks_compressed_horizontal.js"></script>
+
+    <script>
+      'use strict';
+
+      var fakeDragStack = [];
+      var workspace = null;
+
+      function start() {
+        var soundsEnabled = null;
+        if (sessionStorage) {
+          // Restore sounds state.
+          soundsEnabled = sessionStorage.getItem('soundsEnabled');
+          if (soundsEnabled === null) {
+            soundsEnabled = true;
+          } else {
+            soundsEnabled = (soundsEnabled === 'true');
+          }
+        } else {
+          soundsEnabled = true;
+        }
+        setSoundsEnabled(soundsEnabled);
+
+        // Setup blocks
+        // Parse the URL arguments.
+        var match = location.search.match(/dir=([^&]+)/);
+        var rtl = match && match[1] == 'rtl';
+        document.forms.options.elements.dir.selectedIndex = Number(rtl);
+        var toolbox = getToolboxElement();
+        document.forms.options.elements.toolbox.selectedIndex =
+          toolbox ? 1: 0;
+
+        match = location.search.match(/side=([^&]+)/);
+
+        var side = match ? match[1] : 'start';
+
+        document.forms.options.elements.side.value = side;
+
+        workspace = Blockly.inject('blocklyDiv', {
+          comments: false,
+          disable: false,
+          collapse: false,
+          media: '../media/',
+          readOnly: false,
+          rtl: rtl,
+          scrollbars: true,
+          toolbox: toolbox,
+          trashcan: true,
+          horizontalLayout: side == 'top' || side == 'bottom',
+          toolboxPosition: side == 'top' || side == 'start' ? 'start' : 'end',
+          sounds: soundsEnabled,
+          grid: {spacing: 16,
+            length: 1,
+            colour: '#2C344A',
+            snap: false
+          },
+          zoom: {
+            controls: true,
+            wheel: true,
+            startScale: 1.0,
+            maxScale: 4,
+            minScale: 0.25,
+            scaleSpeed: 1.1
+          },
+          colours: {
+            fieldShadow: 'rgba(255, 255, 255, 0.3)',
+            dragShadowOpacity: 0.6
+          }
+        });
+        
+        if (sessionStorage) {
+          // Restore previously displayed text.
+          var text = sessionStorage.getItem('textarea');
+          if (text) {
+            document.getElementById('importExport').value = text;
+          }
+          taChange();
+
+          // Restore event logging state.
+          var state = sessionStorage.getItem('logEvents');
+          logEvents(Boolean(state));
+
+          // Restore flyout event logging state.
+          state = sessionStorage.getItem('logFlyoutEvents');
+          logFlyoutEvents(Boolean(state));
+        }
+      }
+
+      function getToolboxElement() {
+        var match = location.search.match(/toolbox=([^&]+)/);
+        return document.getElementById('toolbox-' + (match ? match[1] : 'categories'));
+      }
+
+      function toXml() {
+        var output = document.getElementById('importExport');
+        var xml = Blockly.Xml.workspaceToDom(workspace);
+        output.value = Blockly.Xml.domToPrettyText(xml);
+        output.focus();
+        output.select();
+        taChange();
+      }
+
+      function fromXml() {
+        var input = document.getElementById('importExport');
+        var xml = Blockly.Xml.textToDom(input.value);
+        Blockly.Xml.domToWorkspace(workspace, xml);
+        taChange();
+      }
+
+      // Disable the "Import from XML" button if the XML is invalid.
+      // Preserve text between page reloads.
+      function taChange() {
+        var textarea = document.getElementById('importExport');
+        if (sessionStorage) {
+          sessionStorage.setItem('textarea', textarea.value);
+        }
+        var valid = true;
+        try {
+          Blockly.Xml.textToDom(textarea.value);
+        } catch (e) {
+          valid = false;
+        }
+        document.getElementById('import').disabled = !valid;
+      }
+
+      function logEvents(state) {
+        var checkbox = document.getElementById('logCheck');
+        checkbox.checked = state;
+        if (sessionStorage) {
+          sessionStorage.setItem('logEvents', state ? 'checked' : '');
+        }
+        if (state) {
+          workspace.addChangeListener(logger);
+        } else {
+          workspace.removeChangeListener(logger);
+        }
+      }
+
+      function logFlyoutEvents(state) {
+        var checkbox = document.getElementById('logFlyoutCheck');
+        checkbox.checked = state;
+        if (sessionStorage) {
+          sessionStorage.setItem('logFlyoutEvents', state ? 'checked' : '');
+        }
+        var flyoutWorkspace = (workspace.flyout_) ? workspace.flyout_.workspace_ :
+          workspace.toolbox_.flyout_.workspace_;
+        if (state) {
+          flyoutWorkspace.addChangeListener(logger);
+        } else {
+          flyoutWorkspace.removeChangeListener(logger);
+        }
+      }
+
+      function logger(e) {
+        console.log(e);
+      }
+
+      function glowBlock() {
+        if (Blockly.selected) {
+          workspace.glowBlock(Blockly.selected.id, true);
+        }
+      }
+
+      function unglowBlock() {
+        if (Blockly.selected) {
+          workspace.glowBlock(Blockly.selected.id, false);
+        }
+      }
+
+      function glowStack() {
+        if (Blockly.selected) {
+          workspace.glowStack(Blockly.selected.id, true);
+        }
+      }
+
+      function unglowStack() {
+        if (Blockly.selected) {
+          workspace.glowStack(Blockly.selected.id, false);
+        }
+      }
+
+      function sprinkles(n) {
+        var prototypes = [];
+        var toolbox = workspace.options.languageTree;
+        if (!toolbox) {
+          console.error('Toolbox not found; add a toolbox element to the DOM.');
+          return;
+        }
+        var blocks = toolbox.getElementsByTagName('block');
+        for (var i = 0; i < n; i++) {
+          var blockXML = blocks[Math.floor(Math.random() * blocks.length)];
+          var block = Blockly.Xml.domToBlock(blockXML, workspace);
+          block.initSvg();
+          block.moveBy(
+            Math.round(Math.random() * 450 + 40),
+            Math.round(Math.random() * 600 + 40)
+          );
+        }
+      }
+
+      function spaghetti(n) {
+        var xml = spaghettiXml;
+        for(var i = 0; i < n; i++) {
+          xml = xml.replace(/(<(statement|next)( name="SUBSTACK")?>)<\//g,
+          '$1' + spaghettiXml + '</');
+        }
+        xml = '<xml xmlns="http://www.w3.org/1999/xhtml">' + xml + '</xml>';
+        var dom = Blockly.Xml.textToDom(xml);
+        console.time('Spaghetti domToWorkspace');
+        Blockly.Xml.domToWorkspace(workspace, dom);
+        console.timeEnd('Spaghetti domToWorkspace');
+      }
+
+      var spaghettiXml = [
+        '  <block type="control_repeat">',
+        '    <value name="TIMES">',
+        '      <shadow type="math_whole_number">',
+        '        <field name="NUM">10</field>',
+        '      </shadow>',
+        '    </value>',
+        '    <statement name="SUBSTACK"></statement>',
+        '    <next></next>',
+        '  </block>'
+      ].join('\n');
+
+      function setSoundsEnabled(state) {
+        var checkbox = document.getElementById('soundsEnabled');
+        checkbox.checked = (state) ? 'checked' : '';
+        if (sessionStorage) {
+          sessionStorage.setItem('soundsEnabled', state);
+        }
+      }
+      function fakeDrag(id, dx, dy, opt_workspace) {
+        var ws = opt_workspace || Blockly.getMainWorkspace();
+        var blockToDrag = ws.getBlockById(id);
+
+        if (!blockToDrag) {
+          fakeDragWrapper();
+          return;
+        }
+        var blockTop = blockToDrag.svgGroup_.getBoundingClientRect().top;
+        var blockLeft = blockToDrag.svgGroup_.getBoundingClientRect().left;
+
+        // Click somewhere on the block.
+        var mouseDownEvent = new MouseEvent('mousedown',
+            {clientX: blockLeft + 5, clientY: blockTop + 5});
+        blockToDrag.onMouseDown_(mouseDownEvent);
+
+        // Throw in a move for good measure.
+        setTimeout(
+          function() {
+            var mouseMoveEvent = new MouseEvent('mousemove',
+                {clientX: blockLeft + dx,
+                clientY: blockTop + dy});
+            blockToDrag.onMouseMove_(mouseMoveEvent);
+
+            // Drop at dx, dy.
+            setTimeout(
+              function() {
+                var mouseUpEvent = new MouseEvent('mouseup',
+                    {clientX: blockLeft + dx,
+                    clientY: blockTop + dy});
+                blockToDrag.onMouseUp_(mouseUpEvent);
+
+                setTimeout(fakeDragWrapper(), 100);
+              }, 30);
+          }, 30);
+      };
+
+      function fakeDragWrapper() {
+        var dragInfo = fakeDragStack.pop();
+        if (dragInfo) {
+          fakeDrag(dragInfo.id, dragInfo.dx, dragInfo.dy, dragInfo.workspace);
+        }
+      }
+
+      function fakeManyDrags() {
+        var blockList = workspace.getAllBlocks();
+        for (var i = 0; i < 2 * blockList.length; i++) {
+          fakeDragStack.push(
+            {
+              id: blockList[Math.round(Math.random() * (blockList.length - 1))].id,
+              // Move some blocks up and to the left, but mostly down and to the right.
+              dx: Math.round((Math.random() - 0.25) * 200),
+              dy: Math.round((Math.random() - 0.25) * 200),
+              workspace: workspace
+            });
+        }
+        fakeDragWrapper();
+      }
+    </script>
+
+    <style>
+      html, body {
+        height: 100%;
+      }
+
+      body {
+        background-color: #fff;
+        font-family: sans-serif;
+        overflow: hidden;
+      }
+
+      h1 {
+        font-weight: normal;
+        font-size: 140%;
+      }
+
+      #blocklyDiv {
+        float: right;
+        height: 95%;
+        width: 70%;
+      }
+
+      #collaborators {
+        float: right;
+        width: 30px;
+        margin-left: 10px;
+      }
+
+      #collaborators > img {
+        margin-right: 5px;
+        height: 30px;
+        padding-bottom: 5px;
+        width: 30px;
+        border-radius: 3px;
+      }
+
+      #importExport {
+        font-family: monospace;
+      }
+    </style>
+  </head>
+
+  <body onload="start()">
+    <div id="collaborators"></div>
+    <div id="blocklyDiv"></div>
+
+    <!-- Toolbox -->
+    <xml id="toolbox-categories" style="display: none">
+      <category name="Events">
+        <block type="event_whenflagclicked"></block>
+        <block type="event_whenbroadcastreceived">
+          <value name="CHOICE">
+            <shadow type="dropdown_whenbroadcast">
+              <field name="CHOICE">blue</field>
+            </shadow>
+          </value>
+        </block>
+        <block type="event_broadcast">
+          <value name="CHOICE">
+            <shadow type="dropdown_broadcast">
+              <field name="CHOICE">blue</field>
+            </shadow>
+          </value>
+        </block>
+      </category>
+      <category name="Control">
+        <block type="control_forever"></block>
+        <block type="control_repeat">
+          <value name="TIMES">
+            <shadow type="math_whole_number">
+              <field name="NUM">4</field>
+            </shadow>
+          </value>
+        </block>
+        <block type="control_stop"></block>
+        <block type="control_wait">
+          <value name="DURATION">
+            <shadow type="math_positive_number">
+              <field name="NUM">1</field>
+            </shadow>
+          </value>
+        </block>
+      </category>
+      <category name="Wedo">
+        <block type="wedo_setcolor">
+          <value name="CHOICE">
+            <shadow type="dropdown_wedo_setcolor">
+              <field name="CHOICE">mystery</field>
+            </shadow>
+          </value>
+        </block>
+        <block type="wedo_motorclockwise">
+          <value name="DURATION">
+            <shadow type="math_positive_number">
+              <field name="NUM">1</field>
+            </shadow>
+          </value>
+        </block>
+        <block type="wedo_motorcounterclockwise">
+          <value name="DURATION">
+            <shadow type="math_positive_number">
+              <field name="NUM">1</field>
+            </shadow>
+          </value>
+        </block>
+        <block type="wedo_motorspeed">
+          <value name="CHOICE">
+            <shadow type="dropdown_wedo_motorspeed">
+              <field name="CHOICE">fast</field>
+            </shadow>
+          </value>
+        </block>
+        <block type="wedo_whentilt">
+          <value name="CHOICE">
+            <shadow type="dropdown_wedo_whentilt">
+              <field name="CHOICE">forward</field>
+            </shadow>
+          </value>
+        </block>
+        <block type="wedo_whendistanceclose"></block>
+      </category>
+    </xml>
+
+
+    <!-- Sidebar -->
+    <h1>Horizontal Blocks (Compressed)</h1>
+    <p>
+      <a href="javascript:void(workspace.setVisible(true))">Show</a>
+      - <a href="javascript:void(workspace.setVisible(false))">Hide</a>
+    </p>
+
+    <form id="options">
+        <select name="dir" onchange="document.forms.options.submit()">
+          <option value="ltr">LTR</option>
+          <option value="rtl">RTL</option>
+        </select>
+        <select name="toolbox" onchange="document.forms.options.submit()">
+          <option value="categories">Categories</option>
+          <option value="simple">Simple</option>
+        </select>
+        <select name="side" onchange="document.forms.options.submit()">
+          <option value="start">Start</option>
+          <option value="end">End</option>
+          <option value="top">Top</option>
+          <option value="bottom">Bottom</option>
+        </select>
+      </form>
+
+    <p>
+      <input type="button" value="Export to XML" onclick="toXml()">
+      &nbsp;
+      <input type="button" value="Import from XML" onclick="fromXml()" id="import">
+      <br>
+      <textarea id="importExport" style="width: 26%; height: 12em"
+        onchange="taChange();" onkeyup="taChange()"></textarea>
+    </p>
+
+    <p>
+      Log events: &nbsp;
+      <input type="checkbox" onclick="logEvents(this.checked)" id="logCheck">
+    </p>
+
+    <p>
+      Log flyout events: &nbsp;
+      <input type="checkbox" onclick="logFlyoutEvents(this.checked)" id="logFlyoutCheck">
+    </p>
+
+    <p>
+      Enable sounds (after refresh): &nbsp;
+      <input type="checkbox" onclick="setSoundsEnabled(this.checked)" id="soundsEnabled">
+    </p>
+
+    <p>
+      Stress test: &nbsp;
+      <input type="button" value="Sprinkles!" onclick="sprinkles(100)">
+      <input type="button" value="Spaghetti!" onclick="spaghetti(10)">
+      <input type="button" value="Fake some drags!" onclick="fakeManyDrags()">
+    </p>
+
+    <p>
+      Glows: &nbsp;
+      <input type="button" value="Glow last clicked block" onclick="glowBlock()" />
+      <input type="button" value="Unglow last clicked block" onclick="unglowBlock()" />
+      <input type="button" value="Stack glow last clicked block" onclick="glowStack()" />
+      <input type="button" value="Stack unglow last clicked block" onclick="unglowStack()" />
+    </p>
+
+    <p>
+      <input type="button" value="Undo" onclick="workspace.undo()" />
+      <input type="button" value="Redo" onclick="workspace.undo(true)" />
+    </p>
+  </body>
+</html>

From c6ad5757b9c142b7e5af4304644bacc1673bab22 Mon Sep 17 00:00:00 2001
From: supervoidcoder <88671013+supervoidcoder@users.noreply.github.com>
Date: Thu, 6 Nov 2025 19:53:57 -0500
Subject: [PATCH 2/3] Incorrect setTimeout usage will cause immediate execution
 instead of delayed execution. The function call fakeDragWrapper() is being
 executed immediately and its return value (undefined) is passed to
 setTimeout.

Critical bug in fakeDrag timing logic. Line 278 invokes fakeDragWrapper() immediately in the setTimeout call instead of passing a function reference. This breaks the intended asynchronous drag sequence and will cause premature execution of queued drags before the current mousemove/mouseup cycle completes.

Co-authored-by: amazon-q-developer[bot] <208079219+amazon-q-developer[bot]@users.noreply.github.com>
---
 tests/horizontal_playground_compressed.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/horizontal_playground_compressed.html b/tests/horizontal_playground_compressed.html
index d58992a7a3..cb8f9ea249 100644
--- a/tests/horizontal_playground_compressed.html
+++ b/tests/horizontal_playground_compressed.html
@@ -275,7 +275,7 @@
                     clientY: blockTop + dy});
                 blockToDrag.onMouseUp_(mouseUpEvent);
 
-                setTimeout(fakeDragWrapper(), 100);
+                setTimeout(fakeDragWrapper, 100);
               }, 30);
           }, 30);
       };

From 438bbf17ebf0ddbb80a3a91b5a6989f8074c8631 Mon Sep 17 00:00:00 2001
From: supervoidcoder <88671013+supervoidcoder@users.noreply.github.com>
Date: Thu, 6 Nov 2025 19:54:18 -0500
Subject: [PATCH 3/3] Update tests/horizontal_playground_compressed.html

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 tests/horizontal_playground_compressed.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/horizontal_playground_compressed.html b/tests/horizontal_playground_compressed.html
index cb8f9ea249..f7b6f7efbb 100644
--- a/tests/horizontal_playground_compressed.html
+++ b/tests/horizontal_playground_compressed.html
@@ -238,7 +238,7 @@
 
       function setSoundsEnabled(state) {
         var checkbox = document.getElementById('soundsEnabled');
-        checkbox.checked = (state) ? 'checked' : '';
+        checkbox.checked = Boolean(state);
         if (sessionStorage) {
           sessionStorage.setItem('soundsEnabled', state);
         }
