From aab3bfcd1021995fabd36f3f603ed148067f4fb8 Mon Sep 17 00:00:00 2001
From: Akshar Patel <123344143+AksharP5@users.noreply.github.com>
Date: Tue, 1 Sep 2026 23:07:03 -0400
Subject: [PATCH] fix(registry): clear flowchart selection after click-away
 (#3262)

---
 docs/catalog/blocks/flowchart-vertical.mdx           | 12 ++----------
 docs/catalog/blocks/flowchart.mdx                    | 12 ++----------
 docs/public/catalog/blocks/flowchart-vertical.json   |  2 +-
 docs/public/catalog/blocks/flowchart.json            |  2 +-
 .../flowchart-vertical/flowchart-vertical.html       | 12 ++----------
 registry/blocks/flowchart/flowchart.html             | 12 ++----------
 6 files changed, 10 insertions(+), 42 deletions(-)

diff --git a/docs/catalog/blocks/flowchart-vertical.mdx b/docs/catalog/blocks/flowchart-vertical.mdx
index 62967bea2..bbe2c1ae2 100644
--- a/docs/catalog/blocks/flowchart-vertical.mdx
+++ b/docs/catalog/blocks/flowchart-vertical.mdx
@@ -144,6 +144,7 @@ That writes one file: `compositions/flowchart-vertical.html`.
               />
             </svg>
           </div>
+          <div class="selection-border"></div>
         </div>
         <div id="node-nocode" class="node blue" style="left: 600px; top: 960px">
           Try no-code first
@@ -335,7 +336,6 @@ That writes one file: `compositions/flowchart-vertical.html`.
         (function () {
           const tl = gsap.timeline({ paused: true });
           const S = "#flowchart-vertical";
-          const nodePython = document.querySelector(S + " #node-python");
           const pythonText = document.querySelector(S + " #python-text");
 
           // 1. Root node scales in
@@ -406,15 +406,7 @@ That writes one file: `compositions/flowchart-vertical.html`.
           tl.to(S + " #cursor", { x: -1110, y: -1560, duration: 1, ease: "power1.inOut" }, "hold3");
 
           // 10. Cursor clicks — selection border
-          tl.add(() => {
-            if (!nodePython) return;
-            if (!nodePython.querySelector(".selection-border")) {
-              const border = document.createElement("div");
-              border.className = "selection-border";
-              nodePython.appendChild(border);
-            }
-            gsap.set(S + " .selection-border", { opacity: 1 });
-          }, "hold3+=1");
+          tl.set(S + " .selection-border", { opacity: 1 }, "hold3+=1");
 
           tl.to(
             S + " #cursor",
diff --git a/docs/catalog/blocks/flowchart.mdx b/docs/catalog/blocks/flowchart.mdx
index 2af213191..88b3b333e 100644
--- a/docs/catalog/blocks/flowchart.mdx
+++ b/docs/catalog/blocks/flowchart.mdx
@@ -144,6 +144,7 @@ That writes one file: `compositions/flowchart.html`.
               />
             </svg>
           </div>
+          <div class="selection-border"></div>
         </div>
         <div id="node-nocode" class="node blue" style="left: 800px; top: 500px">
           Try no-code first
@@ -335,7 +336,6 @@ That writes one file: `compositions/flowchart.html`.
         (function () {
           const tl = gsap.timeline({ paused: true });
           const S = '[data-composition-id="flowchart"]';
-          const nodePython = document.querySelector(S + " #node-python");
           const pythonText = document.querySelector(S + " #python-text");
 
           // 1. Root node scales in
@@ -406,15 +406,7 @@ That writes one file: `compositions/flowchart.html`.
           tl.to(S + " #cursor", { x: -1470, y: -540, duration: 1, ease: "power1.inOut" }, "hold3");
 
           // 10. Cursor clicks — selection border
-          tl.add(() => {
-            if (!nodePython) return;
-            if (!nodePython.querySelector(".selection-border")) {
-              const border = document.createElement("div");
-              border.className = "selection-border";
-              nodePython.appendChild(border);
-            }
-            gsap.set(S + " .selection-border", { opacity: 1 });
-          }, "hold3+=1");
+          tl.set(S + " .selection-border", { opacity: 1 }, "hold3+=1");
 
           tl.to(
             S + " #cursor",
diff --git a/docs/public/catalog/blocks/flowchart-vertical.json b/docs/public/catalog/blocks/flowchart-vertical.json
index ad91852e6..8cdd25b5a 100644
--- a/docs/public/catalog/blocks/flowchart-vertical.json
+++ b/docs/public/catalog/blocks/flowchart-vertical.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1440, height=2560\" />\n    <title>Flowchart Vertical</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1440px;\n        height: 2560px;\n        overflow: hidden;\n        background-color: #ffffff;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"flowchart-vertical\"\n      data-composition-id=\"flowchart-vertical\"\n      data-width=\"1440\"\n      data-height=\"2560\"\n      data-start=\"0\"\n      data-duration=\"12\"\n    >\n      <div class=\"canvas\">\n        <svg class=\"connectors\" width=\"1440\" height=\"2560\" viewBox=\"0 0 1440 2560\">\n          <!-- Level 1 to 2 -->\n          <path\n            id=\"path-1-L\"\n            class=\"connector\"\n            d=\"M 720 210 L 720 360 L 440 360 L 440 530\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-1-R\"\n            class=\"connector\"\n            d=\"M 720 210 L 720 360 L 1000 360 L 1000 530\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n\n          <!-- Level 2 to 3 (Left side) -->\n          <path\n            id=\"path-2-LL\"\n            class=\"connector\"\n            d=\"M 440 590 L 440 760 L 280 760 L 280 930\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-2-LR\"\n            class=\"connector\"\n            d=\"M 440 590 L 440 760 L 600 760 L 600 930\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n\n          <!-- Level 2 to 3 (Right side) -->\n          <path\n            id=\"path-2-RL\"\n            class=\"connector\"\n            d=\"M 1000 590 L 1000 760 L 840 760 L 840 930\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-2-RR\"\n            class=\"connector\"\n            d=\"M 1000 590 L 1000 760 L 1160 760 L 1160 930\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n        </svg>\n\n        <div id=\"label-yes\" class=\"connector-label\">Yes</div>\n        <div id=\"label-not-sure\" class=\"connector-label\">Not sure</div>\n\n        <!-- Level 1 -->\n        <div id=\"node-root\" class=\"node yellow\" style=\"left: 720px; top: 180px\">\n          Should I learn to code?\n        </div>\n\n        <!-- Level 2 -->\n        <div id=\"node-yes\" class=\"node green\" style=\"left: 440px; top: 560px\">Yes</div>\n        <div id=\"node-not-sure\" class=\"node peach\" style=\"left: 1000px; top: 560px\">Not sure</div>\n\n        <!-- Level 3 -->\n        <div id=\"node-python\" class=\"node lavender\" style=\"left: 280px; top: 960px\">\n          <div style=\"position: relative; display: inline-block\">\n            <span id=\"python-text\">Start with Pythom</span>\n            <svg class=\"squiggle-container\" width=\"64\" height=\"6\" viewBox=\"0 0 64 6\">\n              <path\n                id=\"squiggle\"\n                d=\"M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3\"\n                fill=\"none\"\n                stroke=\"#E53935\"\n                stroke-width=\"2\"\n              />\n            </svg>\n          </div>\n        </div>\n        <div id=\"node-nocode\" class=\"node blue\" style=\"left: 600px; top: 960px\">\n          Try no-code first\n        </div>\n        <div id=\"node-website\" class=\"node pink\" style=\"left: 840px; top: 960px\">\n          Build a personal website\n        </div>\n        <div id=\"node-course\" class=\"node yellow\" style=\"left: 1160px; top: 960px\">\n          Take a free intro course\n        </div>\n\n        <!-- Cursor -->\n        <div id=\"cursor\" class=\"cursor-container\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z\"\n              fill=\"white\"\n              stroke=\"black\"\n            />\n          </svg>\n          <div class=\"cursor-tag\">You</div>\n        </div>\n\n        <!-- Emoji -->\n        <div id=\"emoji-thumb\" class=\"emoji\">👍</div>\n\n        <!-- Overlay -->\n        <div id=\"fade-overlay\"></div>\n      </div>\n\n      <style>\n        #flowchart-vertical {\n          width: 1440px;\n          height: 2560px;\n          background-color: #ffffff;\n          background-image: radial-gradient(#e5e5e5 1px, transparent 1px);\n          background-size: 20px 20px;\n          position: absolute;\n          overflow: hidden;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        #flowchart-vertical .canvas {\n          width: 100%;\n          height: 100%;\n          position: absolute;\n          transform: none;\n          transform-origin: 720px 640px;\n        }\n\n        #flowchart-vertical .node {\n          position: absolute;\n          transform: translate(-50%, -50%) scale(0);\n          padding: 16px 24px;\n          border-radius: 12px;\n          font-size: 18px;\n          font-weight: 500;\n          color: #333;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n          white-space: nowrap;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          z-index: 10;\n        }\n\n        #flowchart-vertical .node.yellow {\n          background-color: #e8d44d;\n        }\n        #flowchart-vertical .node.green {\n          background-color: #c2e8a0;\n        }\n        #flowchart-vertical .node.peach {\n          background-color: #f5c5a3;\n        }\n        #flowchart-vertical .node.lavender {\n          background-color: #d4c5f9;\n        }\n        #flowchart-vertical .node.blue {\n          background-color: #a8d8f0;\n        }\n        #flowchart-vertical .node.pink {\n          background-color: #f8b4c8;\n        }\n\n        #flowchart-vertical .connectors {\n          position: absolute;\n          top: 0;\n          left: 0;\n          z-index: 5;\n          pointer-events: none;\n        }\n\n        #flowchart-vertical .connector {\n          stroke-dasharray: 1000;\n          stroke-dashoffset: 1000;\n        }\n\n        #flowchart-vertical .connector-label {\n          position: absolute;\n          font-size: 14px;\n          font-weight: 600;\n          color: #333;\n          background: white;\n          padding: 2px 6px;\n          border-radius: 4px;\n          opacity: 0;\n          z-index: 6;\n          transform: translate(-50%, -50%);\n        }\n\n        #flowchart-vertical #label-yes {\n          left: 580px;\n          top: 420px;\n        }\n        #flowchart-vertical #label-not-sure {\n          left: 860px;\n          top: 420px;\n        }\n\n        #flowchart-vertical .cursor-container {\n          position: absolute;\n          left: 1440px;\n          top: 2560px;\n          z-index: 100;\n          pointer-events: none;\n          display: flex;\n          align-items: flex-start;\n        }\n\n        #flowchart-vertical .cursor-tag {\n          background-color: #9747ff;\n          color: white;\n          padding: 2px 8px;\n          border-radius: 4px;\n          font-size: 12px;\n          font-weight: 600;\n          margin-left: 4px;\n          margin-top: 12px;\n        }\n\n        #flowchart-vertical .squiggle-container {\n          position: absolute;\n          right: 0;\n          bottom: -4px;\n          opacity: 0;\n        }\n\n        #flowchart-vertical .emoji {\n          position: absolute;\n          font-size: 32px;\n          left: 390px;\n          top: 960px;\n          transform: translate(-50%, -50%) scale(0);\n          z-index: 20;\n        }\n\n        #flowchart-vertical #fade-overlay {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-color: white;\n          opacity: 0;\n          z-index: 1000;\n          pointer-events: none;\n        }\n\n        #flowchart-vertical .selection-border {\n          position: absolute;\n          top: -4px;\n          left: -4px;\n          right: -4px;\n          bottom: -4px;\n          border: 2px solid #0b84f3;\n          border-radius: 16px;\n          pointer-events: none;\n          opacity: 0;\n        }\n\n        #flowchart-vertical .text-highlight {\n          background-color: #d0e4ff;\n        }\n      </style>\n\n      <script>\n        (function () {\n          const tl = gsap.timeline({ paused: true });\n          const S = \"#flowchart-vertical\";\n          const nodePython = document.querySelector(S + \" #node-python\");\n          const pythonText = document.querySelector(S + \" #python-text\");\n\n          // 1. Root node scales in\n          tl.to(S + \" #node-root\", { scale: 1, duration: 0.4, ease: \"power2.out\" });\n\n          // 2. Hold\n          tl.addLabel(\"hold1\", \"+=0.6\");\n\n          // 3. Connectors draw\n          tl.to(\n            S + \" .connector#path-1-L, \" + S + \" .connector#path-1-R\",\n            { strokeDashoffset: 0, duration: 0.5, ease: \"none\" },\n            \"hold1\",\n          );\n\n          tl.to(\n            S + \" #label-yes, \" + S + \" #label-not-sure\",\n            { opacity: 1, duration: 0.2 },\n            \"hold1+=0.25\",\n          );\n\n          // 4. Level 2 nodes\n          tl.to(S + \" #node-yes\", { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" }, \"hold1+=0.4\");\n          tl.to(\n            S + \" #node-not-sure\",\n            { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" },\n            \"hold1+=0.6\",\n          );\n\n          // 5. Hold\n          tl.addLabel(\"hold2\", \"+=0.5\");\n\n          // 6. Level 2→3 connectors\n          tl.to(\n            S +\n              \" .connector#path-2-LL, \" +\n              S +\n              \" .connector#path-2-LR, \" +\n              S +\n              \" .connector#path-2-RL, \" +\n              S +\n              \" .connector#path-2-RR\",\n            { strokeDashoffset: 0, duration: 0.4, ease: \"none\" },\n            \"hold2\",\n          );\n\n          // 7. Leaf nodes\n          const leafNodes = [\n            S + \" #node-python\",\n            S + \" #node-nocode\",\n            S + \" #node-website\",\n            S + \" #node-course\",\n          ];\n          leafNodes.forEach((id, i) => {\n            tl.to(\n              id,\n              { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" },\n              `hold2+=${0.3 + i * 0.15}`,\n            );\n          });\n\n          tl.to(S + \" .squiggle-container\", { opacity: 1, duration: 0.1 }, \"hold2+=0.3\");\n\n          // 8. Hold\n          tl.addLabel(\"hold3\", \"+=0.8\");\n\n          // 9. Cursor drifts in\n          tl.to(S + \" #cursor\", { x: -1110, y: -1560, duration: 1, ease: \"power1.inOut\" }, \"hold3\");\n\n          // 10. Cursor clicks — selection border\n          tl.add(() => {\n            if (!nodePython) return;\n            if (!nodePython.querySelector(\".selection-border\")) {\n              const border = document.createElement(\"div\");\n              border.className = \"selection-border\";\n              nodePython.appendChild(border);\n            }\n            gsap.set(S + \" .selection-border\", { opacity: 1 });\n          }, \"hold3+=1\");\n\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: \"auto\" },\n            \"hold3+=1\",\n          );\n\n          // 11. Hold\n          tl.addLabel(\"hold4\", \"+=0.3\");\n\n          // 12. Double-click to highlight \"Pythom\"\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: \"auto\" },\n            \"hold4\",\n          );\n          tl.add(() => {\n            if (!pythonText) return;\n            pythonText.innerHTML = 'Start with <span class=\"text-highlight\">Pythom</span>';\n          }, \"hold4+=0.1\");\n\n          // 13. Hold\n          tl.addLabel(\"hold5\", \"+=0.2\");\n\n          // 14. Type correction: \"Pythom\" → \"Python\"\n          const typingStart = tl.labels[\"hold5\"];\n          const words = [\"P\", \"Py\", \"Pyt\", \"Pyth\", \"Pytho\", \"Python\"];\n          words.forEach((word, i) => {\n            tl.add(\n              () => {\n                if (pythonText)\n                  pythonText.innerHTML = `Start with <span class=\"text-highlight\">${word}</span>`;\n              },\n              typingStart + i * 0.05,\n            );\n          });\n\n          const typingEnd = typingStart + words.length * 0.05;\n          tl.add(() => {\n            if (pythonText) pythonText.innerHTML = \"Start with Python\";\n            gsap.set(S + \" .squiggle-container\", { opacity: 0 });\n          }, typingEnd);\n\n          // 15. Hold\n          tl.addLabel(\"hold6\", typingEnd + 0.5);\n\n          // 16. Cursor clicks away to deselect\n          tl.to(S + \" #cursor\", { x: -1050, y: -1520, duration: 0.3, overwrite: \"auto\" }, \"hold6\");\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: \"auto\" },\n            \"hold6+=0.3\",\n          );\n          tl.to(S + \" .selection-border\", { opacity: 0, duration: 0.1 }, \"hold6+=0.3\");\n\n          // 17. Emoji pop\n          tl.to(\n            S + \" #emoji-thumb\",\n            { scale: 1, duration: 0.15, ease: \"back.out(2)\" },\n            \"hold6+=0.4\",\n          );\n\n          // 18. Hold\n          tl.addLabel(\"hold7\", \"+=2\");\n\n          // 19. Fade out\n          tl.to(S + \" #fade-overlay\", { opacity: 1, duration: 0.5 }, \"hold7\");\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"flowchart-vertical\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1440, height=2560\" />\n    <title>Flowchart Vertical</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1440px;\n        height: 2560px;\n        overflow: hidden;\n        background-color: #ffffff;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"flowchart-vertical\"\n      data-composition-id=\"flowchart-vertical\"\n      data-width=\"1440\"\n      data-height=\"2560\"\n      data-start=\"0\"\n      data-duration=\"12\"\n    >\n      <div class=\"canvas\">\n        <svg class=\"connectors\" width=\"1440\" height=\"2560\" viewBox=\"0 0 1440 2560\">\n          <!-- Level 1 to 2 -->\n          <path\n            id=\"path-1-L\"\n            class=\"connector\"\n            d=\"M 720 210 L 720 360 L 440 360 L 440 530\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-1-R\"\n            class=\"connector\"\n            d=\"M 720 210 L 720 360 L 1000 360 L 1000 530\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n\n          <!-- Level 2 to 3 (Left side) -->\n          <path\n            id=\"path-2-LL\"\n            class=\"connector\"\n            d=\"M 440 590 L 440 760 L 280 760 L 280 930\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-2-LR\"\n            class=\"connector\"\n            d=\"M 440 590 L 440 760 L 600 760 L 600 930\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n\n          <!-- Level 2 to 3 (Right side) -->\n          <path\n            id=\"path-2-RL\"\n            class=\"connector\"\n            d=\"M 1000 590 L 1000 760 L 840 760 L 840 930\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-2-RR\"\n            class=\"connector\"\n            d=\"M 1000 590 L 1000 760 L 1160 760 L 1160 930\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n        </svg>\n\n        <div id=\"label-yes\" class=\"connector-label\">Yes</div>\n        <div id=\"label-not-sure\" class=\"connector-label\">Not sure</div>\n\n        <!-- Level 1 -->\n        <div id=\"node-root\" class=\"node yellow\" style=\"left: 720px; top: 180px\">\n          Should I learn to code?\n        </div>\n\n        <!-- Level 2 -->\n        <div id=\"node-yes\" class=\"node green\" style=\"left: 440px; top: 560px\">Yes</div>\n        <div id=\"node-not-sure\" class=\"node peach\" style=\"left: 1000px; top: 560px\">Not sure</div>\n\n        <!-- Level 3 -->\n        <div id=\"node-python\" class=\"node lavender\" style=\"left: 280px; top: 960px\">\n          <div style=\"position: relative; display: inline-block\">\n            <span id=\"python-text\">Start with Pythom</span>\n            <svg class=\"squiggle-container\" width=\"64\" height=\"6\" viewBox=\"0 0 64 6\">\n              <path\n                id=\"squiggle\"\n                d=\"M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3\"\n                fill=\"none\"\n                stroke=\"#E53935\"\n                stroke-width=\"2\"\n              />\n            </svg>\n          </div>\n          <div class=\"selection-border\"></div>\n        </div>\n        <div id=\"node-nocode\" class=\"node blue\" style=\"left: 600px; top: 960px\">\n          Try no-code first\n        </div>\n        <div id=\"node-website\" class=\"node pink\" style=\"left: 840px; top: 960px\">\n          Build a personal website\n        </div>\n        <div id=\"node-course\" class=\"node yellow\" style=\"left: 1160px; top: 960px\">\n          Take a free intro course\n        </div>\n\n        <!-- Cursor -->\n        <div id=\"cursor\" class=\"cursor-container\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z\"\n              fill=\"white\"\n              stroke=\"black\"\n            />\n          </svg>\n          <div class=\"cursor-tag\">You</div>\n        </div>\n\n        <!-- Emoji -->\n        <div id=\"emoji-thumb\" class=\"emoji\">👍</div>\n\n        <!-- Overlay -->\n        <div id=\"fade-overlay\"></div>\n      </div>\n\n      <style>\n        #flowchart-vertical {\n          width: 1440px;\n          height: 2560px;\n          background-color: #ffffff;\n          background-image: radial-gradient(#e5e5e5 1px, transparent 1px);\n          background-size: 20px 20px;\n          position: absolute;\n          overflow: hidden;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        #flowchart-vertical .canvas {\n          width: 100%;\n          height: 100%;\n          position: absolute;\n          transform: none;\n          transform-origin: 720px 640px;\n        }\n\n        #flowchart-vertical .node {\n          position: absolute;\n          transform: translate(-50%, -50%) scale(0);\n          padding: 16px 24px;\n          border-radius: 12px;\n          font-size: 18px;\n          font-weight: 500;\n          color: #333;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n          white-space: nowrap;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          z-index: 10;\n        }\n\n        #flowchart-vertical .node.yellow {\n          background-color: #e8d44d;\n        }\n        #flowchart-vertical .node.green {\n          background-color: #c2e8a0;\n        }\n        #flowchart-vertical .node.peach {\n          background-color: #f5c5a3;\n        }\n        #flowchart-vertical .node.lavender {\n          background-color: #d4c5f9;\n        }\n        #flowchart-vertical .node.blue {\n          background-color: #a8d8f0;\n        }\n        #flowchart-vertical .node.pink {\n          background-color: #f8b4c8;\n        }\n\n        #flowchart-vertical .connectors {\n          position: absolute;\n          top: 0;\n          left: 0;\n          z-index: 5;\n          pointer-events: none;\n        }\n\n        #flowchart-vertical .connector {\n          stroke-dasharray: 1000;\n          stroke-dashoffset: 1000;\n        }\n\n        #flowchart-vertical .connector-label {\n          position: absolute;\n          font-size: 14px;\n          font-weight: 600;\n          color: #333;\n          background: white;\n          padding: 2px 6px;\n          border-radius: 4px;\n          opacity: 0;\n          z-index: 6;\n          transform: translate(-50%, -50%);\n        }\n\n        #flowchart-vertical #label-yes {\n          left: 580px;\n          top: 420px;\n        }\n        #flowchart-vertical #label-not-sure {\n          left: 860px;\n          top: 420px;\n        }\n\n        #flowchart-vertical .cursor-container {\n          position: absolute;\n          left: 1440px;\n          top: 2560px;\n          z-index: 100;\n          pointer-events: none;\n          display: flex;\n          align-items: flex-start;\n        }\n\n        #flowchart-vertical .cursor-tag {\n          background-color: #9747ff;\n          color: white;\n          padding: 2px 8px;\n          border-radius: 4px;\n          font-size: 12px;\n          font-weight: 600;\n          margin-left: 4px;\n          margin-top: 12px;\n        }\n\n        #flowchart-vertical .squiggle-container {\n          position: absolute;\n          right: 0;\n          bottom: -4px;\n          opacity: 0;\n        }\n\n        #flowchart-vertical .emoji {\n          position: absolute;\n          font-size: 32px;\n          left: 390px;\n          top: 960px;\n          transform: translate(-50%, -50%) scale(0);\n          z-index: 20;\n        }\n\n        #flowchart-vertical #fade-overlay {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-color: white;\n          opacity: 0;\n          z-index: 1000;\n          pointer-events: none;\n        }\n\n        #flowchart-vertical .selection-border {\n          position: absolute;\n          top: -4px;\n          left: -4px;\n          right: -4px;\n          bottom: -4px;\n          border: 2px solid #0b84f3;\n          border-radius: 16px;\n          pointer-events: none;\n          opacity: 0;\n        }\n\n        #flowchart-vertical .text-highlight {\n          background-color: #d0e4ff;\n        }\n      </style>\n\n      <script>\n        (function () {\n          const tl = gsap.timeline({ paused: true });\n          const S = \"#flowchart-vertical\";\n          const pythonText = document.querySelector(S + \" #python-text\");\n\n          // 1. Root node scales in\n          tl.to(S + \" #node-root\", { scale: 1, duration: 0.4, ease: \"power2.out\" });\n\n          // 2. Hold\n          tl.addLabel(\"hold1\", \"+=0.6\");\n\n          // 3. Connectors draw\n          tl.to(\n            S + \" .connector#path-1-L, \" + S + \" .connector#path-1-R\",\n            { strokeDashoffset: 0, duration: 0.5, ease: \"none\" },\n            \"hold1\",\n          );\n\n          tl.to(\n            S + \" #label-yes, \" + S + \" #label-not-sure\",\n            { opacity: 1, duration: 0.2 },\n            \"hold1+=0.25\",\n          );\n\n          // 4. Level 2 nodes\n          tl.to(S + \" #node-yes\", { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" }, \"hold1+=0.4\");\n          tl.to(\n            S + \" #node-not-sure\",\n            { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" },\n            \"hold1+=0.6\",\n          );\n\n          // 5. Hold\n          tl.addLabel(\"hold2\", \"+=0.5\");\n\n          // 6. Level 2→3 connectors\n          tl.to(\n            S +\n              \" .connector#path-2-LL, \" +\n              S +\n              \" .connector#path-2-LR, \" +\n              S +\n              \" .connector#path-2-RL, \" +\n              S +\n              \" .connector#path-2-RR\",\n            { strokeDashoffset: 0, duration: 0.4, ease: \"none\" },\n            \"hold2\",\n          );\n\n          // 7. Leaf nodes\n          const leafNodes = [\n            S + \" #node-python\",\n            S + \" #node-nocode\",\n            S + \" #node-website\",\n            S + \" #node-course\",\n          ];\n          leafNodes.forEach((id, i) => {\n            tl.to(\n              id,\n              { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" },\n              `hold2+=${0.3 + i * 0.15}`,\n            );\n          });\n\n          tl.to(S + \" .squiggle-container\", { opacity: 1, duration: 0.1 }, \"hold2+=0.3\");\n\n          // 8. Hold\n          tl.addLabel(\"hold3\", \"+=0.8\");\n\n          // 9. Cursor drifts in\n          tl.to(S + \" #cursor\", { x: -1110, y: -1560, duration: 1, ease: \"power1.inOut\" }, \"hold3\");\n\n          // 10. Cursor clicks — selection border\n          tl.set(S + \" .selection-border\", { opacity: 1 }, \"hold3+=1\");\n\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: \"auto\" },\n            \"hold3+=1\",\n          );\n\n          // 11. Hold\n          tl.addLabel(\"hold4\", \"+=0.3\");\n\n          // 12. Double-click to highlight \"Pythom\"\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: \"auto\" },\n            \"hold4\",\n          );\n          tl.add(() => {\n            if (!pythonText) return;\n            pythonText.innerHTML = 'Start with <span class=\"text-highlight\">Pythom</span>';\n          }, \"hold4+=0.1\");\n\n          // 13. Hold\n          tl.addLabel(\"hold5\", \"+=0.2\");\n\n          // 14. Type correction: \"Pythom\" → \"Python\"\n          const typingStart = tl.labels[\"hold5\"];\n          const words = [\"P\", \"Py\", \"Pyt\", \"Pyth\", \"Pytho\", \"Python\"];\n          words.forEach((word, i) => {\n            tl.add(\n              () => {\n                if (pythonText)\n                  pythonText.innerHTML = `Start with <span class=\"text-highlight\">${word}</span>`;\n              },\n              typingStart + i * 0.05,\n            );\n          });\n\n          const typingEnd = typingStart + words.length * 0.05;\n          tl.add(() => {\n            if (pythonText) pythonText.innerHTML = \"Start with Python\";\n            gsap.set(S + \" .squiggle-container\", { opacity: 0 });\n          }, typingEnd);\n\n          // 15. Hold\n          tl.addLabel(\"hold6\", typingEnd + 0.5);\n\n          // 16. Cursor clicks away to deselect\n          tl.to(S + \" #cursor\", { x: -1050, y: -1520, duration: 0.3, overwrite: \"auto\" }, \"hold6\");\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: \"auto\" },\n            \"hold6+=0.3\",\n          );\n          tl.to(S + \" .selection-border\", { opacity: 0, duration: 0.1 }, \"hold6+=0.3\");\n\n          // 17. Emoji pop\n          tl.to(\n            S + \" #emoji-thumb\",\n            { scale: 1, duration: 0.15, ease: \"back.out(2)\" },\n            \"hold6+=0.4\",\n          );\n\n          // 18. Hold\n          tl.addLabel(\"hold7\", \"+=2\");\n\n          // 19. Fade out\n          tl.to(S + \" #fade-overlay\", { opacity: 1, duration: 0.5 }, \"hold7\");\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"flowchart-vertical\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/flowchart.json b/docs/public/catalog/blocks/flowchart.json
index 9ca0b524e..ba2a0bbe8 100644
--- a/docs/public/catalog/blocks/flowchart.json
+++ b/docs/public/catalog/blocks/flowchart.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Flowchart</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background-color: #ffffff;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"flowchart\"\n      data-composition-id=\"flowchart\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"12\"\n    >\n      <div class=\"canvas\">\n        <svg class=\"connectors\" width=\"1920\" height=\"1080\" viewBox=\"0 0 1920 1080\">\n          <!-- Level 1 to 2 -->\n          <path\n            id=\"path-1-L\"\n            class=\"connector\"\n            d=\"M 960 130 L 960 200 L 600 200 L 600 270\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-1-R\"\n            class=\"connector\"\n            d=\"M 960 130 L 960 200 L 1320 200 L 1320 270\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n\n          <!-- Level 2 to 3 (Left side) -->\n          <path\n            id=\"path-2-LL\"\n            class=\"connector\"\n            d=\"M 600 330 L 600 400 L 400 400 L 400 470\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-2-LR\"\n            class=\"connector\"\n            d=\"M 600 330 L 600 400 L 800 400 L 800 470\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n\n          <!-- Level 2 to 3 (Right side) -->\n          <path\n            id=\"path-2-RL\"\n            class=\"connector\"\n            d=\"M 1320 330 L 1320 400 L 1120 400 L 1120 470\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-2-RR\"\n            class=\"connector\"\n            d=\"M 1320 330 L 1320 400 L 1520 400 L 1520 470\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n        </svg>\n\n        <div id=\"label-yes\" class=\"connector-label\">Yes</div>\n        <div id=\"label-not-sure\" class=\"connector-label\">Not sure</div>\n\n        <!-- Level 1 -->\n        <div id=\"node-root\" class=\"node yellow\" style=\"left: 960px; top: 100px\">\n          Should I learn to code?\n        </div>\n\n        <!-- Level 2 -->\n        <div id=\"node-yes\" class=\"node green\" style=\"left: 600px; top: 300px\">Yes</div>\n        <div id=\"node-not-sure\" class=\"node peach\" style=\"left: 1320px; top: 300px\">Not sure</div>\n\n        <!-- Level 3 -->\n        <div id=\"node-python\" class=\"node lavender\" style=\"left: 400px; top: 500px\">\n          <div style=\"position: relative; display: inline-block\">\n            <span id=\"python-text\">Start with Pythom</span>\n            <svg class=\"squiggle-container\" width=\"64\" height=\"6\" viewBox=\"0 0 64 6\">\n              <path\n                id=\"squiggle\"\n                d=\"M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3\"\n                fill=\"none\"\n                stroke=\"#E53935\"\n                stroke-width=\"2\"\n              />\n            </svg>\n          </div>\n        </div>\n        <div id=\"node-nocode\" class=\"node blue\" style=\"left: 800px; top: 500px\">\n          Try no-code first\n        </div>\n        <div id=\"node-website\" class=\"node pink\" style=\"left: 1120px; top: 500px\">\n          Build a personal website\n        </div>\n        <div id=\"node-course\" class=\"node yellow\" style=\"left: 1520px; top: 500px\">\n          Take a free intro course\n        </div>\n\n        <!-- Cursor -->\n        <div id=\"cursor\" class=\"cursor-container\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z\"\n              fill=\"white\"\n              stroke=\"black\"\n            />\n          </svg>\n          <div class=\"cursor-tag\">You</div>\n        </div>\n\n        <!-- Emoji -->\n        <div id=\"emoji-thumb\" class=\"emoji\">👍</div>\n\n        <!-- Overlay -->\n        <div id=\"fade-overlay\"></div>\n      </div>\n\n      <style>\n        [data-composition-id=\"flowchart\"] {\n          width: 1920px;\n          height: 1080px;\n          background-color: #ffffff;\n          background-image: radial-gradient(#e5e5e5 1px, transparent 1px);\n          background-size: 20px 20px;\n          position: absolute;\n          overflow: hidden;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"flowchart\"] .canvas {\n          width: 100%;\n          height: 100%;\n          position: absolute;\n          transform: scale(1.2);\n          transform-origin: 960px 300px;\n        }\n\n        [data-composition-id=\"flowchart\"] .node {\n          position: absolute;\n          transform: translate(-50%, -50%) scale(0);\n          padding: 16px 24px;\n          border-radius: 12px;\n          font-size: 18px;\n          font-weight: 500;\n          color: #333;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n          white-space: nowrap;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          z-index: 10;\n        }\n\n        [data-composition-id=\"flowchart\"] .node.yellow {\n          background-color: #e8d44d;\n        }\n        [data-composition-id=\"flowchart\"] .node.green {\n          background-color: #c2e8a0;\n        }\n        [data-composition-id=\"flowchart\"] .node.peach {\n          background-color: #f5c5a3;\n        }\n        [data-composition-id=\"flowchart\"] .node.lavender {\n          background-color: #d4c5f9;\n        }\n        [data-composition-id=\"flowchart\"] .node.blue {\n          background-color: #a8d8f0;\n        }\n        [data-composition-id=\"flowchart\"] .node.pink {\n          background-color: #f8b4c8;\n        }\n\n        [data-composition-id=\"flowchart\"] .connectors {\n          position: absolute;\n          top: 0;\n          left: 0;\n          z-index: 5;\n          pointer-events: none;\n        }\n\n        [data-composition-id=\"flowchart\"] .connector {\n          stroke-dasharray: 1000;\n          stroke-dashoffset: 1000;\n        }\n\n        [data-composition-id=\"flowchart\"] .connector-label {\n          position: absolute;\n          font-size: 14px;\n          font-weight: 600;\n          color: #333;\n          background: white;\n          padding: 2px 6px;\n          border-radius: 4px;\n          opacity: 0;\n          z-index: 6;\n          transform: translate(-50%, -50%);\n        }\n\n        [data-composition-id=\"flowchart\"] #label-yes {\n          left: 780px;\n          top: 230px;\n        }\n        [data-composition-id=\"flowchart\"] #label-not-sure {\n          left: 1140px;\n          top: 230px;\n        }\n\n        [data-composition-id=\"flowchart\"] .cursor-container {\n          position: absolute;\n          left: 1920px;\n          top: 1080px;\n          z-index: 100;\n          pointer-events: none;\n          display: flex;\n          align-items: flex-start;\n        }\n\n        [data-composition-id=\"flowchart\"] .cursor-tag {\n          background-color: #9747ff;\n          color: white;\n          padding: 2px 8px;\n          border-radius: 4px;\n          font-size: 12px;\n          font-weight: 600;\n          margin-left: 4px;\n          margin-top: 12px;\n        }\n\n        [data-composition-id=\"flowchart\"] .squiggle-container {\n          position: absolute;\n          right: 0;\n          bottom: -4px;\n          opacity: 0;\n        }\n\n        [data-composition-id=\"flowchart\"] .emoji {\n          position: absolute;\n          font-size: 32px;\n          left: 510px;\n          top: 500px;\n          transform: translate(-50%, -50%) scale(0);\n          z-index: 20;\n        }\n\n        [data-composition-id=\"flowchart\"] #fade-overlay {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-color: white;\n          opacity: 0;\n          z-index: 1000;\n          pointer-events: none;\n        }\n\n        [data-composition-id=\"flowchart\"] .selection-border {\n          position: absolute;\n          top: -4px;\n          left: -4px;\n          right: -4px;\n          bottom: -4px;\n          border: 2px solid #0b84f3;\n          border-radius: 16px;\n          pointer-events: none;\n          opacity: 0;\n        }\n\n        [data-composition-id=\"flowchart\"] .text-highlight {\n          background-color: #d0e4ff;\n        }\n      </style>\n\n      <script>\n        (function () {\n          const tl = gsap.timeline({ paused: true });\n          const S = '[data-composition-id=\"flowchart\"]';\n          const nodePython = document.querySelector(S + \" #node-python\");\n          const pythonText = document.querySelector(S + \" #python-text\");\n\n          // 1. Root node scales in\n          tl.to(S + \" #node-root\", { scale: 1, duration: 0.4, ease: \"power2.out\" });\n\n          // 2. Hold\n          tl.addLabel(\"hold1\", \"+=0.6\");\n\n          // 3. Connectors draw\n          tl.to(\n            S + \" .connector#path-1-L, \" + S + \" .connector#path-1-R\",\n            { strokeDashoffset: 0, duration: 0.5, ease: \"none\" },\n            \"hold1\",\n          );\n\n          tl.to(\n            S + \" #label-yes, \" + S + \" #label-not-sure\",\n            { opacity: 1, duration: 0.2 },\n            \"hold1+=0.25\",\n          );\n\n          // 4. Level 2 nodes\n          tl.to(S + \" #node-yes\", { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" }, \"hold1+=0.4\");\n          tl.to(\n            S + \" #node-not-sure\",\n            { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" },\n            \"hold1+=0.6\",\n          );\n\n          // 5. Hold\n          tl.addLabel(\"hold2\", \"+=0.5\");\n\n          // 6. Level 2→3 connectors\n          tl.to(\n            S +\n              \" .connector#path-2-LL, \" +\n              S +\n              \" .connector#path-2-LR, \" +\n              S +\n              \" .connector#path-2-RL, \" +\n              S +\n              \" .connector#path-2-RR\",\n            { strokeDashoffset: 0, duration: 0.4, ease: \"none\" },\n            \"hold2\",\n          );\n\n          // 7. Leaf nodes\n          const leafNodes = [\n            S + \" #node-python\",\n            S + \" #node-nocode\",\n            S + \" #node-website\",\n            S + \" #node-course\",\n          ];\n          leafNodes.forEach((id, i) => {\n            tl.to(\n              id,\n              { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" },\n              `hold2+=${0.3 + i * 0.15}`,\n            );\n          });\n\n          tl.to(S + \" .squiggle-container\", { opacity: 1, duration: 0.1 }, \"hold2+=0.3\");\n\n          // 8. Hold\n          tl.addLabel(\"hold3\", \"+=0.8\");\n\n          // 9. Cursor drifts in\n          tl.to(S + \" #cursor\", { x: -1470, y: -540, duration: 1, ease: \"power1.inOut\" }, \"hold3\");\n\n          // 10. Cursor clicks — selection border\n          tl.add(() => {\n            if (!nodePython) return;\n            if (!nodePython.querySelector(\".selection-border\")) {\n              const border = document.createElement(\"div\");\n              border.className = \"selection-border\";\n              nodePython.appendChild(border);\n            }\n            gsap.set(S + \" .selection-border\", { opacity: 1 });\n          }, \"hold3+=1\");\n\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: \"auto\" },\n            \"hold3+=1\",\n          );\n\n          // 11. Hold\n          tl.addLabel(\"hold4\", \"+=0.3\");\n\n          // 12. Double-click to highlight \"Pythom\"\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: \"auto\" },\n            \"hold4\",\n          );\n          tl.add(() => {\n            if (!pythonText) return;\n            pythonText.innerHTML = 'Start with <span class=\"text-highlight\">Pythom</span>';\n          }, \"hold4+=0.1\");\n\n          // 13. Hold\n          tl.addLabel(\"hold5\", \"+=0.2\");\n\n          // 14. Type correction: \"Pythom\" → \"Python\"\n          const typingStart = tl.labels[\"hold5\"];\n          const words = [\"P\", \"Py\", \"Pyt\", \"Pyth\", \"Pytho\", \"Python\"];\n          words.forEach((word, i) => {\n            tl.add(\n              () => {\n                if (pythonText)\n                  pythonText.innerHTML = `Start with <span class=\"text-highlight\">${word}</span>`;\n              },\n              typingStart + i * 0.05,\n            );\n          });\n\n          const typingEnd = typingStart + words.length * 0.05;\n          tl.add(() => {\n            if (pythonText) pythonText.innerHTML = \"Start with Python\";\n            gsap.set(S + \" .squiggle-container\", { opacity: 0 });\n          }, typingEnd);\n\n          // 15. Hold\n          tl.addLabel(\"hold6\", typingEnd + 0.5);\n\n          // 16. Cursor clicks away to deselect\n          tl.to(S + \" #cursor\", { x: -1420, y: -500, duration: 0.3, overwrite: \"auto\" }, \"hold6\");\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: \"auto\" },\n            \"hold6+=0.3\",\n          );\n          tl.to(S + \" .selection-border\", { opacity: 0, duration: 0.1 }, \"hold6+=0.3\");\n\n          // 17. Emoji pop\n          tl.to(\n            S + \" #emoji-thumb\",\n            { scale: 1, duration: 0.15, ease: \"back.out(2)\" },\n            \"hold6+=0.4\",\n          );\n\n          // 18. Hold\n          tl.addLabel(\"hold7\", \"+=2\");\n\n          // 19. Fade out\n          tl.to(S + \" #fade-overlay\", { opacity: 1, duration: 0.5 }, \"hold7\");\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"flowchart\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Flowchart</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background-color: #ffffff;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"flowchart\"\n      data-composition-id=\"flowchart\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"12\"\n    >\n      <div class=\"canvas\">\n        <svg class=\"connectors\" width=\"1920\" height=\"1080\" viewBox=\"0 0 1920 1080\">\n          <!-- Level 1 to 2 -->\n          <path\n            id=\"path-1-L\"\n            class=\"connector\"\n            d=\"M 960 130 L 960 200 L 600 200 L 600 270\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-1-R\"\n            class=\"connector\"\n            d=\"M 960 130 L 960 200 L 1320 200 L 1320 270\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n\n          <!-- Level 2 to 3 (Left side) -->\n          <path\n            id=\"path-2-LL\"\n            class=\"connector\"\n            d=\"M 600 330 L 600 400 L 400 400 L 400 470\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-2-LR\"\n            class=\"connector\"\n            d=\"M 600 330 L 600 400 L 800 400 L 800 470\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n\n          <!-- Level 2 to 3 (Right side) -->\n          <path\n            id=\"path-2-RL\"\n            class=\"connector\"\n            d=\"M 1320 330 L 1320 400 L 1120 400 L 1120 470\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-2-RR\"\n            class=\"connector\"\n            d=\"M 1320 330 L 1320 400 L 1520 400 L 1520 470\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n        </svg>\n\n        <div id=\"label-yes\" class=\"connector-label\">Yes</div>\n        <div id=\"label-not-sure\" class=\"connector-label\">Not sure</div>\n\n        <!-- Level 1 -->\n        <div id=\"node-root\" class=\"node yellow\" style=\"left: 960px; top: 100px\">\n          Should I learn to code?\n        </div>\n\n        <!-- Level 2 -->\n        <div id=\"node-yes\" class=\"node green\" style=\"left: 600px; top: 300px\">Yes</div>\n        <div id=\"node-not-sure\" class=\"node peach\" style=\"left: 1320px; top: 300px\">Not sure</div>\n\n        <!-- Level 3 -->\n        <div id=\"node-python\" class=\"node lavender\" style=\"left: 400px; top: 500px\">\n          <div style=\"position: relative; display: inline-block\">\n            <span id=\"python-text\">Start with Pythom</span>\n            <svg class=\"squiggle-container\" width=\"64\" height=\"6\" viewBox=\"0 0 64 6\">\n              <path\n                id=\"squiggle\"\n                d=\"M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3\"\n                fill=\"none\"\n                stroke=\"#E53935\"\n                stroke-width=\"2\"\n              />\n            </svg>\n          </div>\n          <div class=\"selection-border\"></div>\n        </div>\n        <div id=\"node-nocode\" class=\"node blue\" style=\"left: 800px; top: 500px\">\n          Try no-code first\n        </div>\n        <div id=\"node-website\" class=\"node pink\" style=\"left: 1120px; top: 500px\">\n          Build a personal website\n        </div>\n        <div id=\"node-course\" class=\"node yellow\" style=\"left: 1520px; top: 500px\">\n          Take a free intro course\n        </div>\n\n        <!-- Cursor -->\n        <div id=\"cursor\" class=\"cursor-container\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z\"\n              fill=\"white\"\n              stroke=\"black\"\n            />\n          </svg>\n          <div class=\"cursor-tag\">You</div>\n        </div>\n\n        <!-- Emoji -->\n        <div id=\"emoji-thumb\" class=\"emoji\">👍</div>\n\n        <!-- Overlay -->\n        <div id=\"fade-overlay\"></div>\n      </div>\n\n      <style>\n        [data-composition-id=\"flowchart\"] {\n          width: 1920px;\n          height: 1080px;\n          background-color: #ffffff;\n          background-image: radial-gradient(#e5e5e5 1px, transparent 1px);\n          background-size: 20px 20px;\n          position: absolute;\n          overflow: hidden;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"flowchart\"] .canvas {\n          width: 100%;\n          height: 100%;\n          position: absolute;\n          transform: scale(1.2);\n          transform-origin: 960px 300px;\n        }\n\n        [data-composition-id=\"flowchart\"] .node {\n          position: absolute;\n          transform: translate(-50%, -50%) scale(0);\n          padding: 16px 24px;\n          border-radius: 12px;\n          font-size: 18px;\n          font-weight: 500;\n          color: #333;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n          white-space: nowrap;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          z-index: 10;\n        }\n\n        [data-composition-id=\"flowchart\"] .node.yellow {\n          background-color: #e8d44d;\n        }\n        [data-composition-id=\"flowchart\"] .node.green {\n          background-color: #c2e8a0;\n        }\n        [data-composition-id=\"flowchart\"] .node.peach {\n          background-color: #f5c5a3;\n        }\n        [data-composition-id=\"flowchart\"] .node.lavender {\n          background-color: #d4c5f9;\n        }\n        [data-composition-id=\"flowchart\"] .node.blue {\n          background-color: #a8d8f0;\n        }\n        [data-composition-id=\"flowchart\"] .node.pink {\n          background-color: #f8b4c8;\n        }\n\n        [data-composition-id=\"flowchart\"] .connectors {\n          position: absolute;\n          top: 0;\n          left: 0;\n          z-index: 5;\n          pointer-events: none;\n        }\n\n        [data-composition-id=\"flowchart\"] .connector {\n          stroke-dasharray: 1000;\n          stroke-dashoffset: 1000;\n        }\n\n        [data-composition-id=\"flowchart\"] .connector-label {\n          position: absolute;\n          font-size: 14px;\n          font-weight: 600;\n          color: #333;\n          background: white;\n          padding: 2px 6px;\n          border-radius: 4px;\n          opacity: 0;\n          z-index: 6;\n          transform: translate(-50%, -50%);\n        }\n\n        [data-composition-id=\"flowchart\"] #label-yes {\n          left: 780px;\n          top: 230px;\n        }\n        [data-composition-id=\"flowchart\"] #label-not-sure {\n          left: 1140px;\n          top: 230px;\n        }\n\n        [data-composition-id=\"flowchart\"] .cursor-container {\n          position: absolute;\n          left: 1920px;\n          top: 1080px;\n          z-index: 100;\n          pointer-events: none;\n          display: flex;\n          align-items: flex-start;\n        }\n\n        [data-composition-id=\"flowchart\"] .cursor-tag {\n          background-color: #9747ff;\n          color: white;\n          padding: 2px 8px;\n          border-radius: 4px;\n          font-size: 12px;\n          font-weight: 600;\n          margin-left: 4px;\n          margin-top: 12px;\n        }\n\n        [data-composition-id=\"flowchart\"] .squiggle-container {\n          position: absolute;\n          right: 0;\n          bottom: -4px;\n          opacity: 0;\n        }\n\n        [data-composition-id=\"flowchart\"] .emoji {\n          position: absolute;\n          font-size: 32px;\n          left: 510px;\n          top: 500px;\n          transform: translate(-50%, -50%) scale(0);\n          z-index: 20;\n        }\n\n        [data-composition-id=\"flowchart\"] #fade-overlay {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-color: white;\n          opacity: 0;\n          z-index: 1000;\n          pointer-events: none;\n        }\n\n        [data-composition-id=\"flowchart\"] .selection-border {\n          position: absolute;\n          top: -4px;\n          left: -4px;\n          right: -4px;\n          bottom: -4px;\n          border: 2px solid #0b84f3;\n          border-radius: 16px;\n          pointer-events: none;\n          opacity: 0;\n        }\n\n        [data-composition-id=\"flowchart\"] .text-highlight {\n          background-color: #d0e4ff;\n        }\n      </style>\n\n      <script>\n        (function () {\n          const tl = gsap.timeline({ paused: true });\n          const S = '[data-composition-id=\"flowchart\"]';\n          const pythonText = document.querySelector(S + \" #python-text\");\n\n          // 1. Root node scales in\n          tl.to(S + \" #node-root\", { scale: 1, duration: 0.4, ease: \"power2.out\" });\n\n          // 2. Hold\n          tl.addLabel(\"hold1\", \"+=0.6\");\n\n          // 3. Connectors draw\n          tl.to(\n            S + \" .connector#path-1-L, \" + S + \" .connector#path-1-R\",\n            { strokeDashoffset: 0, duration: 0.5, ease: \"none\" },\n            \"hold1\",\n          );\n\n          tl.to(\n            S + \" #label-yes, \" + S + \" #label-not-sure\",\n            { opacity: 1, duration: 0.2 },\n            \"hold1+=0.25\",\n          );\n\n          // 4. Level 2 nodes\n          tl.to(S + \" #node-yes\", { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" }, \"hold1+=0.4\");\n          tl.to(\n            S + \" #node-not-sure\",\n            { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" },\n            \"hold1+=0.6\",\n          );\n\n          // 5. Hold\n          tl.addLabel(\"hold2\", \"+=0.5\");\n\n          // 6. Level 2→3 connectors\n          tl.to(\n            S +\n              \" .connector#path-2-LL, \" +\n              S +\n              \" .connector#path-2-LR, \" +\n              S +\n              \" .connector#path-2-RL, \" +\n              S +\n              \" .connector#path-2-RR\",\n            { strokeDashoffset: 0, duration: 0.4, ease: \"none\" },\n            \"hold2\",\n          );\n\n          // 7. Leaf nodes\n          const leafNodes = [\n            S + \" #node-python\",\n            S + \" #node-nocode\",\n            S + \" #node-website\",\n            S + \" #node-course\",\n          ];\n          leafNodes.forEach((id, i) => {\n            tl.to(\n              id,\n              { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" },\n              `hold2+=${0.3 + i * 0.15}`,\n            );\n          });\n\n          tl.to(S + \" .squiggle-container\", { opacity: 1, duration: 0.1 }, \"hold2+=0.3\");\n\n          // 8. Hold\n          tl.addLabel(\"hold3\", \"+=0.8\");\n\n          // 9. Cursor drifts in\n          tl.to(S + \" #cursor\", { x: -1470, y: -540, duration: 1, ease: \"power1.inOut\" }, \"hold3\");\n\n          // 10. Cursor clicks — selection border\n          tl.set(S + \" .selection-border\", { opacity: 1 }, \"hold3+=1\");\n\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: \"auto\" },\n            \"hold3+=1\",\n          );\n\n          // 11. Hold\n          tl.addLabel(\"hold4\", \"+=0.3\");\n\n          // 12. Double-click to highlight \"Pythom\"\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: \"auto\" },\n            \"hold4\",\n          );\n          tl.add(() => {\n            if (!pythonText) return;\n            pythonText.innerHTML = 'Start with <span class=\"text-highlight\">Pythom</span>';\n          }, \"hold4+=0.1\");\n\n          // 13. Hold\n          tl.addLabel(\"hold5\", \"+=0.2\");\n\n          // 14. Type correction: \"Pythom\" → \"Python\"\n          const typingStart = tl.labels[\"hold5\"];\n          const words = [\"P\", \"Py\", \"Pyt\", \"Pyth\", \"Pytho\", \"Python\"];\n          words.forEach((word, i) => {\n            tl.add(\n              () => {\n                if (pythonText)\n                  pythonText.innerHTML = `Start with <span class=\"text-highlight\">${word}</span>`;\n              },\n              typingStart + i * 0.05,\n            );\n          });\n\n          const typingEnd = typingStart + words.length * 0.05;\n          tl.add(() => {\n            if (pythonText) pythonText.innerHTML = \"Start with Python\";\n            gsap.set(S + \" .squiggle-container\", { opacity: 0 });\n          }, typingEnd);\n\n          // 15. Hold\n          tl.addLabel(\"hold6\", typingEnd + 0.5);\n\n          // 16. Cursor clicks away to deselect\n          tl.to(S + \" #cursor\", { x: -1420, y: -500, duration: 0.3, overwrite: \"auto\" }, \"hold6\");\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: \"auto\" },\n            \"hold6+=0.3\",\n          );\n          tl.to(S + \" .selection-border\", { opacity: 0, duration: 0.1 }, \"hold6+=0.3\");\n\n          // 17. Emoji pop\n          tl.to(\n            S + \" #emoji-thumb\",\n            { scale: 1, duration: 0.15, ease: \"back.out(2)\" },\n            \"hold6+=0.4\",\n          );\n\n          // 18. Hold\n          tl.addLabel(\"hold7\", \"+=2\");\n\n          // 19. Fade out\n          tl.to(S + \" #fade-overlay\", { opacity: 1, duration: 0.5 }, \"hold7\");\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"flowchart\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/registry/blocks/flowchart-vertical/flowchart-vertical.html b/registry/blocks/flowchart-vertical/flowchart-vertical.html
index 872a16d07..c904fe47e 100644
--- a/registry/blocks/flowchart-vertical/flowchart-vertical.html
+++ b/registry/blocks/flowchart-vertical/flowchart-vertical.html
@@ -119,6 +119,7 @@
               />
             </svg>
           </div>
+          <div class="selection-border"></div>
         </div>
         <div id="node-nocode" class="node blue" style="left: 600px; top: 960px">
           Try no-code first
@@ -310,7 +311,6 @@
         (function () {
           const tl = gsap.timeline({ paused: true });
           const S = "#flowchart-vertical";
-          const nodePython = document.querySelector(S + " #node-python");
           const pythonText = document.querySelector(S + " #python-text");
 
           // 1. Root node scales in
@@ -381,15 +381,7 @@
           tl.to(S + " #cursor", { x: -1110, y: -1560, duration: 1, ease: "power1.inOut" }, "hold3");
 
           // 10. Cursor clicks — selection border
-          tl.add(() => {
-            if (!nodePython) return;
-            if (!nodePython.querySelector(".selection-border")) {
-              const border = document.createElement("div");
-              border.className = "selection-border";
-              nodePython.appendChild(border);
-            }
-            gsap.set(S + " .selection-border", { opacity: 1 });
-          }, "hold3+=1");
+          tl.set(S + " .selection-border", { opacity: 1 }, "hold3+=1");
 
           tl.to(
             S + " #cursor",
diff --git a/registry/blocks/flowchart/flowchart.html b/registry/blocks/flowchart/flowchart.html
index da31cbcac..88cd257d3 100644
--- a/registry/blocks/flowchart/flowchart.html
+++ b/registry/blocks/flowchart/flowchart.html
@@ -119,6 +119,7 @@
               />
             </svg>
           </div>
+          <div class="selection-border"></div>
         </div>
         <div id="node-nocode" class="node blue" style="left: 800px; top: 500px">
           Try no-code first
@@ -310,7 +311,6 @@
         (function () {
           const tl = gsap.timeline({ paused: true });
           const S = '[data-composition-id="flowchart"]';
-          const nodePython = document.querySelector(S + " #node-python");
           const pythonText = document.querySelector(S + " #python-text");
 
           // 1. Root node scales in
@@ -381,15 +381,7 @@
           tl.to(S + " #cursor", { x: -1470, y: -540, duration: 1, ease: "power1.inOut" }, "hold3");
 
           // 10. Cursor clicks — selection border
-          tl.add(() => {
-            if (!nodePython) return;
-            if (!nodePython.querySelector(".selection-border")) {
-              const border = document.createElement("div");
-              border.className = "selection-border";
-              nodePython.appendChild(border);
-            }
-            gsap.set(S + " .selection-border", { opacity: 1 });
-          }, "hold3+=1");
+          tl.set(S + " .selection-border", { opacity: 1 }, "hold3+=1");
 
           tl.to(
             S + " #cursor",