@blokkli/editor 2.0.0-alpha.52 → 2.0.0-alpha.53

package/dist/runtime/editor/features/analyze/Main.vue

@@ -32,9 +32,9 @@
 "
       />
 
-      <div v-if="analyzerStatuses.length > 1" class="bk-analyze-statuses">
+      <div v-if="staleAnalyzerStatuses.length > 1" class="bk-analyze-statuses">
         <div
-          v-for="analyzer in analyzerStatuses"
+          v-for="analyzer in staleAnalyzerStatuses"
           :key="analyzer.id"
           class="bk-analyze-status-item"
         >
@@ -62,24 +62,17 @@
           :options="categoryOptions"
         />
       </div>
-      <AnalyzeSummary :results="results" />
-      <Results v-model="activeId" :results="results" />
+      <AnalyzeSummary :results="activeResults" />
+      <Results :results="activeResults" />
+      <IgnoredResults v-if="ignoredResults.length" :results="ignoredResults" />
     </div>
   </div>
-  <Renderer
-    v-if="results.length && (keepVisible || isShown) && !ui.isApproving.value"
-    v-model="activeId"
-    :results
-    :is-stale
-    :manual-analyzer-ids
-    :is-running
-    :is-shown
-  />
 </template>
 
 <script setup>
 import {
   computed,
+  ref,
   useBlokkli,
   useState,
   onMounted,
@@ -87,8 +80,8 @@ import {
   watch
 } from "#imports";
 import Results from "./Results/Results.vue";
+import IgnoredResults from "./Ignored/index.vue";
 import AnalyzeSummary from "./Summary/index.vue";
-import Renderer from "./Renderer/index.vue";
 import { useAnalyzeHelper } from "./helper";
 import {
   FormSelect,
@@ -96,13 +89,27 @@ import {
   RelativeTime
 } from "#blokkli/editor/components";
 import { renderCycle } from "#blokkli/editor/helpers/vue";
+import { defineHighlight, onBlokkliEvent } from "#blokkli/editor/composables";
+import { falsy } from "#blokkli/helpers";
 const props = defineProps({
   langcode: { type: String, required: true },
   analyze: { type: Object, required: true },
   isShown: { type: Boolean, required: true }
 });
 const ALL = "ALL";
-const { $t, ui, state, directive, dom, storage } = useBlokkli();
+const {
+  $t,
+  ui,
+  state,
+  directive,
+  dom,
+  storage,
+  element,
+  blocks,
+  eventBus,
+  readability,
+  adapter
+} = useBlokkli();
 const { getCategoryLabel } = useAnalyzeHelper();
 const refreshKey = computed(() => {
   return `dom:${dom.settleKey.value}_directive:${directive.settleKey.value}_state:${state.refreshKey.value}`;
@@ -120,12 +127,83 @@ const manualResults = useState(
   "blokkli:analyze:manual",
   () => []
 );
-const activeId = useState(() => "");
+const activeId = ui.activeHighlightId;
 const lastRun = useState(() => 0);
 const lastRunKey = useState(() => "");
 const selectedCategory = useState(() => ALL);
 const keepVisible = storage.use("analyze:keepVisible", true);
 const providerRootElement = ui.providerElement;
+function getIgnoredFromState() {
+  try {
+    return new Set(state.getMappedState().ignoredAnalyzeIdentifiers);
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+const ignoredIdentifiers = ref(getIgnoredFromState());
+defineHighlight(() => {
+  if (!keepVisible.value && !props.isShown) {
+    return;
+  }
+  if (ui.isApproving.value) {
+    return;
+  }
+  const highlights = [];
+  for (const result of activeResults.value) {
+    if (result.status !== "incomplete" && result.status !== "violation") {
+      continue;
+    }
+    for (const node of result.nodes) {
+      if (!node) {
+        continue;
+      }
+      for (const target of node.targets) {
+        if (!target) {
+          continue;
+        }
+        let targetElement = null;
+        let targetUuid = node.uuid;
+        if (typeof target.target === "string") {
+          targetElement = element.query(
+            ui.providerElement,
+            target.target,
+            "Find analyze highlight target element."
+          );
+        } else if (target.target instanceof HTMLElement) {
+          targetElement = target.target;
+        } else if ("uuid" in target.target) {
+          targetUuid = target.target.uuid;
+          const item = blocks.getBlock(target.target.uuid);
+          if (item) {
+            targetElement = dom.getDragElement(item) ?? null;
+          }
+        }
+        if (targetElement) {
+          const id = result.id + "_____" + target.globalIndex;
+          let label = result.title;
+          if (node.score != null) {
+            const scoreLabel = readability.analyzer.value.scoreLabel;
+            label += ` \xB7 ${scoreLabel} ${readability.formatScore(node.score)}`;
+          }
+          highlights.push({
+            id,
+            element: targetElement,
+            uuid: targetUuid,
+            color: result.status === "violation" ? "red" : "yellow",
+            icon: "bk_mdi_speed",
+            label,
+            description: $t("analyzeShowDetails", "Show details"),
+            onClick: () => {
+              activeId.value = activeId.value === id ? "" : id;
+              eventBus.emit("sidebar:open", "analyze");
+            }
+          });
+        }
+      }
+    }
+  }
+  return highlights;
+});
 const continuousAnalyzers = computed(
   () => props.analyze.analyzers.value.filter((a) => a.continuous)
 );
@@ -162,9 +240,11 @@ const allResults = computed(() => {
         mappedTargets.push({ target, globalIndex: currentIndex });
         currentIndex++;
       }
+      const ignored = !!node.identifier && ignoredIdentifiers.value.has(result.id + ":" + node.identifier);
       mappedNodes.push({
         ...node,
-        targets: mappedTargets
+        targets: mappedTargets,
+        ignored
       });
     }
     mappedResults.push({
@@ -181,8 +261,24 @@ const results = computed(() => {
   }
   return allResults.value.filter((v) => v.category === selectedCategory.value);
 });
+function filterResultsByIgnored(items, wantIgnored) {
+  const filtered = [];
+  for (const result of items) {
+    const nodes = result.nodes.filter((n) => n.ignored === wantIgnored);
+    if (nodes.length) {
+      filtered.push({ ...result, nodes });
+    }
+  }
+  return filtered;
+}
+const activeResults = computed(
+  () => filterResultsByIgnored(results.value, false)
+);
+const ignoredResults = computed(
+  () => filterResultsByIgnored(allResults.value, true)
+);
 watch(
-  allResults,
+  activeResults,
   (v) => {
     let count = 0;
     for (const r of v) {
@@ -222,12 +318,15 @@ const staleMessage = computed(() => {
   }
   return "";
 });
-const analyzerStatuses = computed(() => {
+const staleAnalyzerStatuses = computed(() => {
   if (!hasRunOnce.value) {
     return [];
   }
   return props.analyze.analyzers.value.map((analyzer) => {
-    const status = analyzer.continuous ? $t("analyzeStatusUpToDate", "Up-to-date") : isStale.value ? $t("analyzeStatusStale", "Stale") : $t("analyzeStatusUpToDate", "Up-to-date");
+    if (analyzer.continuous || !isStale.value) {
+      return;
+    }
+    const status = $t("analyzeStatusStale", "Stale");
     const title = typeof analyzer.label === "function" ? analyzer.label(ui.interfaceLanguage.value, $t) : analyzer.label;
     return {
       id: analyzer.id,
@@ -235,11 +334,8 @@ const analyzerStatuses = computed(() => {
       status,
       isStale: !analyzer.continuous && isStale.value
     };
-  });
+  }).filter(falsy);
 });
-const manualAnalyzerIds = computed(
-  () => new Set(manualAnalyzers.value.map((a) => a.id))
-);
 let refreshTimeout = null;
 watch(refreshKey, () => {
   if (!hasContinuousAnalyzers.value) {
@@ -388,6 +484,34 @@ const categoryOptions = computed(() => {
     ...categories
   ];
 });
+async function ignoreNode(resultId, identifier) {
+  const key = resultId + ":" + identifier;
+  if (adapter.ignoreAnalyzeIdentifiers) {
+    await state.mutateWithLoadingState(
+      () => adapter.ignoreAnalyzeIdentifiers([key]),
+      false
+    );
+    ignoredIdentifiers.value = getIgnoredFromState();
+  }
+}
+async function unignoreNode(resultId, identifier) {
+  const key = resultId + ":" + identifier;
+  if (adapter.unignoreAnalyzeIdentifiers) {
+    await state.mutateWithLoadingState(
+      () => adapter.unignoreAnalyzeIdentifiers([key]),
+      false
+    );
+    ignoredIdentifiers.value = getIgnoredFromState();
+  }
+}
+onBlokkliEvent("analyze:ignore", (e) => ignoreNode(e.resultId, e.identifier));
+onBlokkliEvent(
+  "analyze:unignore",
+  (e) => unignoreNode(e.resultId, e.identifier)
+);
+onBlokkliEvent("state:reloaded", () => {
+  ignoredIdentifiers.value = getIgnoredFromState();
+});
 onMounted(async () => {
   await props.analyze.ensureInitialized();
   if (hasContinuousAnalyzers.value) {

package/dist/runtime/editor/features/analyze/Results/Results.d.vue.ts

@@ -2,14 +2,6 @@ import type { AnalyzeResultMapped } from '../analyzers/types.js';
 type __VLS_Props = {
     results: AnalyzeResultMapped[];
 };
-type __VLS_ModelProps = {
-    modelValue?: string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: 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>;
+declare const __VLS_export: 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>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/analyze/Results/Results.vue

@@ -25,7 +25,6 @@
             v-for="result in group.results"
             v-bind="result"
             :key="group.group + result.id"
-            v-model="activeId"
           />
         </li>
       </ul>
@@ -41,7 +40,6 @@ 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/editor/features/analyze/Results/Results.vue.d.ts

@@ -2,14 +2,6 @@ import type { AnalyzeResultMapped } from '../analyzers/types.js';
 type __VLS_Props = {
     results: AnalyzeResultMapped[];
 };
-type __VLS_ModelProps = {
-    modelValue?: string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: 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>;
+declare const __VLS_export: 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>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/analyze/Results/ResultsItem.d.vue.ts

@@ -10,14 +10,6 @@ type __VLS_Props = {
     plugin: string;
     nodes: AnalyzeNodeMapped[];
 };
-type __VLS_ModelProps = {
-    modelValue?: string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: 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>;
+declare const __VLS_export: 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>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/analyze/Results/ResultsItem.vue

@@ -15,7 +15,7 @@
       {{ descriptionMapped }}
     </p>
 
-    <ResultsItemNodes v-model="activeId" :nodes :result-id="id" />
+    <ResultsItemNodes :nodes :result-id="id" />
   </div>
 </template>
 
@@ -36,7 +36,6 @@ const props = defineProps({
   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/editor/features/analyze/Results/ResultsItem.vue.d.ts

@@ -10,14 +10,6 @@ type __VLS_Props = {
     plugin: string;
     nodes: AnalyzeNodeMapped[];
 };
-type __VLS_ModelProps = {
-    modelValue?: string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: 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>;
+declare const __VLS_export: 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>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/analyze/Results/ResultsItemNodes.d.vue.ts

@@ -3,14 +3,6 @@ type __VLS_Props = {
     resultId: string;
     nodes: AnalyzeNodeMapped[];
 };
-type __VLS_ModelProps = {
-    modelValue?: string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: 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>;
+declare const __VLS_export: 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>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/analyze/Results/ResultsItemNodes.vue

@@ -25,7 +25,7 @@
               <ResultsItemNodesTarget
                 v-for="(target, k) in node.targets"
                 :key="i + '_' + j + '_' + k"
-                v-model="activeId"
+                :node
                 :target
                 :result-id
               />
@@ -45,10 +45,9 @@ const props = defineProps({
   resultId: { type: String, 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 { $t, ui } = useBlokkli();
 const isSingle = computed(
   () => props.nodes.length === 1 && props.nodes[0]?.targets.length === 1
 );
@@ -71,10 +70,14 @@ const grouped = computed(() => {
     };
   });
 });
-watch(activeId, (id) => {
-  const resultId = id.split("_____")[0];
-  if (resultId === props.resultId) {
-    isOpen.value = true;
+watch(
+  () => ui.activeHighlightId.value,
+  (id) => {
+    const resultId = id.split("_____")[0];
+    if (resultId === props.resultId) {
+      shouldRender.value = true;
+      isOpen.value = true;
+    }
   }
-});
+);
 </script>

package/dist/runtime/editor/features/analyze/Results/ResultsItemNodes.vue.d.ts

@@ -3,14 +3,6 @@ type __VLS_Props = {
     resultId: string;
     nodes: AnalyzeNodeMapped[];
 };
-type __VLS_ModelProps = {
-    modelValue?: string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: 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>;
+declare const __VLS_export: 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>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/analyze/Results/ResultsItemNodesTarget.d.vue.ts

@@ -1,16 +1,9 @@
-import type { AnalyzeNodeTargetMapped } from '#blokkli/analyzer/types';
+import type { AnalyzeNodeMapped, AnalyzeNodeTargetMapped } from '#blokkli/analyzer/types';
 type __VLS_Props = {
     resultId: string;
+    node: AnalyzeNodeMapped;
     target: AnalyzeNodeTargetMapped;
 };
-type __VLS_ModelProps = {
-    modelValue?: string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: 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>;
+declare const __VLS_export: 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>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/analyze/Results/ResultsItemNodesTarget.vue

@@ -1,31 +1,65 @@
 <template>
   <div
-    class="bk-analyze-results-item-nodes-target"
+    class="bk-analyze-results-item-nodes-target _bk_relative _bk_flex _bk_items-center _bk_gap-5 _bk_pr-5"
     :class="{
-  'bk-is-focused': isFocused
+  '_bk_bg-accent-700': isFocused
 }"
   >
-    <div>
-      <button ref="elButton" @click.prevent="onClick">
-        <Icon name="bk_mdi_visibility-fill" />
-        <span>{{ getLabel() }}</span>
-      </button>
-    </div>
+    <button
+      ref="elButton"
+      class="_bk_flex-1 _bk_min-w-0 _bk_text-mono-600 _bk_flex _bk_items-center _bk_gap-5 _bk_hover:underline _bk_underline-offset-[3px] _bk_py-[7px] _bk_px-10 _bk_hover:text-accent-700 _bk_scroll-mt-50"
+      :class="{
+  '_bk_!text-accent-50': isFocused
+}"
+      @click.prevent="onClick"
+    >
+      <div v-if="node.score != null && node.scoreLabel">
+        <span class="bk-pill _bk_shrink-0">{{ node.score.toFixed(1) }}</span>
+      </div>
+      <span class="_bk_truncate _bk_w-full _bk_inline-block _bk_font-mono">{{
+        getLabel()
+      }}</span>
+    </button>
+    <button
+      v-if="node.identifier"
+      class="_bk_shrink-0 _bk_size-25 _bk_flex _bk_items-center _bk_justify-center _bk_rounded _bk_group/tooltip _bk_relative"
+      :class="
+  isFocused ? '_bk_text-accent-200 _bk_hover:text-accent-700 _bk_hover:bg-white' : '_bk_text-mono-500 _bk_hover:bg-accent-700 _bk_hover:text-accent-50'
+"
+      @click.prevent="
+  eventBus.emit(node.ignored ? 'analyze:unignore' : 'analyze:ignore', {
+    resultId,
+    identifier: node.identifier
+  })
+"
+    >
+      <Icon
+        :name="node.ignored ? 'bk_mdi_visibility' : 'bk_mdi_visibility_off'"
+        class="_bk_size-15"
+      />
+      <Tooltip
+        placement="center-before"
+        small
+        :label="
+  node.ignored ? $t('analyzeUnignore', 'Restore') : $t('analyzeIgnore', 'Ignore')
+"
+      />
+    </button>
   </div>
 </template>
 
 <script setup>
-import { Icon } from "#blokkli/editor/components";
 import { computed, useBlokkli, useTemplateRef, watch } from "#imports";
 import { renderCycle } from "#blokkli/editor/helpers/vue";
+import { Icon, Tooltip } from "#blokkli/editor/components";
 const props = defineProps({
   resultId: { type: String, required: true },
+  node: { type: Object, required: true },
   target: { type: Object, required: true }
 });
-const { eventBus, dom, blocks, element } = useBlokkli();
-const activeId = defineModel({ type: String, ...{ default: "" } });
+const { $t, ui, eventBus, dom, blocks, element } = useBlokkli();
 const activeIndex = computed(() => {
-  const index = activeId.value.split("_____")[1];
+  const index = ui.activeHighlightId.value.split("_____")[1];
   if (index === void 0) {
     return -1;
   }
@@ -90,7 +124,7 @@ function findClosestUuid(element2) {
 }
 async function onClick() {
   if (activeIndex.value === props.target.globalIndex) {
-    activeId.value = "";
+    ui.activeHighlightId.value = "";
     return;
   }
   const element2 = getElement();
@@ -107,17 +141,21 @@ async function onClick() {
   eventBus.emit("scrollIntoView", {
     element: element2
   });
-  activeId.value = props.resultId + "_____" + props.target.globalIndex;
+  ui.activeHighlightId.value = props.resultId + "_____" + props.target.globalIndex;
 }
-watch(isFocused, (isFocused2) => {
-  if (!isFocused2) {
-    return;
-  }
-  if (elButton.value) {
-    elButton.value.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest"
-    });
-  }
-});
+watch(
+  isFocused,
+  (isFocused2) => {
+    if (!isFocused2) {
+      return;
+    }
+    if (elButton.value) {
+      elButton.value.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+      });
+    }
+  },
+  { immediate: true }
+);
 </script>

package/dist/runtime/editor/features/analyze/Results/ResultsItemNodesTarget.vue.d.ts

@@ -1,16 +1,9 @@
-import type { AnalyzeNodeTargetMapped } from '#blokkli/analyzer/types';
+import type { AnalyzeNodeMapped, AnalyzeNodeTargetMapped } from '#blokkli/analyzer/types';
 type __VLS_Props = {
     resultId: string;
+    node: AnalyzeNodeMapped;
     target: AnalyzeNodeTargetMapped;
 };
-type __VLS_ModelProps = {
-    modelValue?: string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: 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>;
+declare const __VLS_export: 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>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/analyze/analyzers/altText.js

@@ -1,4 +1,5 @@
 import { defineAnalyzer } from "#blokkli/analyzer";
+import { hashString } from "#blokkli/analyzer/helpers/hashString";
 export default defineAnalyzer(() => {
   return {
     id: "blokkli:image-alt-text",
@@ -50,6 +51,7 @@ export default defineAnalyzer(() => {
               "Image without alt text"
             ),
             impact: "serious",
+            identifier: hashString(img.src),
             targets: img.element
           }))
         });

package/dist/runtime/editor/features/analyze/analyzers/headingStructure.js

@@ -1,5 +1,6 @@
 import { falsy } from "#blokkli/helpers";
 import { defineAnalyzer } from "./defineAnalyzer.js";
+import { hashString } from "./helpers/hashString.js";
 export default defineAnalyzer(() => {
   return {
     id: "blokkli:heading-structure",
@@ -36,6 +37,7 @@ export default defineAnalyzer(() => {
           impact: "serious",
           nodes: h1Elements.map((h) => ({
             description: h.text,
+            identifier: hashString(h.level + ":" + h.text),
             targets: h.element
           }))
         });
@@ -80,6 +82,7 @@ export default defineAnalyzer(() => {
           nodes: orderIssues.map(({ current, previous }) => ({
             description: `${previous.element.tagName} \u2192 ${current.element.tagName}: "${current.text}"`,
             impact: "moderate",
+            identifier: hashString(current.level + ":" + current.text),
             targets: current.element
           }))
         });

package/dist/runtime/editor/features/analyze/analyzers/helpers/hashString.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Simple string hash (djb2 variant). Returns a base-36 encoded 32-bit integer.
+ *
+ * Used to create content-based identifiers for analyze nodes so that ignored
+ * findings reappear when the underlying content changes.
+ */
+export declare function hashString(input: string): string;

package/dist/runtime/editor/features/analyze/analyzers/helpers/hashString.js

@@ -0,0 +1,8 @@
+export function hashString(input) {
+  let hash = 0;
+  for (let i = 0; i < input.length; i++) {
+    hash = (hash << 5) - hash + input.charCodeAt(i);
+    hash |= 0;
+  }
+  return hash.toString(36);
+}