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

package/dist/runtime/editor/features/fragments/Dialog/index.vue

@@ -120,3 +120,93 @@ const visible = computed(() => {
   return elements.value.filter((v) => v.text.includes(searchText.value.toLowerCase())).map((v) => v.name);
 });
 </script>
+
+<style>
+.bk-vars .bk-library-dialog-list {
+display: grid;
+gap: 20px
+}
+    @container (min-width: 700px) {
+.bk-vars .bk-library-dialog-list {
+grid-template-columns: repeat(2, minmax(0, 1fr))
+}
+    }
+    .bk-vars .bk-library-dialog-list > li {
+cursor: pointer;
+overflow: hidden;
+border-radius: 4px;
+border-width: 1px
+}
+    .bk-vars .bk-library-dialog-list > li .bk-blokkli-item-label {
+pointer-events: none;
+font-weight: 600
+}
+    @media not all and (hover: none) {
+        .bk-vars .bk-library-dialog-list > li:not(.bk-is-selected):hover {
+--bk-tw-border-opacity: 1;
+border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1))
+}
+          .bk-vars .bk-library-dialog-list > li:not(.bk-is-selected):hover .bk-block-preview-item-header {
+--bk-tw-bg-opacity: 1;
+background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1))
+}
+      }
+    .bk-vars .bk-library-dialog-list > li.bk-is-selected {
+--bk-tw-border-opacity: 1;
+border-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-border-opacity, 1))
+}
+    .bk-vars .bk-library-dialog-list > li.bk-is-selected .bk-block-preview-item-header {
+--bk-tw-bg-opacity: 1;
+background-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-bg-opacity, 1));
+--bk-tw-text-opacity: 1;
+color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
+}
+    .bk-vars .bk-library-dialog-list > li.bk-is-selected .bk-blokkli-item-label-icon {
+--bk-tw-border-opacity: 1;
+border-color: rgb(var(--bk-theme-accent-500) / var(--bk-tw-border-opacity, 1));
+--bk-tw-bg-opacity: 1;
+background-color: rgb(var(--bk-theme-accent-900) / var(--bk-tw-bg-opacity, 1));
+--bk-tw-text-opacity: 1;
+color: rgb(var(--bk-theme-accent-100) / var(--bk-tw-text-opacity, 1))
+}
+    .bk-vars .bk-library-dialog-list > li.bk-is-selected .bk-blokkli-item-label {
+--bk-tw-text-opacity: 1;
+color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
+}
+  .bk-vars .bk-library-dialog-content {
+position: relative
+}
+  .bk-vars .bk-reusable-dialog-form .bk-info-box {
+margin-top: 20px;
+margin-bottom: 20px
+}
+  .bk-vars .bk-library-dialog .bk-form-group,
+    .bk-vars .bk-library-dialog .bk-lead {
+margin-top: 20px;
+padding-left: 20px;
+padding-right: 20px
+}
+  .bk-vars .bk-library-dialog .bk-info-box {
+margin-left: 20px;
+margin-right: 20px;
+margin-top: 15px;
+margin-bottom: 15px
+}
+  .bk-vars .bk-library-dialog .bk-library-dialog-content {
+margin-top: 20px;
+margin-bottom: 20px;
+border-top-width: 1px;
+--bk-tw-border-opacity: 1;
+border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+padding-left: 20px;
+padding-right: 20px;
+padding-top: 20px
+}
+  .bk-vars .bk-library-pagination {
+position: sticky;
+bottom: 0px;
+z-index: 50;
+--bk-tw-bg-opacity: 1;
+background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1))
+}
+</style>

package/dist/runtime/editor/features/help/Shortcuts/index.vue

@@ -58,3 +58,74 @@ const groups = computed(() => {
   });
 });
 </script>
