@sealcode/jdd-editor 0.1.15 → 0.1.17

package/dist/src/controllers/component-debugger.stimulus.js

@@ -77,7 +77,7 @@ class ComponentDebugger extends Controller {
   }
   getHoverOverlay() {
     var _a;
-    if (!this.hover_overlay) {
+    if (!this.hover_overlay || !this.hover_overlay.parentElement) {
       this.hover_overlay = document.createElement("div");
       this.hover_overlay.classList.add("hover-overlay");
       (_a = this.element.querySelector(".jdd-outer-container")) == null ? void 0 : _a.append(this.hover_overlay);

package/dist/src/controllers/component-debugger.stimulus.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/controllers/component-debugger.stimulus.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\n/* eslint-disable @typescript-eslint/consistent-type-assertions */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport { Controller } from \"stimulus\";\n\nexport default class ComponentDebugger extends Controller {\n\tdeclare sizeSelectTarget: HTMLSelectElement;\n\tdeclare gutterTarget: HTMLDivElement;\n\tdeclare checkboxTarget: HTMLInputElement;\n\tdeclare checkboxTargets: HTMLInputElement[];\n\tdeclare previewTarget: HTMLDivElement;\n\tdeclare componentBlockTargets: HTMLDivElement[];\n\tstatic targets = [\n\t\t\"gutter\",\n\t\t\"componentBlock\",\n\t\t\"checkbox\",\n\t\t\"preview\",\n\t\t\"sizeSelect\",\n\t];\n\n\tid: string;\n\tmain_form: HTMLFormElement;\n\torigin_x: number;\n\torigin_width: number;\n\n\thover_overlay: HTMLDivElement | null;\n\n\tconnect() {\n\t\tconst main_form = document\n\t\t\t.querySelector(\"#component-debugger\")\n\t\t\t?.closest(\"form\");\n\t\tif (!main_form) {\n\t\t\tthrow new Error(\"No main form\");\n\t\t}\n\t\tthis.main_form = main_form;\n\t\tdocument.documentElement.addEventListener(\"ts-rebuilt\", () => {\n\t\t\tthis.main_form.requestSubmit();\n\t\t});\n\t\tthis.main_form.addEventListener(\"turbo:submit-end\", () => {\n\t\t\t// this clears the values of file inputs, so they don't get unecessarily\n\t\t\t// re-uploaded on future submissions - the file is alreade there on the server\n\t\t\tthis.main_form\n\t\t\t\t.querySelectorAll(\"input[type=file]\")\n\t\t\t\t.forEach((input: HTMLInputElement) => (input.value = \"\"));\n\t\t});\n\n\t\twindow.addEventListener(\"load\", () => {\n\t\t\tthis.update_width_display();\n\t\t});\n\t\tdocument.addEventListener(\"turbo:render\", () => {\n\t\t\t// not calling that to see if that improves performance\n\t\t\t// console.log(\"UWD because of render event\");\n\t\t\t// this.update_width_display();\n\t\t});\n\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\tconst gutter = this.gutterTarget;\n\t\tgutter.addEventListener(\"mousedown\", (e) => {\n\t\t\tthis.origin_x = e.clientX;\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tconst resizable = this.targets.find(\"preview\") as HTMLSpanElement;\n\t\t\tthis.origin_width = resizable.getBoundingClientRect().width;\n\t\t\tconst handler = (e: MouseEvent) => this.resizeHandler(e);\n\t\t\tdocument.addEventListener(\"mousemove\", handler);\n\t\t\tconst remove_move_listener = () => {\n\t\t\t\tdocument.removeEventListener(\"mousemove\", handler);\n\t\t\t\tdocument.removeEventListener(\"mouseup\", remove_move_listener);\n\t\t\t\tdocument.dispatchEvent(\n\t\t\t\t\tnew Event(\"component-debugger--resize-done\")\n\t\t\t\t);\n\t\t\t};\n\t\t\tdocument.addEventListener(\"mouseup\", remove_move_listener);\n\t\t\te.preventDefault();\n\t\t});\n\t}\n\n\tupdate_width_display() {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\tconsole.log(\"uwd\");\n\t\tconst preview = this.targets.find(\"preview\") as HTMLSpanElement;\n\t\tconst component_width = preview.offsetWidth;\n\t\tthis.sizeSelectTarget\n\t\t\t.querySelectorAll(\"option\")\n\t\t\t.forEach((e) => e.removeAttribute(\"selected\"));\n\t\tlet option: HTMLOptionElement | null =\n\t\t\tthis.sizeSelectTarget.querySelector(\"option.dynamic\");\n\t\tif (!option) {\n\t\t\toption = document.createElement(\"option\");\n\t\t\toption.classList.add(\"dynamic\");\n\t\t\toption.setAttribute(\"selected\", \"\");\n\t\t\tthis.sizeSelectTarget.insertBefore(\n\t\t\t\toption,\n\t\t\t\tthis.sizeSelectTarget.childNodes[0]!\n\t\t\t);\n\t\t}\n\t\toption.setAttribute(\"selected\", \"\");\n\t\toption.innerHTML = `${component_width} px`;\n\t\toption.value = String(component_width);\n\t\tthis.sizeSelectTarget.value = String(component_width);\n\t}\n\n\tresizeHandler(e: MouseEvent) {\n\t\tconst width_offset = this.origin_x - e.clientX;\n\t\tconst new_width = Math.max(this.origin_width + width_offset, 1);\n\t\tthis.setPreviewWidth(new_width);\n\t\tthis.update_width_display();\n\t\tdocument.dispatchEvent(new Event(\"component-debugger--resize\"));\n\t}\n\n\tsetPreviewWidth(width: number) {\n\t\tdocument\n\t\t\t.getElementById(\"component-debugger\")\n\t\t\t?.style.setProperty(\n\t\t\t\t\"--resizable-column-width\",\n\t\t\t\twidth.toString() + \"px\"\n\t\t\t);\n\t\tthis.update_width_display();\n\t}\n\n\thandleWidthDropdown() {\n\t\tconst value = this.sizeSelectTarget.value;\n\t\tthis.setPreviewWidth(parseInt(value));\n\t}\n\n\tgetHoverOverlay(): HTMLDivElement {\n\t\tif (!this.hover_overlay) {\n\t\t\tthis.hover_overlay = document.createElement(\"div\");\n\t\t\tthis.hover_overlay.classList.add(\"hover-overlay\");\n\t\t\tthis.element\n\t\t\t\t.querySelector(\".jdd-outer-container\")\n\t\t\t\t?.append(this.hover_overlay);\n\t\t}\n\t\treturn this.hover_overlay;\n\t}\n\n\thandleBlockHover(e: MouseEvent) {\n\t\tconst index = parseInt(\n\t\t\t(e.target as HTMLDivElement)\n\t\t\t\t.closest(\".jdd-editor__component-block\")\n\t\t\t\t?.getAttribute(\"data-component-index\") || \"0\"\n\t\t);\n\t\tconst selector = `.component-number-${index}`;\n\t\tconst target_element = this.element.querySelector(\n\t\t\tselector\n\t\t) as HTMLDivElement;\n\t\tif (!target_element) {\n\t\t\tconsole.warn(`Didn't find an element matching: ${selector}`);\n\t\t\treturn;\n\t\t}\n\t\tconst width = target_element.clientWidth;\n\t\tconst height = target_element.clientHeight;\n\t\tconst top = target_element.offsetTop;\n\t\tconst overlay = this.getHoverOverlay();\n\t\toverlay.classList.remove(\"inactive\");\n\t\toverlay.style.setProperty(\"width\", `${width}px`);\n\t\toverlay.style.setProperty(\"height\", `${height}px`);\n\t\toverlay.style.setProperty(\"top\", `${top}px`);\n\t}\n\n\thandleBlockUnhover(e: MouseEvent) {\n\t\tconst overlay = this.getHoverOverlay();\n\t\toverlay.classList.add(\"inactive\");\n\t}\n\n\tcomponentBlockTargetConnected(block_element: HTMLDivElement) {\n\t\tconst index = parseInt(\n\t\t\tblock_element.getAttribute(\"data-component-index\") || \"0\"\n\t\t);\n\t\tblock_element.addEventListener(\"focusin\", () => {\n\t\t\tthis.scrollToComponentPreview(index);\n\t\t});\n\n\t\tconst summary = block_element.querySelector(\"summary\");\n\t\tif (summary) {\n\t\t\tsummary.addEventListener(\n\t\t\t\t\"mouseenter\",\n\t\t\t\tthis.handleBlockHover.bind(this)\n\t\t\t);\n\t\t\tsummary.addEventListener(\n\t\t\t\t\"mouseleave\",\n\t\t\t\tthis.handleBlockUnhover.bind(this)\n\t\t\t);\n\t\t}\n\t}\n\n\tpreviewTargetConnected(preview_element: HTMLDivElement) {\n\t\tpreview_element.addEventListener(\"click\", ({ target }) => {\n\t\t\tif (!(target instanceof HTMLElement)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst closest = target.closest(\".jdd-component\");\n\t\t\tif (!closest) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst index = parseInt(\n\t\t\t\tString(\n\t\t\t\t\tArray.from(closest.classList)\n\t\t\t\t\t\t.find((c) => c.startsWith(\"component-number-\"))\n\t\t\t\t\t\t?.replace(\"component-number-\", \"\")\n\t\t\t\t)\n\t\t\t);\n\t\t\tif (isNaN(index)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis.focusComponentBlock(index);\n\t\t});\n\t}\n\n\tfocusComponentBlock(index: number) {\n\t\tconst block = this.componentBlockTargets[index];\n\t\tif (!block) {\n\t\t\treturn;\n\t\t}\n\t\tthis.checkboxTargets[index]!.checked = true;\n\t\tthis.checkboxTargets[index]!.dispatchEvent(new Event(\"change\")); // to help with refreshing markdown editor\n\t\tblock.scrollIntoView({ behavior: \"smooth\" });\n\t\t(\n\t\t\tblock.querySelector(\n\t\t\t\t\".component-preview-parameters input\"\n\t\t\t) as HTMLInputElement\n\t\t)?.focus();\n\t}\n\n\tgetIndex(block_element: HTMLDivElement) {\n\t\tconst index = parseInt(\n\t\t\tString(block_element.getAttribute(\"data-component-index\"))\n\t\t);\n\t\treturn index;\n\t}\n\n\tlabelClicked(element: MouseEvent) {\n\t\tconst block_element = (element.target as HTMLDivElement).closest(\n\t\t\t`[data-component-debugger-target=\"componentBlock\"]`\n\t\t) as HTMLDivElement;\n\t\tconst index = this.getIndex(block_element);\n\t\tif (!this.checkboxTargets?.[index]?.checked) {\n\t\t\tthis.scrollToComponentPreview(index);\n\t\t}\n\t}\n\n\tgetPreviewElementForComponentIndex(index: number) {\n\t\tconst element = this.element.querySelector(\n\t\t\t`.component-number-${index}`\n\t\t) as HTMLDialogElement;\n\t\treturn element;\n\t}\n\n\tscrollToComponentPreview(index: number) {\n\t\tconst element = this.getPreviewElementForComponentIndex(index);\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\t\tconst preview_element =\n\t\t\tthis.element.querySelector(\".component-preview\");\n\t\tif (!preview_element) {\n\t\t\tthrow new Error(\"Missing preview element!\");\n\t\t}\n\t\tif (element.clientHeight > preview_element.clientHeight) {\n\t\t\tpreview_element.scrollTop = element.offsetTop - 44;\n\t\t} else {\n\t\t\tpreview_element.scrollTop =\n\t\t\t\telement.offsetTop -\n\t\t\t\t(preview_element.clientHeight - element.clientHeight) / 2 -\n\t\t\t\t44;\n\t\t}\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\n/* eslint-disable @typescript-eslint/consistent-type-assertions */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport { Controller } from \"stimulus\";\n\nexport default class ComponentDebugger extends Controller {\n\tdeclare sizeSelectTarget: HTMLSelectElement;\n\tdeclare gutterTarget: HTMLDivElement;\n\tdeclare checkboxTarget: HTMLInputElement;\n\tdeclare checkboxTargets: HTMLInputElement[];\n\tdeclare previewTarget: HTMLDivElement;\n\tdeclare componentBlockTargets: HTMLDivElement[];\n\tstatic targets = [\n\t\t\"gutter\",\n\t\t\"componentBlock\",\n\t\t\"checkbox\",\n\t\t\"preview\",\n\t\t\"sizeSelect\",\n\t];\n\n\tid: string;\n\tmain_form: HTMLFormElement;\n\torigin_x: number;\n\torigin_width: number;\n\n\thover_overlay: HTMLDivElement | null;\n\n\tconnect() {\n\t\tconst main_form = document\n\t\t\t.querySelector(\"#component-debugger\")\n\t\t\t?.closest(\"form\");\n\t\tif (!main_form) {\n\t\t\tthrow new Error(\"No main form\");\n\t\t}\n\t\tthis.main_form = main_form;\n\t\tdocument.documentElement.addEventListener(\"ts-rebuilt\", () => {\n\t\t\tthis.main_form.requestSubmit();\n\t\t});\n\t\tthis.main_form.addEventListener(\"turbo:submit-end\", () => {\n\t\t\t// this clears the values of file inputs, so they don't get unecessarily\n\t\t\t// re-uploaded on future submissions - the file is alreade there on the server\n\t\t\tthis.main_form\n\t\t\t\t.querySelectorAll(\"input[type=file]\")\n\t\t\t\t.forEach((input: HTMLInputElement) => (input.value = \"\"));\n\t\t});\n\n\t\twindow.addEventListener(\"load\", () => {\n\t\t\tthis.update_width_display();\n\t\t});\n\t\tdocument.addEventListener(\"turbo:render\", () => {\n\t\t\t// not calling that to see if that improves performance\n\t\t\t// console.log(\"UWD because of render event\");\n\t\t\t// this.update_width_display();\n\t\t});\n\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\tconst gutter = this.gutterTarget;\n\t\tgutter.addEventListener(\"mousedown\", (e) => {\n\t\t\tthis.origin_x = e.clientX;\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tconst resizable = this.targets.find(\"preview\") as HTMLSpanElement;\n\t\t\tthis.origin_width = resizable.getBoundingClientRect().width;\n\t\t\tconst handler = (e: MouseEvent) => this.resizeHandler(e);\n\t\t\tdocument.addEventListener(\"mousemove\", handler);\n\t\t\tconst remove_move_listener = () => {\n\t\t\t\tdocument.removeEventListener(\"mousemove\", handler);\n\t\t\t\tdocument.removeEventListener(\"mouseup\", remove_move_listener);\n\t\t\t\tdocument.dispatchEvent(\n\t\t\t\t\tnew Event(\"component-debugger--resize-done\")\n\t\t\t\t);\n\t\t\t};\n\t\t\tdocument.addEventListener(\"mouseup\", remove_move_listener);\n\t\t\te.preventDefault();\n\t\t});\n\t}\n\n\tupdate_width_display() {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\tconsole.log(\"uwd\");\n\t\tconst preview = this.targets.find(\"preview\") as HTMLSpanElement;\n\t\tconst component_width = preview.offsetWidth;\n\t\tthis.sizeSelectTarget\n\t\t\t.querySelectorAll(\"option\")\n\t\t\t.forEach((e) => e.removeAttribute(\"selected\"));\n\t\tlet option: HTMLOptionElement | null =\n\t\t\tthis.sizeSelectTarget.querySelector(\"option.dynamic\");\n\t\tif (!option) {\n\t\t\toption = document.createElement(\"option\");\n\t\t\toption.classList.add(\"dynamic\");\n\t\t\toption.setAttribute(\"selected\", \"\");\n\t\t\tthis.sizeSelectTarget.insertBefore(\n\t\t\t\toption,\n\t\t\t\tthis.sizeSelectTarget.childNodes[0]!\n\t\t\t);\n\t\t}\n\t\toption.setAttribute(\"selected\", \"\");\n\t\toption.innerHTML = `${component_width} px`;\n\t\toption.value = String(component_width);\n\t\tthis.sizeSelectTarget.value = String(component_width);\n\t}\n\n\tresizeHandler(e: MouseEvent) {\n\t\tconst width_offset = this.origin_x - e.clientX;\n\t\tconst new_width = Math.max(this.origin_width + width_offset, 1);\n\t\tthis.setPreviewWidth(new_width);\n\t\tthis.update_width_display();\n\t\tdocument.dispatchEvent(new Event(\"component-debugger--resize\"));\n\t}\n\n\tsetPreviewWidth(width: number) {\n\t\tdocument\n\t\t\t.getElementById(\"component-debugger\")\n\t\t\t?.style.setProperty(\n\t\t\t\t\"--resizable-column-width\",\n\t\t\t\twidth.toString() + \"px\"\n\t\t\t);\n\t\tthis.update_width_display();\n\t}\n\n\thandleWidthDropdown() {\n\t\tconst value = this.sizeSelectTarget.value;\n\t\tthis.setPreviewWidth(parseInt(value));\n\t}\n\n\tgetHoverOverlay(): HTMLDivElement {\n\t\tif (\n\t\t\t!this.hover_overlay /* the node is absent */ ||\n\t\t\t!this.hover_overlay\n\t\t\t\t.parentElement /* the node was present, but it has been detached */\n\t\t) {\n\t\t\tthis.hover_overlay = document.createElement(\"div\");\n\t\t\tthis.hover_overlay.classList.add(\"hover-overlay\");\n\t\t\tthis.element\n\t\t\t\t.querySelector(\".jdd-outer-container\")\n\t\t\t\t?.append(this.hover_overlay);\n\t\t}\n\t\treturn this.hover_overlay;\n\t}\n\n\thandleBlockHover(e: MouseEvent) {\n\t\tconst index = parseInt(\n\t\t\t(e.target as HTMLDivElement)\n\t\t\t\t.closest(\".jdd-editor__component-block\")\n\t\t\t\t?.getAttribute(\"data-component-index\") || \"0\"\n\t\t);\n\t\tconst selector = `.component-number-${index}`;\n\t\tconst target_element = this.element.querySelector(\n\t\t\tselector\n\t\t) as HTMLDivElement;\n\t\tif (!target_element) {\n\t\t\tconsole.warn(`Didn't find an element matching: ${selector}`);\n\t\t\treturn;\n\t\t}\n\t\tconst width = target_element.clientWidth;\n\t\tconst height = target_element.clientHeight;\n\t\tconst top = target_element.offsetTop;\n\t\tconst overlay = this.getHoverOverlay();\n\t\toverlay.classList.remove(\"inactive\");\n\t\toverlay.style.setProperty(\"width\", `${width}px`);\n\t\toverlay.style.setProperty(\"height\", `${height}px`);\n\t\toverlay.style.setProperty(\"top\", `${top}px`);\n\t}\n\n\thandleBlockUnhover(e: MouseEvent) {\n\t\tconst overlay = this.getHoverOverlay();\n\t\toverlay.classList.add(\"inactive\");\n\t}\n\n\tcomponentBlockTargetConnected(block_element: HTMLDivElement) {\n\t\tconst index = parseInt(\n\t\t\tblock_element.getAttribute(\"data-component-index\") || \"0\"\n\t\t);\n\t\tblock_element.addEventListener(\"focusin\", () => {\n\t\t\tthis.scrollToComponentPreview(index);\n\t\t});\n\n\t\tconst summary = block_element.querySelector(\"summary\");\n\t\tif (summary) {\n\t\t\tsummary.addEventListener(\n\t\t\t\t\"mouseenter\",\n\t\t\t\tthis.handleBlockHover.bind(this)\n\t\t\t);\n\t\t\tsummary.addEventListener(\n\t\t\t\t\"mouseleave\",\n\t\t\t\tthis.handleBlockUnhover.bind(this)\n\t\t\t);\n\t\t}\n\t}\n\n\tpreviewTargetConnected(preview_element: HTMLDivElement) {\n\t\tpreview_element.addEventListener(\"click\", ({ target }) => {\n\t\t\tif (!(target instanceof HTMLElement)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst closest = target.closest(\".jdd-component\");\n\t\t\tif (!closest) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst index = parseInt(\n\t\t\t\tString(\n\t\t\t\t\tArray.from(closest.classList)\n\t\t\t\t\t\t.find((c) => c.startsWith(\"component-number-\"))\n\t\t\t\t\t\t?.replace(\"component-number-\", \"\")\n\t\t\t\t)\n\t\t\t);\n\t\t\tif (isNaN(index)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis.focusComponentBlock(index);\n\t\t});\n\t}\n\n\tfocusComponentBlock(index: number) {\n\t\tconst block = this.componentBlockTargets[index];\n\t\tif (!block) {\n\t\t\treturn;\n\t\t}\n\t\tthis.checkboxTargets[index]!.checked = true;\n\t\tthis.checkboxTargets[index]!.dispatchEvent(new Event(\"change\")); // to help with refreshing markdown editor\n\t\tblock.scrollIntoView({ behavior: \"smooth\" });\n\t\t(\n\t\t\tblock.querySelector(\n\t\t\t\t\".component-preview-parameters input\"\n\t\t\t) as HTMLInputElement\n\t\t)?.focus();\n\t}\n\n\tgetIndex(block_element: HTMLDivElement) {\n\t\tconst index = parseInt(\n\t\t\tString(block_element.getAttribute(\"data-component-index\"))\n\t\t);\n\t\treturn index;\n\t}\n\n\tlabelClicked(element: MouseEvent) {\n\t\tconst block_element = (element.target as HTMLDivElement).closest(\n\t\t\t`[data-component-debugger-target=\"componentBlock\"]`\n\t\t) as HTMLDivElement;\n\t\tconst index = this.getIndex(block_element);\n\t\tif (!this.checkboxTargets?.[index]?.checked) {\n\t\t\tthis.scrollToComponentPreview(index);\n\t\t}\n\t}\n\n\tgetPreviewElementForComponentIndex(index: number) {\n\t\tconst element = this.element.querySelector(\n\t\t\t`.component-number-${index}`\n\t\t) as HTMLDialogElement;\n\t\treturn element;\n\t}\n\n\tscrollToComponentPreview(index: number) {\n\t\tconst element = this.getPreviewElementForComponentIndex(index);\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\t\tconst preview_element =\n\t\t\tthis.element.querySelector(\".component-preview\");\n\t\tif (!preview_element) {\n\t\t\tthrow new Error(\"Missing preview element!\");\n\t\t}\n\t\tif (element.clientHeight > preview_element.clientHeight) {\n\t\t\tpreview_element.scrollTop = element.offsetTop - 44;\n\t\t} else {\n\t\t\tpreview_element.scrollTop =\n\t\t\t\telement.offsetTop -\n\t\t\t\t(preview_element.clientHeight - element.clientHeight) / 2 -\n\t\t\t\t44;\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
   "names": ["e"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/jdd-editor",
-	"version": "0.1.15",
+	"version": "0.1.17",
 	"main": "dist/src/index.js",
 	"scripts": {
 		"build": "node ./esbuild.cjs",

package/src/controllers/component-debugger.stimulus.ts

@@ -123,7 +123,11 @@ export default class ComponentDebugger extends Controller {
 	}
 
 	getHoverOverlay(): HTMLDivElement {
-		if (!this.hover_overlay) {
+		if (
+			!this.hover_overlay /* the node is absent */ ||
+			!this.hover_overlay
+				.parentElement /* the node was present, but it has been detached */
+		) {
 			this.hover_overlay = document.createElement("div");
 			this.hover_overlay.classList.add("hover-overlay");
 			this.element