From b8299351031e979cb9fd219bd59a6e0419402626 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 2 Jun 2026 14:38:42 -0400
Subject: [PATCH] fix: recreate <defs> in rebuildClipDefs when it's missing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adam hit a hard crash every time he clicked a layout tab on the
deployed site:

  Uncaught TypeError: Cannot set properties of null (setting
  'innerHTML') at rebuildClipDefs (16403) → render (11689) →
  applyLayout (28513)

rebuildClipDefs() does defs.innerHTML = '' on an element found
via defsRoot.querySelector('defs'). If the SVG #globalClipDefs
container exists but its inner <defs> child has been removed (or
an early DOM-hook / browser extension injected the SVG without a
<defs> child), the query returns null and the assignment throws.
Because rebuildClipDefs is the first thing render() calls, the
crash aborts the entire render — body classes don't swap, the
canvas doesn't redraw, the layout panel doesn't update. The
top-level tab visually toggles but everything downstream stays
frozen. Exactly the "canvas stuck" report.

Guard the lookup: if no <defs> child exists, re-create one and
append it to the container, then proceed with the rebuild. The
ensureGlobalClipDefs() helper already creates a <defs> on first
call; this fix handles the rarer case where the container exists
in a malformed state.
---
 src/index.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index d7d1e38..f12f0be 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16399,7 +16399,14 @@
     // to whatever pixel size the wrapper ends up at.
     function rebuildClipDefs(layers) {
       const defsRoot = ensureGlobalClipDefs();
-      const defs = defsRoot.querySelector('defs');
+      let defs = defsRoot.querySelector('defs');
+      if (!defs) {
+        // Pre-existing globalClipDefs SVG without an inner <defs>
+        // (e.g. injected by an early DOM hook or an extension). Recreate
+        // it so the rebuild doesn't crash and abort render().
+        defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+        defsRoot.appendChild(defs);
+      }
       defs.innerHTML = '';
       const map = new Map();
       for (const layer of layers || []) {