+
+<style>
+.bk .bk-help-shortcuts table {
+width: 100%;
+font-size: 14px;
+line-height: 20px;
+}
+
+    @container (min-width: 500px) {
+.bk .bk-help-shortcuts table {
+font-size: 18px;
+line-height: 28px;
+}
+    }
+
+    .bk .bk-help-shortcuts table .bk-shortcut > kbd {
+border-width: 1px !important;
+--bk-tw-border-opacity: 1 !important;
+border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1)) !important;
+--bk-tw-bg-opacity: 1 !important;
+background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1)) !important;
+--bk-tw-text-opacity: 1 !important;
+color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-text-opacity, 1)) !important;
+}
+
+    @container (min-width: 500px) {
+
+    .bk .bk-help-shortcuts table .bk-shortcut {
+font-size: 16px;
+line-height: 24px;
+}
+        .bk .bk-help-shortcuts table .bk-shortcut > kbd {
+font-size: 16px;
+line-height: 24px;
+}
+      }
+
+    .bk .bk-help-shortcuts table tr {
+border-bottom-width: 1px;
+--bk-tw-border-opacity: 1;
+border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+}
+
+    .bk .bk-help-shortcuts table tr.bk-is-heading {
+border-bottom-width: 2px;
+--bk-tw-border-opacity: 1;
+border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+}
+
+    .bk .bk-help-shortcuts table th {
+padding-top: 30px;
+padding-bottom: 10px;
+text-align: left;
+font-size: 12px;
+line-height: 16px;
+font-weight: 600;
+text-transform: uppercase;
+--bk-tw-text-opacity: 1;
+color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1));
+}
+
+    .bk .bk-help-shortcuts table td {
+padding-top: 10px;
+padding-bottom: 10px;
+}
+
+    .bk .bk-help-shortcuts table td:first-child {
+        width: 0;
+        padding-right: 10px;
+      }
+</style>

package/dist/runtime/editor/features/help/index.vue

@@ -47,3 +47,20 @@ export default {
   name: "Help"
 };
 </script>
+
+<style>
+.bk.bk-help {
+  padding: 20px;
+  container-type: inline-size
+}
+
+  .bk.bk-help .bk-help-section:not(:last-child) {
+  margin-bottom: 20px
+}
+
+  .bk.bk-help .bk-help-section > h3 {
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 700
+}
+</style>

package/dist/runtime/editor/features/highlights/Renderer/fragment.glsl

@@ -0,0 +1,89 @@
+#version 300 es
+
+precision highp float;
+
+in vec4 v_quad;
+in vec3 v_color1;
+in vec3 v_color2;
+in vec2 v_rect_size;
+in vec2 v_rect_center;
+in float v_border_factor;
+in vec2 v_rect_size_artboard;
+in float v_active;
+
+out vec4 fragColor;
+
+uniform float u_dpi;
+uniform float u_scale;
+uniform float u_opacity;
+
+int pseudoQuadrant(vec2 p) {
+  return int(floor(step(0.0, p.x) + 2.0 * step(0.0, -p.y)));
+}
+
+float sdRoundBox(vec2 p, vec2 b, vec4 radii) {
+  int idx = pseudoQuadrant(p);
+  float cr;
+  if (idx == 0) cr = radii[0];
+  else if (idx == 1) cr = radii[1];
+  else if (idx == 2) cr = radii[3];
+  else cr = radii[2];
+  vec2 q = abs(p) - b + cr;
+  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - cr;
+}
+
+void main() {
+  float borderThickness = (1.5 + v_active * 1.5) * u_dpi * v_border_factor;
+  vec2 size = v_rect_size;
+  vec4 radius = vec4(4.0 * u_dpi * v_border_factor);
+  float borderSoftness = 1.0;
+
+  vec2 posRelativeToQuad = gl_FragCoord.xy - v_rect_center;
+
+  // Signed distance to the outer edge of the border.
+  float mainDist = sdRoundBox(posRelativeToQuad, size / 2.0, radius);
+
+  // Border alpha (band around the edge).
+  float borderAlpha =
+    1.0 -
+    smoothstep(-borderSoftness, 0.0, abs(mainDist) - borderThickness);
+
+  // Determine border color: striped if two different colors, solid otherwise.
+  // Calculate perimeter distance in artboard space for scale-independent stripes.
+  vec2 viewportToArtboardRatio = v_rect_size_artboard / v_rect_size;
+  vec2 posRelativeToQuad_artboard = posRelativeToQuad * viewportToArtboardRatio;
+  vec2 halfSize_artboard = v_rect_size_artboard / 2.0;
+  vec2 posFromTopLeft = posRelativeToQuad_artboard + halfSize_artboard;
+  vec2 p = clamp(posFromTopLeft, vec2(0.0), v_rect_size_artboard);
+
+  float perimeterDistance = 0.0;
+  float width = v_rect_size_artboard.x;
+  float height = v_rect_size_artboard.y;
+
+  vec2 absP = abs(posRelativeToQuad_artboard);
+  float dx = absP.x - halfSize_artboard.x;
+  float dy = absP.y - halfSize_artboard.y;
+
+  if (dy > dx) {
+    if (posRelativeToQuad_artboard.y > 0.0) {
+      perimeterDistance = p.x;
+    } else {
+      perimeterDistance = height + p.x;
+    }
+  } else {
+    if (posRelativeToQuad_artboard.x < 0.0) {
+      perimeterDistance = height - p.y;
+    } else {
+      perimeterDistance = width + (height - p.y);
+    }
+  }
+
+  // Stripe pattern: alternate between color1 and color2 along perimeter.
+  float stripeLength = 14.0 - u_scale;
+  float stripePhase = mod(perimeterDistance, stripeLength * 2.0);
+  vec3 borderColor = stripePhase < stripeLength ? v_color1 : v_color2;
+
+  vec4 finalColor = vec4(borderColor, borderAlpha);
+  finalColor.a *= u_opacity;
+  fragColor = finalColor;
+}

