Fix H3 section control interactions

js/h3_longvideos/index.js

@@ -17,7 +17,7 @@ const GROUPS = [
   {
     id: "refs",
     label: "Refs",
-    defaultCollapsed: false,
+    defaultCollapsed: true,
     widgets: ["ref_mode", "ref_image_size", "ref_noise_aug", "character_memory", "trim_seam", "vary_seed_per_shot", "handoff_offset"],
   },
   {
@@ -178,6 +178,18 @@ function findWidget(node, name) {
   return (node.widgets || []).find((widget) => widget?.name === name) || null;
 }
 
+function isInteractiveTarget(target) {
+  return !!target?.closest?.("button, input, textarea, select, label");
+}
+
+function stopCanvasEvent(event) {
+  if (isInteractiveTarget(event.target)) event.stopPropagation();
+}
+
+function stopCanvasKeyboard(event) {
+  if (isInteractiveTarget(event.target)) event.stopImmediatePropagation();
+}
+
 function setWidgetHidden(widget, hidden) {
   if (!widget) return;
   if (!widget._dh3lvOriginal) {
@@ -300,6 +312,11 @@ function setupNode(node) {
   const list = document.createElement("div");
   list.className = "dh3lv-sections-list";
   root.append(head, list);
+  root.addEventListener("pointerdown", stopCanvasEvent);
+  root.addEventListener("mousedown", stopCanvasEvent);
+  root.addEventListener("click", stopCanvasEvent);
+  root.addEventListener("dblclick", stopCanvasEvent);
+  root.addEventListener("keydown", stopCanvasKeyboard, true);
 
   node._dh3lvUI = { root, list };
   const widget = node.addDOMWidget(DOM_WIDGET_NAME, "custom", root, {