@blokkli/editor 2.0.0-alpha.24 → 2.0.0-alpha.25

package/dist/runtime/components/Edit/Features/Analyze/Renderer/index.vue

@@ -5,7 +5,7 @@
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
-import { useBlokkli, computed } from "#imports";
+import { useBlokkli, computed, watch } from "#imports";
 import {
   setBuffersAndAttributes,
   drawBufferInfo,
@@ -16,9 +16,15 @@ import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
 import { toShaderColor } from "#blokkli/helpers";
 const props = defineProps({
-  results: { type: Array, required: true }
+  results: { type: Array, required: true },
+  isStale: { type: Boolean, required: true },
+  isRunning: { type: Boolean, required: true },
+  manualAnalyzerIds: { type: Set, required: true }
 });
-const { animation, ui, theme, selection, eventBus, element } = useBlokkli();
+const { animation, ui, theme, selection, element, dom, blocks } = useBlokkli();
+const activeId = defineModel({ type: String, ...{
+  default: ""
+} });
 const statusPriority = {
   violation: 3,
   incomplete: 2,
@@ -26,51 +32,88 @@ const statusPriority = {
   inapplicable: 0
 };
 const nodes = computed(() => {
-  const allNodes = props.results.filter((v) => v.status === "incomplete" || v.status === "violation").flatMap((result) => {
-    const nodes2 = Array.isArray(result.nodes) ? result.nodes : [result.nodes];
-    return nodes2.flatMap((node) => {
-      const targets = Array.isArray(node.targets) ? node.targets : [node.targets];
-      return targets.map((v) => {
-        if (typeof v === "string") {
-          return element.query(
+  const mappedNodes = [];
+  for (let i = 0; i < props.results.length; i++) {
+    const result = props.results[i];
+    if (!result) {
+      continue;
+    }
+    if (result.status !== "incomplete" && result.status !== "violation") {
+      continue;
+    }
+    for (let j = 0; j < result.nodes.length; j++) {
+      const node = result.nodes[j];
+      if (!node) {
+        continue;
+      }
+      for (let k = 0; k < node.targets.length; k++) {
+        const target = node.targets[k];
+        if (!target) {
+          continue;
+        }
+        let targetElement = null;
+        if (typeof target.target === "string") {
+          targetElement = element.query(
             ui.providerElement,
-            v,
+            target.target,
             "Find analyze node target element."
           );
+        } else if (target.target instanceof HTMLElement) {
+          targetElement = target.target;
+        } else {
+          const item = blocks.getBlock(target.target.uuid);
+          if (item) {
+            targetElement = dom.getDragElement(item) ?? null;
+          }
         }
-        return v;
-      }).filter((v) => v instanceof HTMLElement).filter((v) => ui.providerElement.contains(v));
-    }).map((element2) => {
-      return {
-        id: result.id,
-        element: element2,
-        title: result.title,
-        status: result.status
-      };
-    });
-  });
+        if (targetElement) {
+          mappedNodes.push({
+            id: result.id,
+            element: targetElement,
+            index: target.globalIndex,
+            title: result.title,
+            status: result.status,
+            plugin: result.plugin
+          });
+        }
+      }
+    }
+  }
   const nodeMap = /* @__PURE__ */ new Map();
-  for (const node of allNodes) {
+  for (const node of mappedNodes) {
     const existing = nodeMap.get(node.element);
     if (!existing || statusPriority[node.status] > statusPriority[existing.status]) {
       nodeMap.set(node.element, node);
     }
   }
-  return Array.from(nodeMap.values());
+  const finalNodes = Array.from(nodeMap.values());
+  return finalNodes;
+});
+const activeRectId = computed(() => {
+  if (!activeId.value) {
+    return -1;
+  }
+  for (let i = 0; i < nodes.value.length; i++) {
+    const node = nodes.value[i];
+    const id = node.id + "_____" + node.index;
+    if (activeId.value === id) {
+      return i;
+    }
+  }
+  return -1;
 });
 class AnalyzeRectangleBufferCollector extends RectangleBufferCollector {
   prevKey = "";
   rectCache = /* @__PURE__ */ new Map();
   clearCache() {
     this.rectCache.clear();
+    this.prevKey = "";
   }
   getBufferInfo(gl, force) {
     const key = nodes.value.map((node, index) => {
       if (!this.rectCache.has(node.element)) {
-        this.rectCache.set(
-          node.element,
-          ui.getAbsoluteElementRect(node.element)
-        );
+        const rect2 = ui.getAbsoluteElementRect(node.element);
+        this.rectCache.set(node.element, rect2);
       }
       const rect = this.rectCache.get(node.element);
       if (!rect) {
@@ -92,7 +135,8 @@ class AnalyzeRectangleBufferCollector extends RectangleBufferCollector {
           continue;
         }
         this.added.add(id);
-        const statusType = node.status === "violation" ? 3 : node.status === "incomplete" ? 1 : node.status === "inapplicable" ? 2 : 0;
+        const isManual = props.manualAnalyzerIds.has(node.plugin);
+        const statusType = node.status === "violation" ? isManual ? 0 : 1 : isManual ? 2 : 3;
         this.addRectangle(
           {
             id,
@@ -100,7 +144,9 @@ class AnalyzeRectangleBufferCollector extends RectangleBufferCollector {
             y: rect.y,
             width: rect.width,
             height: rect.height,
-            status: node.status
+            status: node.status,
+            plugin: node.plugin,
+            nodeIndex: node.index
           },
           statusType
         );
@@ -113,11 +159,14 @@ class AnalyzeRectangleBufferCollector extends RectangleBufferCollector {
     return { info: this.bufferInfo, hasChanged };
   }
 }
+function getOpacity() {
+  return props.isRunning ? 0.3 : 1;
+}
 const { collector } = defineRenderer("analyze-overlay", {
   zIndex: 500,
   collector: () => new AnalyzeRectangleBufferCollector(),
   program: () => ({ shaders: [vs, fs] }),
-  enabled: () => !selection.isMultiSelecting.value && !selection.isDragging.value,
+  enabled: () => !selection.isMultiSelecting.value && !selection.isDragging.value && !selection.isChangingOptions.value,
   render: (_ctx, gl, program) => {
     gl.useProgram(program.program);
     const { info } = collector.getBufferInfo(gl);
@@ -127,7 +176,9 @@ const { collector } = defineRenderer("analyze-overlay", {
     setUniforms(program, {
       u_color_violation: toShaderColor(theme.red.value.normal),
       u_color_incomplete: toShaderColor(theme.yellow.value.normal),
-      u_color_pass: toShaderColor(theme.lime.value.normal)
+      u_opacity: getOpacity(),
+      u_manual_stale: props.isStale ? 1 : 0,
+      u_active_id: activeRectId.value
     });
     animation.setSharedUniforms(gl, program);
     setBuffersAndAttributes(gl, program, info);
@@ -142,24 +193,23 @@ const { collector } = defineRenderer("analyze-overlay", {
     const rgbaToCss = (rgb, alpha) => {
       return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
     };
-    const colorViolation = rgbaToCss(theme.red.value.normal, 0.3);
-    const colorIncomplete = rgbaToCss(theme.yellow.value.normal, 0.3);
-    const colorPass = rgbaToCss(theme.lime.value.normal, 0.3);
+    const globalOpacity = getOpacity();
+    const borderRadius = 8 * ctx.dpi;
     for (let i = 0; i < rects.length; i++) {
       const rect = rects[i];
-      let fillColor = colorPass;
-      if (rect.status === "violation") {
-        fillColor = colorViolation;
-      } else if (rect.status === "incomplete") {
-        fillColor = colorIncomplete;
-      }
+      const isManual = props.manualAnalyzerIds.has(rect.plugin);
+      const finalOpacity = isManual && props.isStale ? 0.3 : globalOpacity;
+      const fillAlpha = 0.3 * finalOpacity;
+      const baseColor = rect.status === "violation" ? theme.red.value.normal : theme.yellow.value.normal;
+      const fillColor = rgbaToCss(baseColor, fillAlpha);
+      const x = (rect.x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
+      const y = (rect.y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
+      const width = rect.width * ctx.artboardScale * ctx.dpi;
+      const height = rect.height * ctx.artboardScale * ctx.dpi;
       ctx2d.fillStyle = fillColor;
-      ctx2d.fillRect(
-        (rect.x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi,
-        (rect.y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi,
-        rect.width * ctx.artboardScale * ctx.dpi,
-        rect.height * ctx.artboardScale * ctx.dpi
-      );
+      ctx2d.beginPath();
+      ctx2d.roundRect(x, y, width, height, borderRadius);
+      ctx2d.fill();
     }
   }
 });
@@ -167,10 +217,17 @@ onBlokkliEvent("ui:resized", function() {
   collector.clearCache();
   collector.reset();
 });
-onBlokkliEvent("state:reloaded", function() {
+onBlokkliEvent("option:finish-change", () => {
   collector.clearCache();
   collector.reset();
 });
+watch(
+  () => props.results,
+  () => {
+    collector.clearCache();
+    collector.reset();
+  }
+);
 onBlokkliEvent("mouse:up", (e) => {
   const artboardX = (e.x - ui.artboardOffset.value.x) / ui.artboardScale.value;
   const artboardY = (e.y - ui.artboardOffset.value.y) / ui.artboardScale.value;
@@ -181,14 +238,19 @@ onBlokkliEvent("mouse:up", (e) => {
       continue;
     }
     if (artboardX >= rect.x && artboardX <= rect.x + rect.width && artboardY >= rect.y && artboardY <= rect.y + rect.height) {
-      eventBus.emit("analyze:click-node", {
-        id: node.id,
-        target: node.element
-      });
+      const id = node.id + "_____" + node.index;
+      if (activeId.value === id) {
+        activeId.value = "";
+      } else {
+        activeId.value = id;
+      }
       return;
     }
   }
 });
+onBlokkliEvent("window:clickAway", () => {
+  activeId.value = "";
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Analyze/Renderer/index.vue.d.ts

@@ -1,7 +1,21 @@
 import type { AnalyzeResultMapped } from '#blokkli/analyzer/types';
 declare const _default: import("vue").DefineComponent<{
     results: AnalyzeResultMapped[];
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    isStale: boolean;
+    isRunning: boolean;
+    manualAnalyzerIds: Set<string>;
+} & {
+    modelValue?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
     results: AnalyzeResultMapped[];
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    isStale: boolean;
+    isRunning: boolean;
+    manualAnalyzerIds: Set<string>;
+} & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Analyze/Renderer/vertex.glsl

@@ -19,13 +19,19 @@ uniform float u_offset_y;
 uniform vec2 u_resolution;
 uniform vec3 u_color_violation;
 uniform vec3 u_color_incomplete;
-uniform vec3 u_color_pass;
+uniform float u_opacity;
+uniform float u_manual_stale;
+uniform float u_active_id;
 
 out vec4 v_quad;
 out float v_rect_type;
 out vec3 v_color;
 out vec2 v_rect_size;
 out vec2 v_rect_center;
+out float v_opacity;
+out float v_border_opacity;
+out float v_border_factor;
+out float v_fill_opacity;
 
 void main() {
   // Apply global scale and offsets
@@ -57,18 +63,32 @@ void main() {
   v_rect_center = vec2(v_quad.x + v_quad.z / 2.0, v_quad.y + v_quad.w / 2.0);
 
   // Set color based on status type
-  // 0 = pass, 1 = incomplete, 2 = inapplicable, 3 = violation
-  if (a_rect_type > 2.5) {
-    // violation
+  // 0 = violation (manual), 1 = violation (continuous)
+  // 2 = incomplete (manual), 3 = incomplete (continuous)
+  if (a_rect_type < 1.5) {
+    // Types 0 and 1: violation
     v_color = u_color_violation;
-  } else if (a_rect_type > 0.5 && a_rect_type < 1.5) {
-    // incomplete
+  } else {
+    // Types 2 and 3: incomplete
     v_color = u_color_incomplete;
-  } else if (a_rect_type < 0.5) {
-    // pass
-    v_color = u_color_pass;
+  }
+
+  // Calculate final opacity
+  // Check if this is a manual analyzer (type 0 or 2)
+  bool isManual = a_rect_type == 0.0 || a_rect_type == 2.0;
+
+  // If manual AND stale, use 0.3, otherwise use global opacity
+  if (isManual && u_manual_stale > 0.5) {
+    v_opacity = 0.3;
   } else {
-    // inapplicable - use a neutral gray
-    v_color = vec3(0.5, 0.5, 0.5);
+    v_opacity = u_opacity;
   }
+
+  // Calculate border factor based on scale.
+  v_border_factor = smoothstep(0.5, 0.8, u_scale);
+
+  // Calculate fill opacity based on whether this rect is active
+  // If active (rect_id matches u_active_id), use 0.5, otherwise 0.1
+  v_fill_opacity = a_rect_id == u_active_id ? 0.3 : 0.1;
+  v_border_opacity = a_rect_id == u_active_id ? 1.0 : 0.5;
 }

package/dist/runtime/components/Edit/Features/Analyze/Results/Results.vue

@@ -25,6 +25,7 @@
             v-for="result in group.results"
             v-bind="result"
             :key="group.group + result.id"
+            v-model="activeId"
           />
         </li>
       </ul>
@@ -40,6 +41,7 @@ const props = defineProps({
   results: { type: Array, required: true }
 });
 const { $t } = useBlokkli();
+const activeId = defineModel({ type: String, ...{ default: "" } });
 const groupOrder = {
   problems: 1,
   success: 2,

package/dist/runtime/components/Edit/Features/Analyze/Results/Results.vue.d.ts

@@ -2,5 +2,12 @@ import type { AnalyzeResultMapped } from '../analyzers/types.js';
 type __VLS_Props = {
     results: AnalyzeResultMapped[];
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItem.vue

@@ -15,7 +15,7 @@
       {{ descriptionMapped }}
     </p>
 
-    <ResultsItemNodes :nodes :result-id="id" />
+    <ResultsItemNodes v-model="activeId" :nodes :result-id="id" />
   </div>
 </template>
 
@@ -32,11 +32,11 @@ const props = defineProps({
   description: { type: String, required: true },
   link: { type: String, required: false },
   status: { type: String, required: true },
-  nodes: { type: [Object, Array], required: true },
   impact: { type: String, required: false },
-  scoreTargets: { type: Boolean, required: false },
-  plugin: { type: String, required: true }
+  plugin: { type: String, required: true },
+  nodes: { type: Array, required: true }
 });
+const activeId = defineModel({ type: String, ...{ default: "" } });
 const { getCategoryLabel } = useAnalyzeHelper();
 const { $t } = useBlokkli();
 const categoryLabel = computed(() => {

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItem.vue.d.ts

@@ -1,3 +1,21 @@
-import type { AnalyzeResultMapped } from '../analyzers/types.js';
-declare const _default: import("vue").DefineComponent<AnalyzeResultMapped, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AnalyzeResultMapped> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+import type { AnalyzeCategory, AnalyzeImpact, AnalyzeNodeMapped, AnalyzeStatus } from '../analyzers/types.js';
+type __VLS_Props = {
+    id: string;
+    title: string;
+    category: AnalyzeCategory;
+    description: string;
+    link?: string;
+    status: AnalyzeStatus;
+    impact?: AnalyzeImpact;
+    plugin: string;
+    nodes: AnalyzeNodeMapped[];
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItemNodes.vue

@@ -1,6 +1,6 @@
 <template>
   <details
-    v-if="mappedNodes.length"
+    v-if="nodes.length"
     class="bk-analyze-results-item-nodes"
     :open="isSingle || isOpen"
     @toggle="shouldRender = true"
@@ -25,7 +25,8 @@
               <ResultsItemNodesTarget
                 v-for="(target, k) in node.targets"
                 :key="i + '_' + j + '_' + k"
-                :target="target"
+                v-model="activeId"
+                :target
                 :result-id
               />
             </li>
@@ -37,31 +38,22 @@
 </template>
 
 <script setup>
-import { computed, ref, useBlokkli } from "#imports";
+import { computed, ref, useBlokkli, watch } from "#imports";
 import ResultsItemNodesTarget from "./ResultsItemNodesTarget.vue";
 import { Icon } from "#blokkli/components";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const props = defineProps({
   resultId: { type: String, required: true },
-  nodes: { type: [Object, Array], required: true }
+  nodes: { type: Array, required: true }
 });
+const activeId = defineModel({ type: String, ...{ default: "" } });
 const shouldRender = ref(false);
 const isOpen = ref(false);
 const { $t } = useBlokkli();
-const mappedNodes = computed(() => {
-  const nodes = Array.isArray(props.nodes) ? props.nodes : [props.nodes];
-  return nodes.map((node) => {
-    return {
-      ...node,
-      targets: Array.isArray(node.targets) ? node.targets : [node.targets]
-    };
-  });
-});
 const isSingle = computed(
-  () => mappedNodes.value.length === 1 && mappedNodes.value[0]?.targets.length === 1
+  () => props.nodes.length === 1 && props.nodes[0]?.targets.length === 1
 );
 const grouped = computed(() => {
-  const map = mappedNodes.value.reduce(
+  const map = props.nodes.reduce(
     (acc, node) => {
       const description = node.description ?? "NONE";
       if (!acc[description]) {
@@ -79,8 +71,9 @@ const grouped = computed(() => {
     };
   });
 });
-onBlokkliEvent("analyze:click-node", (e) => {
-  if (e.id === props.resultId) {
+watch(activeId, (id) => {
+  const resultId = id.split("_____")[0];
+  if (resultId === props.resultId) {
     isOpen.value = true;
   }
 });

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItemNodes.vue.d.ts

@@ -1,7 +1,14 @@
-import type { AnalyzeNode } from '../analyzers/types.js';
+import type { AnalyzeNodeMapped } from '../analyzers/types.js';
 type __VLS_Props = {
     resultId: string;
-    nodes: AnalyzeNode | AnalyzeNode[];
+    nodes: AnalyzeNodeMapped[];
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItemNodesTarget.vue

@@ -16,29 +16,39 @@
 
 <script setup>
 import { Icon } from "#blokkli/components";
-import { ref, useBlokkli, useTemplateRef } from "#imports";
+import { computed, useBlokkli, useTemplateRef, watch } from "#imports";
 import { renderCycle } from "#blokkli/helpers/renderCycle";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const props = defineProps({
   resultId: { type: String, required: true },
-  target: { type: null, required: true }
+  target: { type: Object, required: true }
 });
 const { eventBus, dom, blocks, element } = useBlokkli();
+const activeId = defineModel({ type: String, ...{ default: "" } });
+const activeIndex = computed(() => {
+  const index = activeId.value.split("_____")[1];
+  if (index === void 0) {
+    return -1;
+  }
+  const indexNumber = Number.parseInt(index);
+  if (Number.isNaN(indexNumber)) {
+    return -1;
+  }
+  return indexNumber;
+});
 const elButton = useTemplateRef("elButton");
-const isFocused = ref(false);
-let focusTimeout = null;
+const isFocused = computed(() => activeIndex.value === props.target.globalIndex);
 function getElement() {
-  if (props.target) {
-    if (typeof props.target === "string") {
+  if (props.target.target) {
+    if (typeof props.target.target === "string") {
       return element.query(
         document.documentElement,
-        props.target,
+        props.target.target,
         "Find analyze result item node target."
       );
-    } else if (props.target instanceof HTMLElement) {
-      return props.target;
-    } else if (typeof props.target === "object" && "uuid" in props.target) {
-      const item = blocks.getBlock(props.target.uuid);
+    } else if (props.target.target instanceof HTMLElement) {
+      return props.target.target;
+    } else if (typeof props.target.target === "object" && "uuid" in props.target.target) {
+      const item = blocks.getBlock(props.target.target.uuid);
       if (item) {
         return dom.getDragElement(item) ?? null;
       }
@@ -50,22 +60,22 @@ function getElementLabel(tagName) {
   return `<${tagName.toLowerCase()}>`;
 }
 function getLabel() {
-  if (props.target) {
-    if (typeof props.target === "string") {
-      return props.target;
-    } else if (props.target instanceof HTMLElement) {
-      if (props.target instanceof HTMLImageElement) {
-        if (props.target.alt) {
-          return props.target.alt.slice(0, 50);
+  if (props.target.target) {
+    if (typeof props.target.target === "string") {
+      return props.target.target;
+    } else if (props.target.target instanceof HTMLElement) {
+      if (props.target.target instanceof HTMLImageElement) {
+        if (props.target.target.alt) {
+          return props.target.target.alt.slice(0, 50);
         }
       }
-      const textContent = (props.target.textContent ?? "").slice(0, 50);
+      const textContent = (props.target.target.textContent ?? "").slice(0, 50);
       if (textContent) {
         return textContent;
       }
-      return getElementLabel(props.target.tagName);
-    } else if (typeof props.target === "object" && "uuid" in props.target) {
-      return props.target.uuid;
+      return getElementLabel(props.target.target.tagName);
+    } else if (typeof props.target.target === "object" && "uuid" in props.target.target) {
+      return props.target.target.uuid;
     }
   }
 }
@@ -79,6 +89,10 @@ function findClosestUuid(element2) {
   }
 }
 async function onClick() {
+  if (activeIndex.value === props.target.globalIndex) {
+    activeId.value = "";
+    return;
+  }
   const element2 = getElement();
   if (!element2) {
     return;
@@ -93,25 +107,17 @@ async function onClick() {
   eventBus.emit("scrollIntoView", {
     element: element2
   });
+  activeId.value = props.resultId + "_____" + props.target.globalIndex;
 }
-onBlokkliEvent("analyze:click-node", (e) => {
-  isFocused.value = false;
-  if (focusTimeout) {
-    window.clearTimeout(focusTimeout);
+watch(isFocused, (isFocused2) => {
+  if (!isFocused2) {
+    return;
   }
-  if (e.id === props.resultId) {
-    const el = getElement();
-    if (el === e.target && elButton.value) {
-      elButton.value.scrollIntoView({
-        behavior: "smooth",
-        block: "center"
-      });
-      isFocused.value = true;
-      focusTimeout = window.setTimeout(() => {
-        isFocused.value = false;
-      }, 1e3);
-      return;
-    }
+  if (elButton.value) {
+    elButton.value.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    });
   }
 });
 </script>