package/dist/runtime/editor/features/highlights/Renderer/index.vue

@@ -0,0 +1,408 @@
+<template>
+  <Teleport to="#bk-canvas-overlay">
+    <div
+      v-if="tooltipHighlights.length"
+      v-show="showTooltip"
+      class="bk _bk_fixed _bk_top-0 _bk_left-0 _bk_z-analyze-tooltip _bk_flex _bk_flex-row _bk_-mt-25 _bk_shadow-lg"
+      :style="{
+  transform: `translate(${tooltipPosition.x}px, ${tooltipPosition.y}px)`
+}"
+      @pointerenter="isTooltipHovered = true"
+      @pointerleave="isTooltipHovered = false"
+    >
+      <button
+        v-for="(highlight, i) in tooltipHighlights"
+        :key="i"
+        class="_bk_cursor-pointer _bk_relative _bk_flex _bk_items-center _bk_gap-5 _bk_px-8 _bk_h-25 _bk_text-xs _bk_font-semibold _bk_whitespace-nowrap _bk_bg-scheme-normal _bk_text-scheme-text _bk_first:rounded-l _bk_last:rounded-r bk-highlight-tooltip-item _bk_group/tooltip"
+        :class="'bk-scheme-' + highlight.color"
+        @click.prevent="onTooltipItemClick(highlight)"
+      >
+        <Icon :name="highlight.icon" class="_bk_size-15" />
+        <span>{{ highlight.label }}</span>
+        <Tooltip
+          v-if="highlight.description"
+          :label="highlight.description"
+          placement="center-before"
+        />
+      </button>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { useBlokkli, computed, ref } from "#imports";
+import {
+  setBuffersAndAttributes,
+  drawBufferInfo,
+  setUniforms,
+  createBufferInfoFromArrays
+} from "twgl.js";
+import vs from "./vertex.glsl?raw";
+import fs from "./fragment.glsl?raw";
+import { RectangleBufferCollector } from "#blokkli/editor/helpers/webgl";
+import { toShaderColor } from "#blokkli/editor/helpers/color";
+import { defineRenderer, onBlokkliEvent } from "#blokkli/editor/composables";
+import { Icon, Tooltip } from "#blokkli/editor/components";
+const { animation, ui, theme, selection, plugins, dom, blocks, state } = useBlokkli();
+const showTooltip = computed(() => {
+  return !ui.isChangingOptions.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value;
+});
+const COLOR_PRIORITY = {
+  red: 2,
+  yellow: 1
+};
+function resolveHighlightElement(item) {
+  if (item.element) {
+    return item.element;
+  }
+  if (item.uuid) {
+    const block = blocks.getBlock(item.uuid);
+    if (block) {
+      return dom.getDragElement(block) ?? null;
+    }
+  }
+  return null;
+}
+function getColorsForGroup(highlights) {
+  const uniqueColors = [...new Set(highlights.map((h) => h.color))].sort(
+    (a, b) => (COLOR_PRIORITY[b] || 0) - (COLOR_PRIORITY[a] || 0)
+  );
+  const color1 = colorToRGB(uniqueColors[0]);
+  const color2 = uniqueColors.length > 1 ? colorToRGB(uniqueColors[1]) : color1;
+  return [color1, color2];
+}
+function colorToRGB(color) {
+  if (color === "red") {
+    return theme.red.value.normal;
+  }
+  return theme.yellow.value.normal;
+}
+const groups = computed(() => {
+  const allHighlights = plugins.get("highlight");
+  const elementMap = /* @__PURE__ */ new Map();
+  for (const highlight of allHighlights) {
+    const el = resolveHighlightElement(highlight);
+    if (!el) {
+      continue;
+    }
+    const existing = elementMap.get(el);
+    if (existing) {
+      existing.push(highlight);
+    } else {
+      elementMap.set(el, [highlight]);
+    }
+  }
+  const result = [];
+  for (const [element, highlights] of elementMap) {
+    const [color1, color2] = getColorsForGroup(highlights);
+    const uuids = [
+      ...new Set(highlights.map((h) => h.uuid).filter((u) => !!u))
+    ];
+    result.push({ element, highlights, uuids, color1, color2 });
+  }
+  return result;
+});
+class HighlightsRectangleBufferCollector extends RectangleBufferCollector {
+  prevKey = "";
+  rectCache = /* @__PURE__ */ new Map();
+  color1Data = [];
+  color2Data = [];
+  activeData = [];
+  clearCache() {
+    this.rectCache.clear();
+    this.prevKey = "";
+  }
+  reset() {
+    super.reset();
+    this.color1Data = [];
+    this.color2Data = [];
+    this.activeData = [];
+  }
+  addHighlightRectangle(rect, color1, color2, active) {
+    this.addRectangle(rect, 0);
+    const c1 = toShaderColor(color1);
+    const c2 = toShaderColor(color2);
+    const a = active ? 1 : 0;
+    for (let v = 0; v < 4; v++) {
+      this.color1Data.push(c1[0], c1[1], c1[2]);
+      this.color2Data.push(c2[0], c2[1], c2[2]);
+      this.activeData.push(a);
+    }
+  }
+  createBufferInfo(gl) {
+    return createBufferInfoFromArrays(gl, {
+      a_position: {
+        numComponents: 3,
+        data: this.positions,
+        type: gl.FLOAT
+      },
+      a_rect_id: {
+        numComponents: 1,
+        data: this.rectId,
+        type: gl.FLOAT
+      },
+      a_state: {
+        numComponents: 1,
+        data: this.state,
+        type: gl.FLOAT
+      },
+      a_rect_type: {
+        numComponents: 1,
+        data: this.types,
+        type: gl.FLOAT
+      },
+      a_rect_radius: {
+        numComponents: 4,
+        data: this.radius,
+        type: gl.FLOAT
+      },
+      a_quad: {
+        numComponents: 4,
+        data: this.quad,
+        type: gl.FLOAT
+      },
+      a_color1: {
+        numComponents: 3,
+        data: this.color1Data,
+        type: gl.FLOAT
+      },
+      a_color2: {
+        numComponents: 3,
+        data: this.color2Data,
+        type: gl.FLOAT
+      },
+      a_active: {
+        numComponents: 1,
+        data: this.activeData,
+        type: gl.FLOAT
+      },
+      indices: this.indices
+    });
+  }
+  getBufferInfo(gl, force) {
+    const activeId = ui.activeHighlightId.value;
+    const key = activeId + "_" + groups.value.map((group, index) => {
+      const colors = group.highlights.map((h) => h.color).join(",");
+      const uuid = group.uuids[0];
+      if (uuid) {
+        const block = blocks.getBlock(uuid);
+        const dragEl = block ? dom.getDragElement(block) : null;
+        if (dragEl && dragEl === group.element) {
+          const blockRect = dom.getBlockRect(uuid);
+          if (blockRect) {
+            this.rectCache.set(group.element, blockRect);
+            return `${index}_${blockRect.time}_${colors}`;
+          }
+        }
+      }
+      if (!this.rectCache.has(group.element)) {
+        const rect2 = ui.getAbsoluteElementRect(group.element);
+        this.rectCache.set(group.element, rect2);
+      }
+      const rect = this.rectCache.get(group.element);
+      if (!rect) {
+        return `${index}_no_rect`;
+      }
+      return `${index}_${rect.x}_${rect.y}_${rect.width}_${rect.height}_${colors}`;
+    }).join("_");
+    const hasChanged = force || this.prevKey !== key;
+    if (hasChanged) {
+      this.reset();
+      for (let i = 0; i < groups.value.length; i++) {
+        const group = groups.value[i];
+        const id = `highlight_${i}`;
+        if (this.added.has(id)) {
+          continue;
+        }
+        const rect = this.rectCache.get(group.element);
+        if (!rect) {
+          continue;
+        }
+        const isActive = !!activeId && group.highlights.some((h) => h.id === activeId);
+        this.addHighlightRectangle(
+          {
+            id,
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height
+          },
+          group.color1,
+          group.color2,
+          isActive
+        );
+      }
+      this.prevKey = key;
+    }
+    if (hasChanged && gl) {
+      this.bufferInfo = this.createBufferInfo(gl);
+    }
+    return { info: this.bufferInfo, hasChanged };
+  }
+}
+const { collector } = defineRenderer("highlights-overlay", {
+  zIndex: 500,
+  collector: () => new HighlightsRectangleBufferCollector(),
+  program: () => ({ shaders: [vs, fs] }),
+  enabled: () => !selection.isMultiSelecting.value && !selection.isDragging.value && !ui.isChangingOptions.value && !selection.activeEditableLabel.value && !ui.isApproving.value,
+  render: (_ctx, gl, program) => {
+    gl.useProgram(program.program);
+    const { info } = collector.getBufferInfo(gl);
+    if (!info) {
+      return;
+    }
+    setUniforms(program, {
+      u_opacity: 1
+    });
+    animation.setSharedUniforms(gl, program);
+    setBuffersAndAttributes(gl, program, info);
+    drawBufferInfo(gl, info, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    collector.getBufferInfo();
+    if (groups.value.length === 0) {
+      return;
+    }
+    const borderRadius = 4 * ctx.dpi;
+    const lineWidth = 2 * ctx.dpi;
+    const activeLineWidth = 4 * ctx.dpi;
+    const activeId = ui.activeHighlightId.value;
+    for (let i = 0; i < groups.value.length; i++) {
+      const group = groups.value[i];
+      const rect = collector.rectCache.get(group.element);
+      if (!rect) {
+        continue;
+      }
+      const isActive = !!activeId && group.highlights.some((h) => h.id === activeId);
+      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.lineWidth = isActive ? activeLineWidth : lineWidth;
+      ctx2d.strokeStyle = `rgb(${group.color1[0]}, ${group.color1[1]}, ${group.color1[2]})`;
+      ctx2d.beginPath();
+      ctx2d.roundRect(x, y, width, height, borderRadius);
+      ctx2d.stroke();
+    }
+  }
+});
+onBlokkliEvent("ui:resized", function() {
+  collector.clearCache();
+  collector.reset();
+});
+onBlokkliEvent("state:reloaded", function() {
+  collector.clearCache();
+  collector.reset();
+});
+onBlokkliEvent("option:finish-change", () => {
+  collector.clearCache();
+  collector.reset();
+});
+const hoveredGroupIndex = ref(null);
+const isTooltipHovered = ref(false);
+let pendingIndex = null;
+let pendingChangedAt = 0;
+const ANCESTOR_DELAY = 150;
+const tooltipHighlights = computed(() => {
+  if (hoveredGroupIndex.value === null) {
+    return [];
+  }
+  const group = groups.value[hoveredGroupIndex.value];
+  return group ? group.highlights : [];
+});
+const tooltipPosition = computed(() => {
+  if (hoveredGroupIndex.value === null) {
+    return { x: 0, y: 0 };
+  }
+  const group = groups.value[hoveredGroupIndex.value];
+  if (!group) {
+    return { x: 0, y: 0 };
+  }
+  const rect = collector.rectCache.get(group.element);
+  if (!rect) {
+    return { x: 0, y: 0 };
+  }
+  const scale = ui.artboardScale.value;
+  const offset = ui.artboardOffset.value;
+  return {
+    x: rect.x * scale + offset.x,
+    y: rect.y * scale + offset.y
+  };
+});
+function onTooltipItemClick(highlight) {
+  highlight.onClick();
+}
+onBlokkliEvent("canvas:draw", (e) => {
+  const artboardX = (e.mouseX - e.artboardOffset.x) / e.artboardScale;
+  const artboardY = (e.mouseY - e.artboardOffset.y) / e.artboardScale;
+  if (isTooltipHovered.value) {
+    return;
+  }
+  let bestIndex = null;
+  let bestUuid = null;
+  let bestArea = Infinity;
+  for (let i = 0; i < groups.value.length; i++) {
+    const group = groups.value[i];
+    const rect = collector.rectCache.get(group.element);
+    if (!rect) {
+      continue;
+    }
+    if (artboardX >= rect.x && artboardX <= rect.x + rect.width && artboardY >= rect.y && artboardY <= rect.y + rect.height) {
+      if (bestIndex === null) {
+        bestIndex = i;
+        bestUuid = group.uuids[0] ?? null;
+        bestArea = rect.width * rect.height;
+        continue;
+      }
+      const uuid = group.uuids[0];
+      if (uuid && bestUuid && uuid !== bestUuid) {
+        if (state.isChildOf(uuid, bestUuid)) {
+          bestIndex = i;
+          bestUuid = uuid;
+          bestArea = rect.width * rect.height;
+        }
+        continue;
+      }
+      const area = rect.width * rect.height;
+      if (area < bestArea) {
+        bestIndex = i;
+        bestUuid = uuid ?? null;
+        bestArea = area;
+      }
+    }
+  }
+  if (bestIndex === hoveredGroupIndex.value) {
+    pendingIndex = bestIndex;
+    return;
+  }
+  let needsDelay = false;
+  if (bestIndex !== null && hoveredGroupIndex.value !== null) {
+    const currentEl = groups.value[hoveredGroupIndex.value]?.element;
+    const nextEl = groups.value[bestIndex]?.element;
+    if (currentEl && nextEl && nextEl.contains(currentEl)) {
+      needsDelay = true;
+    }
+  }
+  if (needsDelay) {
+    if (bestIndex !== pendingIndex) {
+      pendingIndex = bestIndex;
+      pendingChangedAt = e.time;
+    }
+    if (e.time - pendingChangedAt >= ANCESTOR_DELAY) {
+      hoveredGroupIndex.value = pendingIndex;
+    }
+  } else {
+    pendingIndex = bestIndex;
+    hoveredGroupIndex.value = bestIndex;
+  }
+});
+onBlokkliEvent("window:clickAway", () => {
+  hoveredGroupIndex.value = null;
+});
+</script>
+
+<script>
+export default {
+  name: "HighlightsRenderer"
+};
+</script>